@extends('essential.main', [
    'breadcum' => 'User',
    'route' => 'user',
])

@push('datepicker')
    <div date-rangepicker class="flex items-center pr-2" datepicker-format="dd-mm-yyyy">
        <div class="relative pb-2">
            @include('svg.date')
            <input name="start" type="text" autocomplete="off" id="start" value=""
                class="bg-white border border-gray-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2"
                placeholder="Select start date ">
        </div>
        <span class="mx-2 text-gray-500">to</span>
        <div class="relative pb-2">
            @include('svg.date')
            <input name="end" type="text" autocomplete="off" id="end" value=""
                class="bg-white border border-gray-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2"
                placeholder="Select end date ">
        </div>
    </div>
@endpush

@push('checkbutton')
    <x-custom.check_button x-data="" id="check">Check</x-cus.check_button>
    @endpush

    @push('deletebutton')
        <div>
            <button type="button" id="actionusersButton" hidden
                class="py-2.5 px-2.5 mr-2 mb-2 text-sm font-medium text-red-500 focus:outline-none bg-red-500 rounded-lg border border-gray-200 hover:bg-red-700 hover:text-primary focus:z-10 focus:ring-4 focus:ring-gray-200">
                <svg class="w-4 h-4 mx-2 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                    fill="currentColor">
                    <path
                        d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" />
                </svg>
            </button>
        </div>
    @endpush

    @push('filters')
        <div class="w-auto pr-2">
            <select id="selectRole" name="role"
                class="mb-2  block w-full rounded-lg border border-gray-200 bg-white px-2.5 py-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option value="0" disabled selected> Select Role</option>
                <option value="0" selected> All Role</option>
                {{-- @foreach ($roles as $role)
                <option value="{{ $role->id }}"> {{ $role->display_name }}</option>
            @endforeach --}}
            </select>
        </div>
    @endpush

    @section('content')
        <div class=" mt-2">
            @include('essential.buttons')
            <div class="flex flex-col w-full" id="user"></div>
        </div>
    @endsection

    @push('scripts')
        <script type='text/javascript'>
            $(document).ready(function() {
                $('#refresh').click(function(e) {
                    e.preventDefault();
                    var now = new Date();
                    var day = ("0" + now.getDate()).slice(-2);
                    var month = ("0" + (now.getMonth() + 1)).slice(-2);
                    var today = (day) + "-" + (month) + "-" + now.getFullYear();
                    $('#start').val('');
                    $('#end').val('');
                    $search = $('#search').val("");
                    getDataTable();
                    toastr.success("Data Refreshed...");
                });

            });


            $('#add_user').submit(function(e) {
                e.preventDefault();
                var form_data = new FormData(this);
                $.ajax({
                    type: "POST",
                    url: "users",
                    data: form_data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function(response) {
                        if (response.status == true) {
                            getDataTable();
                            toggleModal('modal-add');
                            $("#add_user")[0].reset();
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });


            function getDataTable(page) {
                $('#refresh_btn').hide();
                $('#load').show();
                $("#check").attr("disabled", true);
                $("#checkid").hide();
                $("#sgv").show();
                $search = $('#search').val();
                $start = $('#start').val();
                $end = $('#end').val();
                $.ajax({
                    type: "GET",
                    url: "users" + "?page=" + page,
                    data: {
                        search: $search,
                        start: $start,
                        end: $end,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        // toastr.success("Get User Successfully");
                        $('#user').html(response);
                        $("#check").attr("disabled", false);
                        $("#sgv").hide();
                        $("#checkid").show();
                        $('#refresh_btn').show();
                        $('#load').hide();
                    }
                });
            }

            function viewGuest($id) {
                $.ajax({
                    type: "GET",
                    url: "users/" + $id,
                    success: function(response) {
                        $('#ViewGuests').html(response);
                        toggleModal('modal-view');
                    }
                });
            }


            function editGuest($id) {
                $.ajax({
                    type: "GET",
                    url: "users/" + $id + "/edit",
                    success: function(response) {
                        $('#EditGuests').html(response);
                        toggleModal('modal-edit');
                    }
                });
            }

            function deleteModal($id) {
                $('#deleteID').val($id);
                toggleModal('modal-delete');
            }

            $('#check').click(function(e) {
                e.preventDefault();
                getDataTable();
            });

            $('#downloadexcel').click(function(e) {
                e.preventDefault();
                $start = $('#start').val();
                $end = $('#end').val();
                return window.location.href = "excel_user?start=" + $start + '&end=' + $end
            });

            $('#downloadpdf').click(function(e) {
                e.preventDefault();
                $start = $('#start').val();
                $end = $('#end').val();
                return window.location.href = "pdf_user?start=" + $start + '&end=' + $end

            });

            $("#deleteItem").click(function(e) {
                e.preventDefault();
                $id = $('#deleteID').val();

                $.ajax({
                    type: "DELETE",
                    url: "users/" + $id,
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status == true) {
                            toastr.success(response.message);
                            getDataTable();
                            toggleModal('modal-delete');
                            $("#deleteID").val('');
                        } else {
                            toastr.error(response.message);

                        }

                    }
                });
            });
            // multidelete
            // var data = new Array();

            // function selectusersRow(name) {
            //     var _searchedIndex = $.inArray(name, data);
            //     if (_searchedIndex >= 0) {
            //         data.splice(_searchedIndex, 1);
            //         justFun();
            //     } else {
            //         data.push(name);
            //         justFun();
            //     }
            // }

            // function justFun() {
            //     if ($.isEmptyObject(data)) {
            //         $('#actionusersButton').hide();
            //         $('#selectAll').prop('checked', false); //bulk select
            //     } else {
            //         $('#actionusersButton').show();
            //     }
            // }
        </script>
    @endpush


    @section('extras')
        @include('user.store')

        <div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center"
            id="modal-view">
            <div id="ViewGuests"></div>
        </div>
        <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-view-backdrop"></div>



        <div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center"
            id="modal-edit">
            <div id="EditGuests"></div>
        </div>
        <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-edit-backdrop"></div>

        @include('essential.delete')
    @endsection