@extends('essential.main', [
'breadcum' => 'Plan Details',
'route' => 'plan_details',
])

@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

    @section('content')
    <div class=" mt-2">
        @include('essential.buttons')
        <div class="flex flex-col w-full" id="plan"></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_plan').submit(function(e) {
            e.preventDefault();
            var form_data = new FormData(this);
            $.ajax({
                type: "POST",
                url: "plan_detail",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function(response) {
                    if (response.status == true) {
                        getDataTable();
                        toggleModal('modal-add');
                        $("#add_plan")[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: "plan_detail" + "?page=" + page,
                data: {
                    search: $search,
                    start: $start,
                    end: $end,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    // toastr.success("Get User Successfully");
                    $('#plan').html(response);
                    $("#check").attr("disabled", false);
                    $("#sgv").hide();
                    $("#checkid").show();
                    $('#refresh_btn').show();
                    $('#load').hide();
                }
            });
        }



        function editPlan($id) {
            $.ajax({
                type: "GET",
                url: "plan_detail/" + $id + "/edit",
                success: function(response) {
                    $('#EditPlan').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: "plan_detail/" + $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);

                    }

                }
            });
        });
    </script>
    @endpush


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

    @include('essential.delete')
    @endsection