@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    #date_range,
    #month_range {
        height: calc(3.5rem + 2px);
        /* Match Bootstrap form-control height */
        border-radius: 0.375rem;
        /* Match Bootstrap border-radius */
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Calendar popup background */
    .flatpickr-calendar {
        background-color: rgb(188, 78, 114) !important;
        color: white !important;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    /* Day cells - text color */
    .flatpickr-day {
        color: white !important;
        font-weight: 500;
    }

    /* Day hover effect */
    .flatpickr-day:hover {
        /* background: white !important; */
        color: rgb(199, 41, 54) !important;
        border-radius: 6px;
    }

    /* Selected day */
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        /* background: blue !important; */
        color: black !important;
        border-radius: 6px;
    }

    /* Month and year in header */
    .flatpickr-current-month,
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        color: black !important;
    }

    /* Weekdays (Sun, Mon, ...) */
    .flatpickr-weekday {
        color: black !important;
    }

    /* Disable future dates */
    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover {
        background: transparent !important;
        color: #ccc !important;
        cursor: not-allowed !important;
    }

    /* Highlight today */
    .flatpickr-day.today {
        border: 1px solid white;
        font-weight: bold;
    }

    /* Flatpickr month navigation arrows */
    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        fill: black !important;
        /* Your desired arrow color */
        stroke: black !important;
        /* For outlines, if present */
        width: 14px;
        height: 14px;
    }

    /* Optional: Add hover effect */
    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: rgb(255, 215, 0) !important;
        /* Example: gold on hover */
        cursor: pointer;
    }

    .flatpickr-monthSelect-month {
        color: white;
    }

    .flatpickr-monthSelect-month.flatpickr-disabled {
        color: #aaa !important;
        background-color: transparent !important;
        cursor: not-allowed;
    }

    .ui-datepicker {
        position: absolute;
        top: 114px;
        width: 300px !important;
        height: 300px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }
    

    .ui-datepicker-header {
        background: #d9a441;
        color: black;
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-calendar .ui-state-hover {
        background: white;
        color: #963131;
    }



    .ui-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }

    .ui-datepicker .ui-datepicker-buttonpane button {
        background-color: #d9a441 !important;
    }

    .ui-datepicker .ui-datepicker-header {
        border: 1px solid #d9a441 !important;
    }


    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    #upload_name {
        margin-top: -8px;
    }

    .select2-container .select2-selection--multiple {
        min-height: 58px;
    }

    .edit_box_location {
        width: 300px !important;
        height: auto !important;
    }

    .monthYearPickerOnly {
        display: none !important;
    }




    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
        top: 0;
        left: 0;
    }

    #pageloader img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 150px;
        border: double black;
        background-color: antiquewhite;
        border-radius: 20px;
    }


    .dataTables_length,
    .dataTables_filter {
        display: block;
    }

    .filter {
        width: 51px;
    }

    tfoot {
        display: table-header-group !important;
    }

    .info {
        margin-bottom: 0rem !important;
        color: brown;
        font-size: 9px;
        font-weight: bold;
    }

    .toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    #toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }


    ul {
        list-style-type: none;
    }

    #edittoggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .edit_box_location {
        width: 340px !important;
        height: auto !important;
    }

    @media only screen and (min-width: 200px) and (max-width: 767px) {
        .tbl-adjust {
            width: 150%;
        }

        ul.chosen-choices {
            height: 57px !important;
            width: 250px !important;
        }

        ul.chosen-results {
            height: 75px !important;
            width: 250px !important;
            overflow-y: scroll;
        }

        select option {
            font-size: 13px;
        }
    }


    @media (max-width: 992px) {
        select option {
            font-size: 13px;
        }
    }

    .image-design {
        border: 1px solid;
        background: #fff;
        width: 100%;
        height: auto;
        padding: 1%;
    }

    .request_btn {
        padding: 10px;
        border-radius: 8px;
        background: #BA434D;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }



    #parent-form {
        width: 100%;
    }



    .form-card {
        border-radius: 5px;
        /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
        border: 2px solid #eee;
    }

    .formData {

        padding: 10px;
    }

    .custom-input {
        border: none !important;
        border-bottom: 2px solid #ddd !important;
        padding: 6px 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px;


    }

    .custom-input::placeholder {
        color: #212529;
    }

    .custom-input:focus {
        color: #212529;
        background-color: #fff;
        border-color: #eee;
        outline: 0;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        border-radius: 8px;

    }

    .heading-block {

        background: #b19f83;
        padding: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .heading-block h5 {
        color: #fff;

    }

    .button-block {
        padding: 10px;
        border-top: 2px solid #F5F5F5;
    }

    .submit-btn {
        background-color: #BA434D;
        /* padding: 8px 20px; */
        border-radius: 5px;
        color: #fff;
        border: none;
        /* font-size: 15px; */
        /* width: 120px; */
    }


    .Reset-btn {
        background: #212529;
        padding: 8px 20px;
        border-radius: 5px;
        color: #fff;
        border: none;
        /* font-size: 15px; */
        /* width: 120px; */
    }

    input:disabled {
        background: #eee;
    }

    .check-icon {
        height: 50px;
        width: 50px;
        background: green;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    #close-btn {
        font-size: 25px;
    }

    small {
        font-weight: 600 !important;
    }

    @media(max-width: 767px) {
        .btn-grp {
            display: flex;
            justify-content: space-between;
            gap: 5px;
        }
    }
</style>
</head>

<body>
    @include ('layouts.loader')

    <main id="body_main_container" class="body_main_container">
        <div id="body_container">
            <div class="card" id="page_header_container">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h5 class="card-title">Petty Cash Entry </h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card form-container" id="desktop_view">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">


                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="left_staff" data-bs-toggle="tab"
                                data-bs-target="#bordered-left_staff" type="button" role="tab" aria-controls="contact"
                                aria-selected="false">Cash Paid</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="left_staff1" data-bs-toggle="tab"
                                data-bs-target="#bordered-left_staff1" type="button" role="tab" aria-controls="contact"
                                aria-selected="false">Monthly Deduct</button>
                        </li>

                    </ul>

                    <div class="tab-content pt-2" id="borderedTabContent">

                        <div class="tab-pane tab-pane fade show active" id="bordered-left_staff" role="tabpanel" aria-labelledby="left_staff">

                            <div class="col-lg-12" id="tcp_table1">
                                <form class="formData" id="pettyCashForm">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-floating ">
                                                <select class="form-select" id="kitchen_name" name="kitchen_name" required>
                                                    <option value="">Select</option>
                                                    @foreach ($kitchensData as $kitchens)
                                                    <option value="{{ $kitchens->id }}"> {{$kitchens->kitchen_name }}</option>
                                                    @endforeach
                                                </select>

                                                <label for="floatingName">Kitchen Name</label>

                                                <p id="error_kitchen_name" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <select class="form-select" id="emp_name" name="emp_name" aria-label="" autocomplete="off" required>
                                                    <option value="">Select</option>

                                                </select>
                                                <label for="floatingName">Employee Name</label>

                                                <p id="error_emp_name" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="cash_value" name="cash_value"
                                                    placeholder="Cash" autocomplete="off">
                                                <label for="floatingName">Add Cash</label>
                                                <p id="error_cash_values" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="cash_date" name="cash_date" autocomplete="off" placeholder="Your Name" required="" readonly='true'>
                                                <label for="floatingName">Paid Date</span></label>
                                                <p id="error_cash_date" style="color:red"></p>
                                            </div>
                                        </div>
                                        <input type="hidden" class="form-control" name="emp_code" id="emp_code">
                                        <div class="col-md-12">

                                            <div class="form-floating">
                                                <input type="text" class="form-control" name="remarks" id="reasonText"
                                                    placeholder="Please enter text" autocomplete="off">
                                                <label for="revision">Remarks if any</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" text-center mt-2">
                                        <button type="submit" class="btn submit-btn" type="button" id="submit-btn">Submit</button>
                                        <button class="btn reset-btn" type="button" onclick="clearData()">Reset</button>

                                    </div>

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

                        <div class="tab-pane" id="bordered-left_staff1" role="tabpanel" aria-labelledby="left_staff1">
                            <div class="col-lg-12" id="tcp_table1">
                                <form class="formData" id="pettyCashFormDeduct">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-floating ">
                                                <select class="form-select" id="kitchen_name1" name="kitchen_name1" required>
                                                    <option value="">Select</option>
                                                    @foreach ($kitchensData as $kitchens)
                                                    <option value="{{ $kitchens->id }}"> {{$kitchens->kitchen_name }}</option>
                                                    @endforeach
                                                </select>

                                                <label for="floatingName">Kitchen Name</label>

                                                <p id="error_kitchen_name1" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <select class="form-select" id="emp_name1" name="emp_name1" aria-label="" autocomplete="off" required>
                                                    <option value="">Select</option>

                                                </select>
                                                <label for="floatingName">Employee Name</label>

                                                <p id="error_emp_name1" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-2">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="total_balance" name="total_balance"
                                                    placeholder="Cash" autocomplete="off" readonly>
                                                <label for="floatingName">Total Petty Cash</label>
                                                <p id="error_cash_values1" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-2" id="hidden_start_month">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="from_month" name="from_month" autocomplete="off" placeholder="Your Name" required="" readonly='true'>
                                                <label for="floatingName">Select From Month</span></label>
                                                <p id="error_from_month" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-2">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="deduct_value" name="deduct_value"
                                                    placeholder="Cash" autocomplete="off" value="0" required>
                                                <label for="floatingName">Deduct Cash</label>
                                                <p id="error_cash_values2" style="color:red"></p>
                                            </div>
                                        </div>

                                        <input type="hidden" class="form-control" name="emp_code1" id="emp_code1">
                                        <div class="col-md-12">

                                            <div class="form-floating">
                                                <input type="text" class="form-control" name="remarks1" id="remarks1"
                                                    placeholder="Please enter text" autocomplete="off">
                                                <label for="revision">Remarks if any</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" text-center mt-2">
                                        <button type="submit" class="btn submit-btn" type="button" id="submit-btn">Submit</button>
                                        <button class="btn reset-btn" type="button" onclick="clearData1()">Reset</button>

                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 ">
                <div class="card  report-container">
                    <div class="card-body p-1">
                        <h5 class="card-title" style="padding:10px 4px">Petty Cash Entry Details</h5>
                        <!-- Bordered Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home" aria-selected="true">Cash Paid List</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="quarterly_1-tab" data-bs-toggle="tab" data-bs-target="#quarterly_1" type="button" role="tab" aria-controls="quarterly_1" aria-selected="false">Monthly Deduct List</button>
                            </li>
                        </ul>
                        <div class="tab-content pt-2" id="borderedTabContent">
                            <div class="tab-pane fade show active" id="bordered-home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="card p-0" style="background-color: transparent; border:none;">
                                    <div class="card-body p-1" style="overflow-x:auto;">

                                        <h5 class="card-title" style="padding:10px"></h5>

                                        <!-- Table with stripped rows -->
                                        <table id="itemList" class='display dataTable' style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Action</th>
                                                    <th scope="col">Kitchen</th>
                                                    <th scope="col">Emp Name</th>
                                                    <th scope="col">Emp Code</th>
                                                    <th scope="col">Cash Value</th>
                                                    <th scope="col">Paid Date</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="quarterly_1" role="tabpanel" aria-labelledby="quarterly_1-tab">
                                <div class="card p-0" style="background-color: transparent; border:none;">
                                    <div class="card-body p-1" style="overflow-x:auto;">

                                        <h5 class="card-title" style="padding:10px"></h5>

                                        <!-- Table with stripped rows -->
                                        <table id="itemList1" class='display dataTable' style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Kitchen</th>
                                                    <th scope="col">Emp Name</th>
                                                    <th scope="col">Emp Code</th>
                                                    <th scope="col">Deduct Cash</th>
                                                    <th scope="col">Deduct Month/Year</th>
                                                    <th scope="col">Action</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div><!-- End Bordered Tabs -->

                    </div>
                </div>

            </div>

            <div class="modal fade" id="itemModel" tabindex="-1">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Petty Cash Entry Details</h5>
                            <button type="button" class="btn-close " data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab" data-bs-target="#bordered-storehome" type="button" role="tab" aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab" data-bs-target="#bordered-storeedit" type="button" role="tab" aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab" data-bs-target="#bordered-storedelete" type="button" role="tab" aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">

                                <div class="tab-pane fade show active" id="bordered-storehome" role="tabpanel" aria-labelledby="storehome-tab">
                                    <form class="row g-1" method="POST" id="" action="" id="viewItem">
                                        <input type="hidden" id="view_id" name="view_id">
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="view_ktchen_name" name="view_ktchen_name"
                                                    placeholder="Cash" autocomplete="off" readonly>
                                                <label for="floatingName">Kitchen Name</label>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="view_employee_name" name="view_employee_name"
                                                    placeholder="Cash" autocomplete="off" readonly>
                                                <label for="floatingName">Emp Name</label>
                                            </div>
                                        </div>


                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="view_cash_value" name="view_cash_value"
                                                    placeholder="Cash" autocomplete="off">
                                                <label for="floatingName" readonly>Add Cash</label>
                                                <p id="error_cash_values" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-floating ">
                                                <input type="text" class="form-control" id="view_cash_date" name="view_cash_date" autocomplete="off" readonly>
                                                <label for="floatingName">Paid Date</span></label>
                                                <p id="error_cash_date" style="color:red"></p>
                                            </div>
                                        </div>
                                        <input type="hidden" class="form-control" name="view_emp_code" id="view_emp_code">
                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" name="view_remarks" id="view_remarks"
                                                    placeholder="Please enter text" autocomplete="off" readonly>
                                                <label for="revision">Remarks</label>
                                            </div>
                                        </div>


                                        <div class="text-center">
                                            <button type="button" class="btn submit-btn" data-bs-dismiss="modal" aria-label="Close">Close</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit" role="tabpanel" aria-labelledby="storeedit-tab">
                                    <form class="row g-1" action="" id="editPettyCashForm">
                                        <input type="hidden" value="{{csrf_token()}}" name="_token">
                                        <input type="hidden" id="edit_id" name="edit_id">
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="edit_ktchen_name" name="edit_ktchen_name"
                                                    placeholder="Cash" autocomplete="off" readonly>
                                                <label for="floatingName">Kitchen Name</label>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="edit_employee_name" name="edit_employee_name"
                                                    placeholder="Cash" autocomplete="off" readonly>
                                                <label for="floatingName">Emp Name</label>
                                            </div>
                                        </div>


                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="edit_cash_value" name="edit_cash_value"
                                                    placeholder="Cash" autocomplete="off">
                                                <label for="floatingName">Add Cash</label>
                                                <p id="edit_error_cash_value" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="edit_cash_date" name="edit_cash_date" autocomplete="off" readonly>
                                                <label for="floatingName">Paid Date</span></label>
                                                <p id="edit_error_cash_date" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" name="edit_remarks" id="edit_remarks"
                                                    placeholder="Please enter text" autocomplete="off">
                                                <label for="revision">Remarks</label>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-floating mb-1">
                                                <input type="text" class="form-control" id="edit_reason" name="edit_reason" placeholder="Phone" required>
                                                <label for="floatingSelect">Reason</label>
                                                <p id="projectIDSelectError81"></p>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button type="submit" class="btn update-btn">Update</button>
                                            <button type="reset" onclick="reset_data();" class="btn reset-btn">Reset</button>
                                            <input type="hidden" id="edit_reset_id" name="edit_reset_id">
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete" role="tabpanel" aria-labelledby="storedelete-tab">
                                    <form class="row g-1" id="deletePettyCashForm">
                                        <input type="hidden" id="delete_id" name="delete_id">
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="delete_ktchen_name" name="delete_ktchen_name"
                                                    placeholder="Cash" autocomplete="off" readonly>
                                                <label for="floatingName">Kitchen Name</label>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="delete_employee_name" name="delete_employee_name"
                                                    placeholder="Cash" autocomplete="off" readonly>
                                                <label for="floatingName">Emp Name</label>
                                            </div>
                                        </div>


                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    id="delete_cash_value" name="delete_cash_value"
                                                    placeholder="Cash" autocomplete="off">
                                                <label for="floatingName" readonly>Add Cash</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="delete_cash_date" name="delete_cash_date" autocomplete="off" readonly>
                                                <label for="floatingName">Paid Date</span></label>
                                            </div>
                                        </div>
                                        <input type="hidden" class="form-control" name="view_emp_code" id="view_emp_code">
                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" name="delete_remarks" id="delete_remarks"
                                                    placeholder="Please enter text" autocomplete="off" readonly>
                                                <label for="revision">Remarks</label>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="delete_reason" name="delete_reason" placeholder="Phone" required>
                                                <label for="floatingSelect">Reason</label>
                                                <p id="projectIDSelectError91"></p>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button type="button" onclick="delete_item();" class="btn delete-btn">Delete</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </main>
    @include('layouts.footer')

    <!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> -->

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src='js/jquery.validate.js'></script>
    <!-- IMPORTANT: Multi-date plugin -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker/jquery-ui.multidatespicker.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker/jquery-ui.multidatespicker.css">
    <script>
        var data = {};
        data['_token'] = '{{ csrf_token() }}';
        let leaveformData = document.getElementById("pettyCashForm");
        let leaveformData1 = document.getElementById("pettyCashFormDeduct");
        let subBtn = document.getElementById("submit-btn")


        function clearData() {
            leaveformData.reset();

            const form = $('#pettyCashForm');
            form[0].reset();
            form.validate().resetForm();
            form.find('.error-border').removeClass('error-border');
            form.find('.success-border').removeClass('success-border');

        }

        function clearData1() {
            leaveformData1.reset();
            const form = $('#pettyCashFormDeduct');
            form[0].reset();
            form.validate().resetForm();
            form.find('.error-border').removeClass('error-border');
            form.find('.success-border').removeClass('success-border');

        }



        $(document).ready(function(e) {

            $("#pettyCashForm").validate({
                rules: {
                    kitchen_name: "required",
                    emp_name: "required",
                    cash_value: "required",
                    cash_date: "required",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("id") == "kitchen_name") {
                        error.appendTo('#error_kitchen_name');
                    } else if (element.attr("id") == "emp_name") {
                        error.appendTo('#error_emp_name');
                    } else if (element.attr("name") == "cash_value") {
                        error.appendTo('#error_cash_values');
                    } else if (element.attr("name") == "cash_date") {
                        error.appendTo('#error_cash_date');
                    } else {
                        error.insertAfter(element);
                    }
                },
            });


            $("#editPettyCashForm").validate({
                rules: {
                    edit_cash_value: "required",
                    edit_cash_date: "required",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "edit_cash_value") {
                        error.appendTo('#edit_error_cash_value');
                    } else if (element.attr("name") == "edit_cash_date") {
                        error.appendTo('#edit_error_cash_date');
                    } else if (element.attr("name") == "edit_reason") {
                        error.appendTo('#projectIDSelectError81');
                    } else {
                        error.insertAfter(element);
                    }
                },
            });


            $("#deletePettyCashForm").validate({
                rules: {
                    edit_cash_value: "required",
                    edit_cash_date: "required",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "delete_reason") {
                        error.appendTo('#projectIDSelectError91');
                    } else {
                        error.insertAfter(element);
                    }
                },
            });

            $("#pettyCashFormDeduct").validate({
                rules: {
                    kitchen_name1: "required",
                    emp_name1: "required",
                    total_balance: "required",
                    cash_date: "required",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("id") == "kitchen_name1") {
                        error.appendTo('#error_kitchen_name1');
                    } else if (element.attr("id") == "emp_name") {
                        error.appendTo('#error_emp_name1');
                    } else if (element.attr("name") == "total_balance") {
                        error.appendTo('#error_cash_values1');
                    } else if (element.attr("name") == "cash_date") {
                        error.appendTo('#error_cash_date');
                    } else {
                        error.insertAfter(element);
                    }
                },
            });




            $(function() {
                $("#cash_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        // jQuery("#from_date").datepicker("option", "maxDate", selectedDate);
                    }
                });
            });

            $(function() {
                $("#edit_cash_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        // jQuery("#from_date").datepicker("option", "maxDate", selectedDate);
                    }
                });
            });

            $("#emp_name").change(function() {
                $("#emp_code").val($(this).find(":selected").text());
            });

            $("#emp_name1").change(function() {
                $("#emp_code1").val($(this).find(":selected").text());
            });


            $("#cash_value").on("input", function() {
                this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);
            });

            $("#deduct_value").on("input", function() {
                this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);
            });

            get_petty_cash_list();
            get_petty_cash_monthly_list();
            setupMonthYearPicker("#from_month");
            var currentDate = new Date();
            $("#from_month").datepicker("setDate", new Date(currentDate.getFullYear(), currentDate.getMonth(), 1));

        })

        function setupMonthYearPicker(selector) {

            $(selector).datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',

                beforeShow: function(input, inst) {
                    setTimeout(function() {
                        customizeMonthPicker();
                    }, 0);
                },

                onChangeMonthYear: function(year, month, inst) {
                    setTimeout(function() {
                        customizeMonthPicker();
                    }, 0);
                },

                onClose: function(dateText, inst) {

                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

                    $(this).datepicker('setDate', new Date(year, month, 1));

                    $("#ui-datepicker-div").removeClass("monthYearOnly");
                }
            });
        }

        function customizeMonthPicker() {

            var dp = $("#ui-datepicker-div");

            dp.addClass("monthYearOnly");

            // Hide calendar table every time it redraws
            dp.find(".ui-datepicker-calendar").hide();
dp.find(".ui-datepicker-prev, .ui-datepicker-next").hide();
            // Reduce popup height & spacing
            dp.css({
                "width": "220px",
                "padding": "10px"
            });

            dp.find(".ui-datepicker-buttonpane").css({
                "margin": "0",
                "padding": "5px 0 0 0"
            });
        }



        $('#kitchen_name,#staff_type').change(function() {
            let kitchenId = $('#kitchen_name').val();
            if (kitchenId.length <= 0) {
                return;
            }
            var staff_type = '';
            $("#pageloader").fadeIn();
            $.ajax({
                url: 'get_emp_list_by_kitchen_id_and_staff_type',
                method: 'get',
                data: {
                    id: kitchenId,
                    staff_type: staff_type
                },
                success: function(res) {
                    if (res) {
                        let empData = JSON.parse(res);
                        $("#pageloader").fadeOut();
                        $('#emp_name').html('');

                        if (empData.length === 0) {
                            $('#emp_name').html('');
                        } else {
                            // $('#emp_name').prop('disabled', false);
                            $('#emp_name').append(`<option value="">Select</option>`);
                            empData.forEach(function(data) {
                                $('#emp_name').append(`<option value="${data.client_user_id}">${data.full_name} (${data.emp_code})</option>`);
                            });
                        }
                    } else {
                        $('#emp_name').html('');

                    }

                },
                error: function(res) {
                    console.log(res);
                }
            });
        });

        $('#kitchen_name1').change(function() {
            let kitchenId = $('#kitchen_name1').val();
            if (kitchenId.length <= 0) {
                return;
            }
            var staff_type = '';
            $("#pageloader").fadeIn();
            $.ajax({
                url: 'get_emp_list_by_kitchen_id_and_staff_type',
                method: 'get',
                data: {
                    id: kitchenId,
                    staff_type: staff_type
                },
                success: function(res) {
                    if (res) {
                        let empData = JSON.parse(res);
                        $("#pageloader").fadeOut();
                        $('#emp_name1').html('');

                        if (empData.length === 0) {
                            $('#emp_name1').html('');
                        } else {
                            // $('#emp_name').prop('disabled', false);
                            $('#emp_name1').append(`<option value="">Select</option>`);
                            empData.forEach(function(data) {
                                $('#emp_name1').append(`<option value="${data.client_user_id}">${data.full_name} (${data.emp_code})</option>`);
                            });
                        }
                    } else {
                        $('#emp_name1').html('');

                    }

                },
                error: function(res) {
                    console.log(res);
                }
            });
        });

        $('#emp_name1').change(function() {
            let kitchenId = $('#kitchen_name1').val();
            let empId = $('#emp_name1').val();
            if (kitchenId.length <= 0) {
                return;
            }
            var staff_type = '';
            $("#pageloader").fadeIn();
            $.ajax({
                url: 'get_total_petty_cash',
                method: 'get',
                data: {
                    kitchen_id: kitchenId,
                    emp_id: empId
                },
                success: function(res) {
                    if (res) {
                        let empData = JSON.parse(res);
                        $("#pageloader").fadeOut();
                        $('#total_balance').val(empData);
                    } else {
                        $('#total_balance').val(0);

                    }

                },
                error: function(res) {
                    console.log(res);
                }
            });
        });







        //add attendance.....................................................................................

        $('#pettyCashForm').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            if ($('#pettyCashForm').valid()) {
                $('#pageloader').show();

                $.ajax({
                    url: 'add_petty_cash',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(returndata) {
                        $('#pageloader').hide();
                        if (returndata.status == 0) {
                            alert('Sorry! Error in Data Submitting');

                        } else {
                            alert('Success! Data Submitted Successfully');
                            $(".btn-close").click();
                            $("#pettyCashForm")[0].reset();
                            $('#emp_name').html('');
                            get_petty_cash_list();
                        }
                    },
                    error: function() {
                        $('#pageloader').hide();
                    }
                });

            }
        })

        function get_petty_cash_list() {
            $('#itemList').DataTable().destroy();
            var table = $('#itemList').DataTable({
                "autoWidth": true,
                "ordering": false,
                "searching": true,
                "order": [0, 'desc'],

                "ajax": {
                    url: "get_petty_cash_list", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        data: 'id',
                        render: function(data, full, type) {
                            return '<input type="hidden" id="table_id"  value="' + data +
                                '"></input> <button data-bs-toggle="modal" data-bs-target="#itemModel" type="button" class="btn btn-danger" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;"  onclick="viewmodel(' +
                                data + ')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        },
                        "title": "Action"
                    },
                    {
                        "data": "location_name",
                        "title": "Kitchen"
                    },
                    {
                        "data": "emp_name",
                        "title": "Emp Name"
                    },
                    {
                        "data": "emp_code",
                        "title": "Emp Code"
                    },
                    {
                        "data": "cash",
                        "title": "Cash Value"
                    },

                    {
                        "data": "paid_date",
                        "title": "Paid Date"
                    },

                ],
                columnDefs: [

                    {
                        "width": "10%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    }, // data alignments  
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },

                    {
                        "width": "15%",
                        "targets": [2],
                        "className": "dt-center",

                        "searching": true,
                    },
                    {
                        "width": "15%",
                        "targets": [3],
                        "className": "dt-center"
                    },

                ],



                initComplete: function() {
                    var api = this.api();

                    $('.filterhead', api.table().header()).each(function(i) {
                        var column = api.column(i);
                        var select = $('<input type="text" class="filter" />').appendTo($(
                                this).empty())
                            .on('keyup change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        if (title == '#' || title == '') {
                            $(".filter").attr('type', 'hidden');
                        }
                    });
                }
            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();
        }

        function viewmodel(mid) {
            $("#edit_reset_id").val(mid);
            data['id'] = mid;
            $.ajax({
                type: 'post',
                url: 'get_petty_cash_list_by_id',
                data: data,
                success: function(json) {
                    var obj = jQuery.parseJSON(json)

                    $('#view_ktchen_name').val(obj[0]['location_name'])
                    $('#view_employee_name').val(obj[0]['emp_name'])
                    $('#view_cash_value').val(obj[0]['cash'])
                    $('#view_cash_date').val(obj[0]['paid_date'])
                    $('#view_remarks').val(obj[0]['remarks'])

                    $("#edit_id").val(obj[0]['id']);
                    $('#edit_ktchen_name').val(obj[0]['location_name'])
                    $('#edit_employee_name').val(obj[0]['emp_name'])
                    $('#edit_cash_value').val(obj[0]['cash'])
                    $('#edit_cash_date').val(obj[0]['paid_date'])
                    $('#edit_remarks').val(obj[0]['remarks'])

                    $("#delete_id").val(obj[0]['id']);
                    $('#delete_ktchen_name').val(obj[0]['location_name'])
                    $('#delete_employee_name').val(obj[0]['emp_name'])
                    $('#delete_cash_value').val(obj[0]['cash'])
                    $('#delete_cash_date').val(obj[0]['paid_date'])
                    $('#delete_remarks').val(obj[0]['remarks'])

                }

            })
        }

        $('#editPettyCashForm').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            if ($('#editPettyCashForm').valid()) {
                $.ajax({
                    url: 'update_petty_cash',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(returndata) {
                        // console.log(returndata);
                        if (returndata == 0) {
                            alert("Error! While updating the Data")
                        } else {
                            alert("Data Updated Successfully")
                            $(".btn-close").click();
                            get_petty_cash_list();
                        }
                    },
                    error: function() {}
                });

            }
        })

        function delete_item() {
            if ($('#deletePettyCashForm').valid()) {
                var data = {};
                data['_token'] = '{{ csrf_token() }}';
                data['delete_id'] = $("#delete_id").val();
                data['delete_reason'] = $("#delete_reason").val();
                $.ajax({
                    url: 'delete_petty_cash',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        // console.log(returndata);
                        if (returndata == 0) {
                            alert("Error While Deleting the Data")
                        } else {
                            alert("Data Delete Successfully")
                            $(".btn-close").click();
                            get_petty_cash_list();
                        }
                    },
                    error: function() {}
                });

            }
        }

        function reset_data() {
            var mid = $("#edit_reset_id").val();
            $("#edit_reason").val('');
            viewmodel(mid);
        }

        $('#pettyCashFormDeduct').submit(function(e) {
            e.preventDefault();

            var totalCash = parseFloat($('#total_balance').val()) || 0;
            var deductCash = parseFloat($('#deduct_value').val()) || 0;

            if (deductCash >= totalCash) {
                alert('Deduct Cash cannot be greater than total petty cash!');
                return false;
            }
            var formData = new FormData(this);
            if ($('#pettyCashFormDeduct').valid()) {

                $('#pageloader').show();

                $.ajax({
                    url: 'add_petty_cash_monthly_deduct',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(returndata) {
                        $('#pageloader').hide();

                        if (returndata.status == 0) {
                            alert('Sorry! Error in Data Submitting');
                        } else {
                            alert('Success! Data Submitted Successfully');
                            $(".btn-close").click();
                            $("#pettyCashFormDeduct")[0].reset();
                            $('#emp_name1').html('');
                            get_petty_cash_monthly_list();
                        }
                    },
                    error: function() {
                        $('#pageloader').hide();
                    }
                });
            }
        });

        function get_petty_cash_monthly_list() {
            $('#itemList1').DataTable().destroy();
            var table = $('#itemList1').DataTable({
                "autoWidth": true,
                "ordering": false,
                "searching": true,
                "order": [0, 'desc'],

                "ajax": {
                    url: "get_petty_cash_monthly_list", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "location_name",
                        "title": "Kitchen"
                    },
                    {
                        "data": "emp_name",
                        "title": "Emp Name"
                    },
                    {
                        "data": "emp_code",
                        "title": "Emp Code"
                    },
                    {
                        "data": "deduct_cash",
                        "title": "Deduct Cash"
                    },

                    {
                        "data": "deduct_month_year",
                        "title": "Deduct Month/Year"
                    },
                    {
                        data: 'id',
                        render: function(data, full, type) {
                            return `
                            <input type="hidden" id="table_id" value="${data}">
                            <!-- Delete Button -->
                            <button type="button"
                                    class="btn btn-danger btn-sm"
                                    onclick="confirmDelete(${data})">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        `;
                        },
                        title: "Action"
                    }
                ],
                columnDefs: [

                    {
                        "width": "10%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    }, // data alignments  
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },

                    {
                        "width": "15%",
                        "targets": [2],
                        "className": "dt-center",

                        "searching": true,
                    },
                    {
                        "width": "15%",
                        "targets": [3],
                        "className": "dt-center"
                    },

                ],



                initComplete: function() {
                    var api = this.api();

                    $('.filterhead', api.table().header()).each(function(i) {
                        var column = api.column(i);
                        var select = $('<input type="text" class="filter" />').appendTo($(
                                this).empty())
                            .on('keyup change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        if (title == '#' || title == '') {
                            $(".filter").attr('type', 'hidden');
                        }
                    });
                }
            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();
        }

        function confirmDelete(id) {
            Swal.fire({
                title: 'Delete Record',
                text: 'Please enter reason for deletion',
                icon: 'warning',
                input: 'textarea',
                inputPlaceholder: 'Enter deletion reason...',
                inputAttributes: {
                    'aria-label': 'Type your reason here'
                },
                showCancelButton: true,
                confirmButtonText: 'Delete',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Reason is required!';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    delete_monthly_item(id, result.value);
                }
            });
        }

        function delete_monthly_item(id, reason) {
            var data = {};
            data['_token'] = '{{ csrf_token() }}';
            data['delete_id'] = id;
            data['delete_reason'] = reason;
            $.ajax({
                url: 'delete_petty_cash_monthly',
                type: "POST",
                data: data,
                success: function(returndata) {
                    // console.log(returndata);
                    if (returndata == 0) {
                        alert("Error While Deleting the Data")
                    } else {
                        alert("Data Delete Successfully")
                        $(".btn-close").click();
                        get_petty_cash_monthly_list();
                    }
                },
                error: function() {}
            });
        }
    </script>
</body>

</html>