@extends('admin.layout.master')
@section('custom_style')
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> --}}
@endsection
@section('home')
    <div class="col-12">
        @if (session('success'))
            <div class="alert alert-success" id="hide-alert">
                {{ session('success') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger" id="hide-alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="font-weight-bold mb-0">Notification</h5>
            </div>
        </div>
        <div class="card-body">
            <form id="filterform" class="d-flex flex-wrap" action="{{route('notification.index')}}" method="GET">
                <div class="col-12 col-md-3 mb-3 px-1">
                    <label for="">Employee Name</label>
                    <select id="emp_name" class="form-control name_live_search" name="emp_name">
                    </select>
                </div>
                <div class="col-12 col-md-3 mb-3 px-1">
                    <label for="">Employee Code</label>
                    <select id="emp_code" class="form-control code_live_search" name="emp_code">
                    </select>
                </div>
                <div class="col-12 col-md-3 mb-3 px-1">
                    <label for="">Department</label>
                    <select name="emp_department" id="emp_department" class="form-control input-sm">
                        <option value="all">--All--</option>
                        @if(!empty($departments))
                            @foreach($departments as $depart_val)
                                <option value="{{$depart_val->id}}">{{$depart_val->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <div class="col-12 col-md-3 mb-3 px-1">
                    <label for="">Designation</label>
                    <select name="emp_designation" id="emp_designation" class="form-control input-sm" >
                        <option value="all">--All--</option>
                        @if(!empty($designation_lists))
                            @foreach($designation_lists as $val)
                                <option value="{{$val->id}}">{{$val->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <div class='col-md-3'>
                    <div class="form-group">
                        <label>Station</label>
                        <select class="form-control input-sm station_live_search" name="station" id="station">
                        </select>
                    </div>
                </div>

                <div class="col-12 col-md-3 mb-3 px-1">
                    <button type="submit" class="btn w-100 btn-primary mt-4">Filter</button>
                </div>
                <div class="col-12 col-md-1 mb-3 px-1">
                    <button class="empty btn w-100 btn-warning mt-4" type="button">Reset</button>
                </div>
            </form>

            <div>
                @if(!empty($all_emp))

                {{-- <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                    Launch demo modal
                </button> --}}

                <!-- Modal -->
                <div class="modal fade" data-backdrop="static" data-keyboard="false" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <form action="{{route('notification.send')}}" method="post" class="notification_send" enctype="multipart/form-data">
                            <div class="modal-body">
                                @csrf
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">Code</label>
                                            <input type="text" name="code" class="form-control" value="{{old('code')}}" required>
                                            @error('code') <span class="text-danger"><strong>{{$message}}</strong></span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">Subject</label>
                                            <input type="text" name="subject" value="{{old('subject')}}" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">Body</label>
                                            <textarea type="text" name="body" value="{{old('body')}}" class="form-control" cols="30" rows="1" required></textarea>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">Attachments</label>
                                            <input type="file" name="attachments" value="{{old('file')}}" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">Link</label>
                                            <input type="text" name="link" value="{{old('link')}}" class="form-control">
                                        </div>
                                    </div>
                                    <input type="hidden" name="user_ids" class="user_ids">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-success">Send</button>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>

                    <table class="table table-hover table-bordered mt-3">
                        <thead>
                            <tr class="thead-dark">
                                <th>#</th>
                                <th>Emp Name</th>
                                <th>Emp Code</th>
                                <th>Designation</th>
                                <th>Dept.</th>
                                <th>All <input type="checkbox" class="checkall"><button type="submit" data-toggle="modal" data-target="#exampleModalCenter" class="notification_send_pop btn btn-success btn-sm px-2">Send</button></th>
                            </tr>
                        </thead>
                        <tbody id="emp_list">
                            @foreach ($all_emp as $key=>$emp)
                                <tr id="{{$emp->id}}">
                                    <td>{{$key+1}}</td>
                                    <td>{{$emp->emp_name}}</td>
                                    <td>{{$emp->emp_code}}</td>
                                    <td>@if(!empty($emp->fetch_designation->name)){{$emp->fetch_designation->name}}@endif</td>
                                    <td>@if(!empty($emp->fetch_department->name)){{$emp->fetch_department->name}}@endif</td>
                                    <td><input type="checkbox" class="selectedId select_id-{{$emp->id}}"></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>

@endsection

@section('script')
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> --}}
    <script>

            $('.checkall').click(function () {
                $('.selectedId').prop('checked', this.checked);
            });

            $('.selectedId').change(function () {
                let check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
                $('.checkall').prop("checked", check);
            });



        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        });

        $(document).ready(function(){
            $('.notification_send_pop').click(function(){
                console.log("123");
                let list = [];
                $("#emp_list tr").each(function () {
                    let tr_id = $(this).attr("id");
                    if (typeof tr_id != "undefined") {
                        if ($(".select_id-" + tr_id).is(":checked")) {
                            list.push(tr_id);
                        }
                    }
                });

                if(list.length <= 0){
                    alert("select atleast one employee");
                    return false;
                }else{
                    var data = JSON.stringify(list);
                    console.log(data);
                    $('.user_ids').val(data);
                    return true;
                }
            });
        });


    </script>

@endsection