@extends('Admin.include.app')
@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fas fa-book-reader"></i>&nbsp; Filter Panel</h3>
                        </div>
                        <div class="card-body">

                            <form name="searchForm" id="searchForm" method="POST" action="{{ route($c_page . '.find') }}">
                                @csrf

                                <div class="row">

                                    <div class="form-group col-md-4">
                                        <label>Epmloyee/Branch Name</label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            value="{{ old('name') }}" autocomplete="name" autofocus name="name"
                                            style='width:100%;'>
                                        @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="form-group col-md-12 text-center">
                                        <input type="submit" value="Search" id="" class="btn btn-success btn-sm">
                                        &nbsp;&nbsp;
                                        <a href="{{ route($c_page . '.index') }}" class="btn btn-warning btn-sm">Reset</a>
                                    </div>

                                    <div class="col-md-12">
                                        <div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-success">
                                <div class="card-header card-header-primary card-header-icon row">
                                    <div class="card-icon col-md-7">
                                        <i class="fas fa-book-reader"> Result Panel</i>
                                    </div>
                                    <div class="col-md-5 ">
                                        <a href="{{ asset('employeeImport.xlsx') }}" class="btn btn-primary float-right ml-2"><i
                                                class="fas fa-download">Download Import Template</i></a>
                                        <a href="{{ route($c_page . '.import') }}" class="btn btn-primary float-right ml-2"><i
                                                class="fas fa-upload"> Import Data</i></a>
                                        <a href="{{ route($c_page . '.export') }}" class="btn btn-primary float-right"><i
                                                class="fas fa-download"> Export</i></a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <form name="addForm" id="addForm" class="" method="POST"
                                        action="{{ route($c_page . '.multi-delete') }}">
                                        @csrf
                                        <div class="table-responsive">
                                            <table
                                                class="table table-striped table-bordered table-hover data-table dataTable dtr-inline"
                                                id="baseTable" style="width: 100%;">
                                                <div class='late-added' style="display:none;">
                                                    <span class='total-check'>0 Rows selected</span>
                                                    <button type='submit' class='btn btn-sm btn-danger'
                                                        style="margin-left:10px;">Remove All</button>
                                                </div>
                                                <thead style="background: darkcyan;">
                                                    <tr>
                                                        <th><input type="checkbox" name="selectDeselectAll"
                                                                onclick="tableCheckboxClick('selectDeselectAll')"
                                                                value="1" /></th>
                                                        <th>S.No.</th>
                                                        <th>Branch Code</th>
                                                        <th>Employee/Branch Name</th>
                                                        <!-- <th>Email</th>
                                                        <th>WhatsApp NO.</th> -->
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>

                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection
@section('script')
    <script type="text/javascript">
        $(function() {

            $(document).on('click', '.delete_btn', function() {
                var delete_link = $(this).data('delete_link');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = delete_link;
                    }
                })


            });

            $(document).on('click', '.status_btn', function() {
                var status_link = $(this).data('status_link');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "This Status will change!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, change it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        var status = $(this).data('next_click');
                        $.ajax({
                            url: status_link,
                            type: 'GET',
                            data: {
                                status: status
                            },
                            success: function(res) {
                                $('#baseTable').DataTable().clear().draw();
                            }
                        });
                    }
                })
            });

            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route($c_page . '.data') }}",
                    type: "GET",
                    data: function(d) {
                        return $.extend({}, d, {
                            "filters": $("#searchForm").serializeArray()
                        })
                    }
                },
                columns: [{
                        data: 'selectbox',
                        name: 'selectbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'employee_id',
                        name: 'employee_id'
                    },
                    {
                        data: 'employee_name',
                        name: 'employee_name'
                    },

                    // {
                    //     data: 'email',
                    //     name: 'email'
                    // },
                    // {
                    //     data: 'whatsapp_number',
                    //     name: 'whatsapp_number'
                    // },


                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },

                ],
            });

            $('table tbody').on('click', 'tr', function(e) {
                var tdlength = $(this).find("td").length;
                if ($(e.target).closest('td').is(':nth-child(' + (tdlength) + ')') || $(e.target).closest(
                        'td').is(':nth-child(' + (tdlength - 1) + ')') || $(e.target).closest('td').is(
                        ':nth-child(' + (tdlength - 2) + ')') || $(e.target).closest('td').is(
                        ':nth-child(' + (tdlength - 3) + ')')) {

                } else {
                    if ($(this).find("input[type='checkbox']").prop("checked")) {
                        $(this).find("input[type='checkbox']").prop("checked", false);
                    } else {
                        $(this).find("input[type='checkbox']").prop("checked", true);
                    }
                    tableCheckboxClick();
                }
            });
        });

        function tableCheckboxClick(value = "") {
            var totalCheck = 0;
            if (value != "") {
                if ($("input[name='selectDeselectAll']").prop("checked")) {
                    // select all
                    $("tbody input[type='checkbox']").prop("checked", true);
                } else {
                    //deselect all
                    $("tbody input[type='checkbox']").prop("checked", false);
                }
            } else {
                var totalCount = $("tbody input[name='checkedboxes[]']").length;
                totalCheck = $("tbody input[type='checkbox']:checked").length;

                if (totalCount == totalCheck) {
                    $("input[name='selectDeselectAll']").prop("checked", true);
                } else {
                    $("input[name='selectDeselectAll']").prop("checked", false);
                }
            }

            totalCheck = $("tbody input[type='checkbox']:checked").length;

            if (totalCheck > 0) {
                // alert(totalCheck);
                $(".late-added").css("display", "block");
                $(".total-check").html(totalCheck + " Rows selected");
            } else {
                $(".late-added").css("display", "none");
                $(".total-check").html("0 Rows selected");
            }
        }
    </script>
@endsection
