@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('content')
    <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">{{__('obs.notification')}}</h5>
            </div>
        </div>
        <div class="card-body">
            <form id="filterform" class="d-flex flex-wrap" action="{{route('payroll.hrm.notification.index')}}" method="GET">
                <div class="col-12 col-md-2 mb-3 px-1">
                    <label for="">{{__('obs.employee')}} {{__('obs.name')}}</label>
                    <select id="emp_name" class="form-control name_code_live_search" name="emp_id">
                    </select>
                </div>

                <div class="col-12 col-md-2 mb-3 px-1">
                    <label for="">{{__('obs.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-2 mb-3 px-1">
                    <label for="">{{__('obs.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-2'>
                    <div class="form-group">
                        <label>{{__('obs.station')}}</label>
                        <select class="form-control input-sm station_live_search" name="station" id="station">
                        </select>
                    </div>
                </div>

                <div class="col-12 col-md-1 mb-3 px-1">
                    <button type="submit" class="btn btn-primary mt-4">{{__('obs.filter')}}</button>
                </div>
                <div class="col-12 col-md-1 mb-3 px-1">
                    <button class="empty btn btn-warning mt-4" type="button">{{__('obs.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">{{__('obs.modal')}} {{__('obs.title')}}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <form action="{{route('payroll.hrm.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="">{{__('obs.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="">{{__('obs.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="">{{__('obs.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="">{{__('obs.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="">{{__('obs.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-bs-dismiss="modal">{{__('obs.close')}}</button>
                                <button type="submit" class="btn btn-success">{{__('obs.submit')}}</button>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>

                    <table class="table table-hover table-bordered mt-3">
                        <thead>
                            <tr class="thead-dark">
                                <th>#</th>
                                <th>{{__('obs.emp')}} {{__('obs.name')}}</th>
                                <th>{{__('obs.emp')}} {{__('obs.code')}}</th>
                                <th>{{__('obs.designation')}}</th>
                                <th>{{__('obs.dept')}}.</th>
                                <th>
                                    {{__('obs.all')}} &nbsp;
                                    <input type="checkbox" class="checkall"> &nbsp; &nbsp;
                                    <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="{{ asset('payroll_assets/payroll_common.js') }}"></script>
    <script>
        $('.select_2').select2();

        $('.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(){
                $("#exampleModalCenter").modal('show');
                // $("#exampleModalCenter").show('modal');
                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