@extends('essential.main', [
    'breadcum' => 'Purchase Book',
    'route' => 'purchase_book',
])

@push('add')
    <a href="{{ url('purchase_page') }}" data-tooltip-target="{{ 'tooltip-add' }}" data-tooltip-placement="bottom"
        onclick=""
        class="py-2.5 mr-2 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" stroke-width="1" class="w-4 h-4 fill-slate-600">
            <path
                d="M240 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H176V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H240V80z" />
        </svg>
        <div id="{{ 'tooltip-add' }}" 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">
            Add
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
    </a>
@endpush
@push('datepicker')
    <div class="flex items-center pr-2">
        <div class="relative pb-2">
            <input name="start" type="date" 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  p-2"
                placeholder="Select start date ">
        </div>
        <span class="mx-2 text-gray-500">to</span>
        <div class="relative pb-2">
        
            <input name="end" type="date" 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  p-2"
                placeholder="Select end date ">
        </div>
    </div>
@endpush

@push('filters')


    <div class="w-auto mr-2">
        <select id="CustomeData" name="customer"
            class="appearance-none bg-white border border-gray-300 text-fillcolor text-sm placeholder-placeholdercolor rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
            <option value="" disabled selected> All Customers</option>
            @foreach ($customers as $data)
                <option value="{{ $data->id }}"> {{ $data->customer_name }}</option>
            @endforeach
        </select>
    </div>

    <div class="w-56 mr-2">
        <select id="StateId" name="state_id"
            class=" h-full appearance-none bg-white border border-gray-300 text-fillcolor text-sm placeholder-placeholdercolor rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ">
            <option value=""  disabled selected> All States</option>
            @foreach ($states as $data)
                <option value="{{ $data->state_no }}"> {{ $data->state_name }}</option>
            @endforeach
        </select>
    </div>
    <div class="w-56 mr-2">
        <select id="DistrictId" name="district_id"
            class="appearance-none bg-white border border-gray-300 text-fillcolor text-sm placeholder-placeholdercolor rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
            <option value="" disabled selected> Select District</option>
        </select>

    </div>

    <div class="w-auto pr-2">
        <x-select-filter label="All Payment Types" :options="[
            '1' => 'Cash',
            '2' => 'Gpay',
            '3' => 'Cheque',
        ]" id="paymentType" class="h-10 w-auto"
            name="payment_type" />
        </select>
    </div>
    <div class="w-auto pr-2">
        <x-select-filter label="All Status" :options="[
            '0' => 'Paid',
            '1' => 'Unpaid',
        ]" id="Status" class="h-10 w-auto" name="status" />
        </select>
    </div>
@endpush


    @push('download')
        <div>
            <button type="button" onclick="viewAddress" id="actionprintButton" hidden
                class="py-2.5 px-2.5 mr-2 mb-2 text-sm font-medium  focus:outline-none bg-primary rounded-lg border border-gray-200 hover:bg-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 512 512"
                    fill="currentColor">
                    <path
                        d="M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
                </svg>
            </button>
        </div>
        <button type="button" id="dropdownDownloadLink" data-tooltip-target="{{ 'tooltip-download' }}"
            data-tooltip-placement="bottom" data-dropdown-toggle="dropdownDownload"
            class="py-2.5 px-2.5 mr-2 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" stroke-width="2" class="w-4 h-4 fill-slate-600">
                <path
                    d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
            </svg>
            <div id="{{ 'tooltip-download' }}" 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">
                Download
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>

        </button>
        <div id="dropdownDownload"
            class="z-10 hidden font-normal bg-white divide-y divide-muted_hover rounded-lg shadow w-52">
            <div id="downloadexcel" data-tooltip-target="{{ 'tooltip-download' }}" data-tooltip-placement="bottom">
                <div class="flex items-center px-5 py-2  rounded-sm hover:bg-gray-100  cursor-pointer">
                    <svg class="w-6 h-6 fill-slate-600" stroke-width="1" viewBox="0 0 448 512"
                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path
                            d="M48 448V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm90.9 233.3c-8.1-10.5-23.2-12.3-33.7-4.2s-12.3 23.2-4.2 33.7L161.6 320l-44.5 57.3c-8.1 10.5-6.3 25.5 4.2 33.7s25.5 6.3 33.7-4.2L192 359.1l37.1 47.6c8.1 10.5 23.2 12.3 33.7 4.2s12.3-23.2 4.2-33.7L222.4 320l44.5-57.3c8.1-10.5 6.3-25.5-4.2-33.7s-25.5-6.3-33.7 4.2L192 280.9l-37.1-47.6z">
                        </path>
                    </svg>
                    <label for="checkbox-item-4"
                        class="w-full ml-4 text-sm font-medium text-gray-900 rounded cursor-pointer">as
                        Excel
                    </label>
                </div>
            </div>
            <div class="divide-y divide-muted_hover hover:divide-y-8"></div>
            <a href="{{ route('purchase_book_template') }}"
                class="flex items-center px-5 py-2  rounded-sm hover:bg-gray-100  cursor-pointer">

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="1"
                    class="w-4 h-4 fill-slate-600">
                    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
                </svg>
                <label for="checkbox-item-4"
                    class="w-full ml-4 text-sm font-medium text-gray-900 rounded cursor-pointer">as
                    Template
                </label>
            </a>

        </div>
        <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="purchaseBook"></div>
        </div>
    @endsection

    @push('scripts')
        <script type='text/javascript'>
            $(document).ready(function() {
                $('#StateId').select2({
                    allowClear: true,
                });
                $('#DistrictId').select2({
                    allowClear: true,
                });
            });
            $('#StateId').change(function(e) {
                e.preventDefault();
                $.ajax({
                    type: "GET",
                    url: "district_filter",
                    data: {
                        _token: "{{ csrf_token() }}",
                        state_id: $(this).val()
                    },
                    success: function(response) {
                        $('#DistrictId').empty();
                        $('#DistrictId').append(
                            $("<option disabled selected ></option>")
                            .attr("value", '')
                            .text('Select District')
                        );
                        $.each(response.data.district, function(index, value) {
                            console.log(response);
                            $('#DistrictId').append(
                                $("<option></option>")
                                .attr("value", index)
                                .text(value)
                            );
                        });


                    }
                });

            });
            $(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('');
                    $('#paymentType').val('');
                    $('#Status').val('');
                    $('#CustomeData').val('');
                    $('#DistrictId').val('');
                    $('#StateId').val('');
                    $search = $('#search').val("");
                    getDataTable();
                    toastr.success("Data Refreshed...");
                });

            });





            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();
                $payment_type = $('#paymentType').val();
                $status = $('#Status').val();
                $cus = $('#CustomeData').val();
                $district = $('#DistrictId').val();
                $state = $('#StateId').val();
                $page_count = $('#page_count').val();
                $.ajax({
                    type: "GET",
                    url: "purchase_books" + "?page=" + page,
                    data: {
                        search: $search,
                        start: $start,
                        end: $end,
                        status: $status,
                        payment_type: $payment_type,
                        customer_id: $cus,
                        district_id: $district,
                        state_id: $state,
                        page_count: $page_count,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        $('#purchaseBook').html(response);
                        $("#check").attr("disabled", false);
                        $("#sgv").hide();
                        $("#checkid").show();
                        $('#refresh_btn').show();
                        $('#load').hide();
                    }
                });
            }


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

            $('#CustomeData').change(function(e) {
                e.preventDefault();
                getDataTable();
            });
            $('#DistrictId').change(function(e) {
                e.preventDefault();
                getDataTable();
            });
            $('#paymentType').change(function(e) {
                e.preventDefault();
                getDataTable();
            });
        
            $('#Status').change(function(e) {
                e.preventDefault();
                getDataTable();
            });
            $('#start').change(function(e) {
                e.preventDefault();
                getDataTable();
            });
            $('#end').change(function(e) {
                e.preventDefault();
                getDataTable();
            });
            $('#downloadexcel').click(function(e) {
                e.preventDefault();
                $start = $('#start').val();
                $end = $('#end').val();
                $payment_type = $('#paymentType').val();
                $status = $('#Status').val();
                $district = $('#DistrictId').val();
                $customer = $('#CustomeData').val();
                return window.location.href = "purchase_book_excel?start=" + $start + '&end=' + $end +
                    '&payment_type=' + $payment_type + '&status=' + $status + '&district_id=' + $district +
                    '&customer=' + $customer
            });


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

                $.ajax({
                    type: "DELETE",
                    url: "purchase_books/" + $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_book').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_purchase_book') }}",
                    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_book")[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);
                            $("#uplopadItem").attr("disabled", false);
                            $("#uplopadItemid").show();
                            $("#uploadload").hide();
                        }
                    }
                });
            });

            var data = new Array();

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

            function justFun() {
                if ($.isEmptyObject(data)) {
                    $('#actionprintButton').hide();
                    $('#selectAll').prop('checked', false); //bulk select
                } else {
                    $('#actionprintButton').show();
                }
            }


            $('#actionprintButton').click(function(e) {
                viewAddress();
            });

            function viewAddress() {
                $.ajax({
                    type: "GET",
                    url: "view_address/",
                    data: {
                        ids: data,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        $('#view-address').html(response);
                        toggleModal('modal-print');
                    }
                });
            }

            function printMe() {
                var printContents = document.getElementById('printme').innerHTML;
                var originalContents = document.body.innerHTML;
                document.body.innerHTML = printContents;
                window.print();
                document.body.innerHTML = originalContents;
            }
        </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-print">
            <div id="view-address"></div>
        </div>
        <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-print-backdrop"></div>



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