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


@push('filters')
<div class="col-span-6 sm:col-span-3">
    <select id="selectRole" class="py-2 px-2 mr-2 mb-2 text-sm font-medium text-gray-700 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-muted_hover hover:text-primary focus:z-10 focus:ring-4 focus:ring-gray-200  cursor-pointer">
        <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="mx-2 mt-2">
    @include('essential.button')
    {{-- Filter Parameters --}}
    <input id="nameAsc" value="0" hidden>
    <input id="emailAsc" value="0" hidden>
    <input id="phoneAsc" value="0" hidden>
    {{-- Table Call --}}
    <div class="flex flex-col w-full" id="users">
    </div>
</div>
@endsection


@push('scripts')
    <script type="text/javascript">
        $('#refresh').click(function(e) {
        e.preventDefault();
        $name = $('#nameAsc').val(0);
        $email = $('#emailAsc').val(0);
        $phone = $('#phoneAsc').val(0);
        $search = $('#search').val("");
        $role = $('#selectRole').val(0);
        getDataTable();
        toastr.success("Data Refreshed...");
    });

    $('#deleteItem').click(function(e) {
        e.preventDefault();
        $id = $('#deleteID').val();
        $.ajax({
            type: "GET",
            url: "deleteuser",
            data: {
                id: $id,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.status == true) {
                    getDataTable();
                    toggleModal('modal-delete');
                    $('#deleteID').val("");
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            }
        });
    });

    function showEdit(id) {
        $.ajax({
            type: "get",
            url: "view_user",
            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                $('#userEditPart').html(response);
                toggleModal('modal-edit');
            }
        });

    }

    function showUser(id) {
        $.ajax({
            type: "get",
            url: "show_user",
            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                $('#userViewPart').html(response);
                toggleModal('modal-view');
            }
        });

    }


        function nameAscending() {
            $name = $('#nameAsc').val();
            if ($name == 0) {
                $('#nameAsc').val(1);
            } else {
                $('#nameAsc').val(0);
            }
            getDataTable();
        }

        function emailAscending() {
            $email = $('#emailAsc').val();
            if ($email == 0) {
                $('#emailAsc').val(1);
            } else {
                $('#emailAsc').val(0);
            }
            getDataTable();
        }

        function phoneAscending() {
            $phone = $('#phoneAsc').val();
            if ($phone == 0) {
                $('#phoneAsc').val(1);
            } else {
                $('#phoneAsc').val(0);
            }
            getDataTable();
        }

        $('#selectRole').change(function(e) {
            e.preventDefault();
            getDataTable();
        });

        function getDataTable(page) {
            $name = $('#nameAsc').val();
            $email = $('#emailAsc').val();
            $phone = $('#phoneAsc').val();
            $search = $('#search').val();
            $role = $('#selectRole').val();
            $.ajax({
                type: "GET",
                url: "getuser" + "?page=" + page,
                data: {
                    search: $search,
                    name_asc: $name,
                    email_asc: $email,
                    phone_asc: $phone,
                    role: $role,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#users').html(response);
                }
            });
        }


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


@section('extras')
    <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-delete">
        <div class="relative w-auto my-6 mx-auto max-w-3xl">
            <!--content-->
            <div
                class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                <!--footer-->
                <div class="p-6 text-center">
                    <svg aria-hidden="true" class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200" fill="none"
                        stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <input hidden type="text" id="deleteID">
                    <h3 class="mb-8 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to
                        delete
                        this product?</h3>
                    <button type="button" id="deleteItem"
                        class="w-48 text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2">
                        Yes, I'm sure
                    </button>
                    <button type="button" onclick="toggleModal('modal-delete')"
                        class="w-48 text-gray-500 bg-white hover:bg-muted_hover focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No,
                        cancel</button>
                </div>
            </div>
        </div>
    </div>
    <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-delete-backdrop">></div>





    {{-- User Edit --}}
    <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 class="relative w-auto my-6 mx-auto max-w-3xl">
            <!--content-->
            <div
                class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">

                <!-- Modal header -->
                <div class="flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600">
                    <h3 class="text-xl font-medium text-gray-900 dark:text-white">
                        EDIT USER
                    </h3>
                    <button type="button" onclick="toggleModal('modal-edit')"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <div id="userEditPart">
                </div>
            </div>
        </div>
    </div>
    <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-edit-backdrop"></div>

    {{-- User view --}}
    <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 class="relative w-auto my-6 mx-auto max-w-3xl">
            <!--content-->
            <div
                class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">

                <!-- Modal header -->
                <div class="flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600">
                    <h3 class="text-xl font-medium text-gray-900 dark:text-white">
                        VIEW USER
                    </h3>
                    <button type="button" onclick="toggleModal('modal-view')"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        data-modal-hide="userAddModal">
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <div id="userViewPart">
                </div>
            </div>
        </div>
    </div>
    <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-view-backdrop"></div>

    <!-- //add user modal -->
    <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-add">
        <div class="relative w-auto my-6 mx-auto max-w-3xl">
            <!--content-->
            <div
                class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">

                <!-- Modal header -->
                <div class="flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600">
                    <h3 class="text-xl font-medium text-gray-900 dark:text-white">
                        ADD NEW USER
                    </h3>
                    <button type="button" onclick="toggleModal('modal-add')"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        data-modal-hide="userAddModal">
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <form id="adduser" class="space-y-2 w-96" action="">
                    <div class="p-4">
                        @csrf
                        <div>
                            <label for="name"
                                class="block mb-1 text-sm font-medium text-gray-900 dark:text-white">Your
                                Name</label>
                            <input type="text" name="name" id="name"
                                class="mb-2 bg-muted border border-muted_hover text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                                placeholder="Karthikeyan" required>
                        </div>

                        <div>
                            <label for="email" class="block mb-1 text-sm font-medium text-gray-900 dark:text-white">
                                Email Id</label>
                            <input type="email" name="email" id="email"
                                class="mb-2 bg-muted border border-muted_hover text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                                placeholder="name@company.com" required>
                        </div>
                        <div>
                            <label for="email" class="block mb-1 text-sm font-medium text-gray-900 dark:text-white">
                                Mobile Number</label>
                            <input type="tel" name="mobile" id="mobile" maxlength="10" max="10"
                                class="mb-2 bg-muted border border-muted_hover text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                                placeholder="9876543210" required>
                        </div>
                        <div>
                            <label for="password" class="block mb-1 text-sm font-medium text-gray-900 dark:text-white">
                                Password</label>
                            <input type="password" name="password" id="password" placeholder="••••••••"
                                class="mb-2 bg-muted border border-muted_hover text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                                required>
                        </div>
                        <div>
                            <label for="confirm"
                                class="block mb-1 text-sm font-medium text-gray-900 dark:text-white">Confirm
                                Password</label>
                            <input type="password" name="password_cofirmation" id="password_cofirmation" placeholder="••••••••"
                                class="mb-2 bg-muted border border-muted_hover text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                                required>
                        </div>

                        <div class="col-span-6 sm:col-span-3">
                            <label for="role" class="block text-sm font-medium text-gray-700 mb-1">Select Role</label>
                            <select id="role" name="role"
                                class="mt-1 block w-full rounded-lg border border-muted_hover bg-muted p-2.5 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}"> {{ $role->display_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="flex items-center p-4 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                        <button type="submit" id="create"
                            class="w-48 text-white bg-primary hover:bg-primary_hover focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-primary dark:focus:ring-blue-800">
                            Yeah, Create it</button>
                        <button data-modal-hide onclick="toggleModal('modal-add')" type="button"
                            class="w-48 text-gray-500 bg-white hover:bg-muted_hover focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                            No, Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-add-backdrop"></div>
@endsection