@extends('essential.main', [
    'dashboard' => '',
    'user' => '--active',
])

@section('content')
    <div class="p-4">
        <div class="flex flex-row">
            <button type="button" class="btn btn-info btn-lg" data-modal-target="userAddModal"
                data-modal-toggle="userAddModal">
                <div class="w-10 h-10 bg-[#EEEEEE] hover:bg-gray-300 rounded-md  p-2 mr-2 ">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                        stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                </div>
            </button>
            <button type="button" class="btn btn-info btn-lg" data-modal-target="" data-modal-toggle="">
                <div class="w-10 h-10 bg-[#EEEEEE] hover:bg-gray-300 rounded-md  p-2 mr-2 ">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                        stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                    </svg>
                </div>
            </button>



        </div>

    </div>
@endsection


@push('scripts')
    <script>
        $('#add_user').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) {
                    // $('#userAddModal').modal( 'hide' );
                    // $('#add_user').each(function() {
                    //     this.reset();
                    // });
                    // getDataTable();
                    toastr.success(response.message);
                }
            });
        });
    </script>
@endpush

<div id="userAddModal" tabindex="-1" aria-hidden="true"
    class="  fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
    <div class="relative w-96 h-full max-w-2xl md:h-auto">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    ADD USER
                </h3>
                <button type="button"
                    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>
            <!-- Modal body -->
            <div class="p-4">
                <form id="add_user" action="">
                    @csrf
                    <p class="text-sm">Name</p>
                    <input type="text" class="w-full rounded-lg mb-2" name="name" id="name">
                    <p class="text-sm">Email</p>
                    <input type="text" class="w-full rounded-lg mb-2" name="email" id="email">
                    <p class="text-sm">Password</p>
                    <input type="text" class="w-full rounded-lg mb-2" name="password" id="password">
                    <div class="w-full mt-2">
                        <button id="create"
                            class="w-full h-12 flex flex-col justify-center items-center  rounded-lg bg-blue-500 text-white "
                            type="submit">
                            Create
                        </button>
                    </div>
                </form>
            </div>

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