@extends('essential.main', [
    'breadcum' => 'District',
    'route' => 'district',
])

{{-- @push('download')
    <a href="#" onclick="toggleModal('modal-import')" data-tooltip-target="{{ 'tooltip-default' }}"
        data-tooltip-placement="bottom"
        class="py-2.5  px-2.5 mb-2 text-sm font-medium text-gray-900 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">
        <svg class="w-4 h-4 fill-slate-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
            viewBox="0 0 20 20">
            <path
                d="m14.707 4.793-4-4a1 1 0 0 0-1.416 0l-4 4a1 1 0 1 0 1.416 1.414L9 3.914V12.5a1 1 0 0 0 2 0V3.914l2.293 2.293a1 1 0 0 0 1.414-1.414Z" />
            <path
                d="M18 12h-5v.5a3 3 0 0 1-6 0V12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
        </svg>
        <div id="{{ 'tooltip-default' }}" role="tooltip"
            class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-primary transition-opacity duration-300 bg-white rounded-lg shadow-sm opacity-0 tooltip">
            Upload
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
    </a>
@endpush --}}

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

@push('scripts')
    <script type='text/javascript'>
        $(document).ready(function() {
            $('#refresh').click(function(e) {
                e.preventDefault();

                $search = $('#search').val("");
                getDataTable();
                toastr.success("Data Refreshed...");
            });

        });


        $('#add_district').submit(function(e) {
            e.preventDefault();
            var form_data = new FormData(this);
            $.ajax({
                type: "POST",
                url: "districts",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function(response) {
                    if (response.status == true) {
                        getDataTable();
                        toggleModal('modal-add');
                        $("#add_district")[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();
            $search = $('#search').val();
            $page_count = $('#page_count').val();
            $.ajax({
                type: "GET",
                url: "districts" + "?page=" + page,
                data: {
                    search: $search,
                    page_count: $page_count,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#District').html(response);
                    $('#refresh_btn').show();
                    $('#load').hide();
                }
            });
        }



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

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

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


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

            $.ajax({
                type: "DELETE",
                url: "districts/" + $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);

                    }

                }
            });
        });


        $('#importexcel_district').submit(function(e) {
            e.preventDefault();
            $("#uplopadItem").attr("disabled", true);
            $("#uplopadItemid").hide();
            $("#uploadload").show();
            var form_data = new FormData(this);
            $.ajax({
                type: "POST",
                url: "{{ route('import_district') }}",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "datatype",
                success: function(response) {
                    if (response.status == true) {
                        toastr.success(response.message);
                        toggleModal('modal-import');
                        $("#uplopadItem").attr("disabled", false);
                        $("#uplopadItemid").show();
                        $("#uploadload").hide();
                        $("#importexcel_district")[0].reset();
                        getDataTable();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(e) {
                    var response = $.parseJSON(e.responseText);
                    if (response.status == true) {
                        toastr.success(response.message);
                        toggleModal('modal-import');
                        $("#uplopadItem").attr("disabled", false);
                        $("#uplopadItemid").show();
                        $("#uploadload").hide();
                        $("#importexcel_book")[0].reset();
                        getDataTable();
                    } else {
                        toastr.error(response.message);
                    }
                }
            });
        });
    </script>
@endpush


@section('extras')
    @include('district.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-edit">
        <div id="EditDistrict"></div>
    </div>
    <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-edit-backdrop"></div>

    @include('essential.delete')
    @include('district.import')
@endsection