@extends('layouts.adminLayout.dashboardLayout')
@section('styles')
    <style>
        /* Increase checkbox size */
        .form-check-input {
            transform: scale(1.5);
            /* Make checkboxes larger */
            appearance: auto !important;
            -webkit-appearance: auto !important;
            -moz-appearance: auto !important;
            margin-right: 8px;
        }

        /* Center align Day labels */
        /* Prevent line break in Day 1 */
        .day-label {
            white-space: nowrap;
            /* Ensures text stays on one line */
            font-weight: bold;
            text-align: left;
            display: inline-block;
            /* Avoid full width */
            margin-bottom: 8px;
            font-size: 16px;
        }

        /* Style for horizontal line */
        .day-divider {
            border-top: 2px solid #ccc;
            margin: 15px 0;
        }

        .bg-blue {
            background-color: #004b64;
        }
    </style>
@endsection
@section('content')
    <main role="main" class="flex-shrink-0">
        <div class="container custom-container">
            <div class="login-5 mt-50 mb-50">
                <div class="container-fluid">
                    <div class="row no-gutters">
                        <div class="col-sm-12">
                            <div class="container-fluid">
                                {{ Breadcrumbs::render('UpdateDutyDays') }}
                                <div class="card custom-form">
                                    <div class="card-header d-flex align-items-center justify-content-between py-3 px-3">
                                        <h4 class="mb-0 fw-bold fs-4">{{ $title ?? 'Update Shiftwise Duty Data' }}
                                        </h4>
                                        <!-- <a href="{{ route('importrem.index') }}" class="btn btn-danger text-white fs-5"> <i
                                                            class="fa fa-angle-double-left" aria-hidden="true"> Back</i></a>  -->
                                        <a href="{{ route('importrem.index', [
                                            'perPage' => request('perPage', ''),
                                            'examName' => request('examName', ''),
                                            'NTA_Observer_ID' => request('NTA_Observer_ID', ''),
                                        ]) }}"
                                            class="btn btn-danger text-white fs-5" aria-hidden="true">Back</a>

                                    </div>

                                    <form action="{{ route('dutyDays.updates') }}" method="POST" id="shiftWiseDutyDaysForm"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="card-body">

                                            <input type="hidden" name="Exam_Type" id="Exam_Type"
                                                value="{{ isset($examData->{'Exam Type'}) ? $examData->{'Exam Type'} : old('Exam_Type') }}"
                                                class="form-control form-control-lg" readonly>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="ObserverID"
                                                            class="text-left form-label fw-bold labelName">
                                                            Observer ID <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="ObserverID" id="ObserverID"
                                                            value="{{ isset($examData->{'ObserverID'}) ? $examData->{'ObserverID'} : old('ObserverID') }}"
                                                            class="form-control form-control-lg" readonly>
                                                        <input type="hidden" name="hiddenID"
                                                            value="{{ isset($examData->{'ID'}) ? $examData->{'ID'} : old('hiddenID') }}">
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="ExamName"
                                                            class="text-left form-label fw-bold labelName">
                                                            Exam Name <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="ExamName" id="ExamName"
                                                            value="{{ isset($examData->{'Exam Name'}) ? $examData->{'Exam Name'} : old('ExamName') }}"
                                                            class="form-control form-control-lg" readonly>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="ObserverType"
                                                            class="text-left form-label fw-bold labelName">
                                                            Role <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <select name="ObserverType" id="ObserverType"
                                                            class="form-control form-select">
                                                            <option value="">Select Role</option>
                                                            @if (isset($RoleNameArray) && !empty($RoleNameArray))
                                                                @foreach ($RoleNameArray as $keyRole => $valueRole)
                                                                    <option value="{{ $keyRole }}"
                                                                        {{ isset($examData->{'Observer Type'}) && $examData->{'Observer Type'} == $keyRole ? 'selected' : '' }}>
                                                                        {{ $valueRole }}</option>
                                                                @endforeach
                                                            @endif

                                                        </select>
                                                        @error('ObserverType')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <input type="hidden" value="{{ $examData->NewID }}" name="NewID">

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="CenterNo"
                                                            class="text-left form-label fw-bold labelName">
                                                            Center No <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="CenterNo" id="CenterNo"
                                                            value="{{ isset($examData->CENTNO) ? $examData->CENTNO : old('CenterNo') }}"
                                                            class="form-control form-control-lg">
                                                        @error('CenterNo')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="CenterNo"
                                                            class="text-left form-label fw-bold labelName">
                                                            Name <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="ObserverName" id="ObserverName"
                                                            value="{{ isset($examData->Name) ? $examData->Name : old('CenterNo') }}"
                                                            class="form-control form-control-lg">
                                                        @error('ObserverName')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="CenterNo"
                                                            class="text-left form-label fw-bold labelName">
                                                            Designation <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="Designation" id="Designation"
                                                            value="{{ isset($examData->Designation) ? $examData->Designation : old('Designation') }}"
                                                            class="form-control form-control-lg">
                                                        @error('Designation')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="CenterNo"
                                                            class="text-left form-label fw-bold labelName">
                                                            Mobile <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="Mobile" id="Mobile"
                                                            value="{{ isset($examData->Mobile) ? $examData->Mobile : old('Mobile') }}"
                                                            class="form-control form-control-lg">
                                                        @error('Mobile')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="CenterNo"
                                                            class="text-left form-label fw-bold labelName">
                                                            Email <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="EmailID" id="EmailID"
                                                            value="{{ isset($examData->Email) ? $examData->Email : old('EmailID') }}"
                                                            class="form-control form-control-lg">
                                                        @error('EmailID')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="CenterNo"
                                                            class="text-left form-label fw-bold labelName">
                                                            Address <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="Address" id="Address"
                                                            value="{{ isset($examData->Address) ? $examData->Address : old('Address') }}"
                                                            class="form-control form-control-lg">
                                                        @error('Address')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="CityCode"
                                                            class="text-left form-label fw-bold labelName">
                                                            City Code No <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="CityCode" id="CityCode"
                                                            value="{{ isset($examData->City_code) ? $examData->City_code : old('CityCode') }}"
                                                            class="form-control form-control-lg">
                                                        @error('CityCode')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="TCCode"
                                                            class="text-left form-label fw-bold labelName">
                                                            TC Code <span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="TCCode" id="TCCode"
                                                            value="{{ isset($examData->TC_CODE) ? $examData->TC_CODE : old('TCCode') }}"
                                                            class="form-control form-control-lg">
                                                        @error('TCCode')
                                                            <div class="text-danger mb-4">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>


                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="TCCode"
                                                            class="text-left form-label fw-bold labelName">
                                                            Advance Payment<span class="astric-sign text-danger">*</span>
                                                        </label>
                                                        <input type="text" name="totalAdvanceAmt" id="totalAdvanceAmt"
                                                            class="form-control form-control-lg"
                                                            value="{{ sprintf('%.1f', isset($getAdvDetails->{"Advance Amount"}) ? $getAdvDetails->{"Advance Amount"} : '') }}">
                                                        <input type="hidden" name="hiddenIDAdv"
                                                            value="{{ $getAdvDetails->{"Advance No_"} ?? 0 }}">
                                                    </div>
                                                </div>
                                                {{-- ============================================== Mock Dyas Section Here ==================================== --}}
                                                <div class="form-group">
                                                    <label
                                                        class="form-control form-control-lg text-center text-white bg-blue mt-2">----- Mock
                                                        Duty Days -----</label>
                                                </div>
                                                <!-- Dynamic Day and Shift Checkboxes -->
                                                <div class="row mt-3">
                                                    <div class="col-md-12" style="margin-left:20px;">
                                                        <div class="row justify-content-center">
                                                            @php
                                                                $dateKeysMock = [];
                                                                for ($i = 1; $i <= 12; $i++) {
                                                                    $dateKey = "Date_$i";
                                                                    if (!empty($examData->$dateKey)) {
                                                                        $originalDate = $examData->$dateKey;
                                                                        $modifiedDate = date(
                                                                            'd-m-Y',
                                                                            strtotime(
                                                                                '-1 day',
                                                                                strtotime($originalDate),
                                                                            ),
                                                                        );
                                                                        $dateKeysMock[$dateKey] = $modifiedDate;
                                                                    }
                                                                }

                                                            @endphp
                                                            @if (isset($examData->mockval) && $examData->mockval == 1)
                                                                @foreach ($dateKeysMock as $dateKey => $dateValue)
                                                                    @php
                                                                        $daysKey = str_replace('Date_', 'D', $dateKey); // Convert Date_1 to D1, Date_2 to D2, etc.
                                                                        $daysChecked =
                                                                            isset($examData->$daysKey) &&
                                                                            $examData->$daysKey == 1;
                                                                    @endphp

                                                                    <div class="col-md-2">
                                                                        <div class="form-check">
                                                                            <label class="form-check-label"
                                                                                style="pointer-events: none;font-size: 16px;"
                                                                                style="font-size:16px;"
                                                                                for="{{ $daysKey }}">
                                                                                {{ $dateValue }}
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                                <div class="col-md-2">
                                                                    <div class="form-check">
                                                                        <label class="form-check-label"
                                                                            style="pointer-events: none;font-size: 16px;"
                                                                            style="font-size:16px;"
                                                                            for="{{ date('d-m-Y', strtotime($examData->Mock_Date)) }}">
                                                                            {{ date('d-m-Y', strtotime($examData->Mock_Date)) }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- ============================================== Mock Dyas Section Here ==================================== --}}
                                                {{-- ============================================== Shift Wise Duty Section Here ==================================== --}}
                                                <div class="form-group bg-blue text-white p-1 mt-2 form-control-lg">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <label class="form-control-lg m-0">----- Duty Days -----</label>
                                                        <div class="flex-grow-1 text-center">
                                                            <label class="form-control-lg m-0">----- Shifts -----</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                @if (isset($shiftDateCount) && count($shiftDateCount) > 0)
                                                    <input type="hidden" name="hiddenIDShiftWise"
                                                        value="{{ isset($examDatas->ID) ? $examDatas->ID : '' }}">
                                                    <div class="">
                                                        @php
                                                            // prd($shiftDateCount);
                                                        @endphp
                                                        @for ($day = 1; $day <= count($shiftDateCount); $day++)
                                                            @php
                                                                $dateKey = 'Date_' . $day;
                                                            @endphp
                                                            <div class="col-md-12 my-2">
                                                                <!-- Centered Day Checkbox -->
                                                                <div class="col-md-6">
                                                                    <div class="form-check d-flex gap-2">

                                                                        <label class="form-check-label day-label mb-0"
                                                                            for="D{{ $day }}">
                                                                            {{ \Carbon\Carbon::parse($examDatas->$dateKey)->format('d-m-Y') }}
                                                                        </label>
                                                                        @php
                                                                            //prd($examDatas);
                                                                        @endphp
                                                                        @if (isset($examDatas->DutyDay, $examDatas) && !empty($examDatas->DutyDay))
                                                                            @foreach ($examDatas->DutyDay['D' . $day] as $shiftKey => $shiftValue)
                                                                                @php

                                                                                    $shiftChecked = $examDatas->{'D' .$day .$shiftKey} == 1;

                                                                                @endphp
                                                                                <input type="hidden"
                                                                                    name="ShiftWise[{{ 'D' . $day . $shiftKey }}]"
                                                                                    value="0">

                                                                                <div class="col-md-3" style="margin-left:150px">
                                                                                    <div class="form-check">
                                                                                        <input type="checkbox"
                                                                                            class="form-check-input shift-checkbox mt-5"
                                                                                            id="{{ 'A' . $day . $shiftKey }}"
                                                                                            name="ShiftWise[{{ 'D' . $day . $shiftKey }}]"
                                                                                            value="{{ !empty($examDatas->{'D' . $day . $shiftKey}) ? $examDatas->{'D' . $day . $shiftKey} : 1 }}"
                                                                                            {{ $shiftChecked ? 'checked' : '' }}>
                                                                                        <label
                                                                                            class="form-check-label text-nowrap"
                                                                                            style="font-size:16px;"
                                                                                            for="{{ 'A' . $day . $shiftKey }}">
                                                                                            {{ $shiftValue }}
                                                                                        </label>
                                                                                        @error('ShiftWise[{{ $dayKey . $shiftKey }}]')
                                                                                            <div class="text-danger mb-4">
                                                                                                {{ $message }}</div>
                                                                                        @enderror
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <!-- Horizontal Line After Each Day -->
                                                            <div class="col-md-12">
                                                                <hr class="day-divider my-0">
                                                            </div>
                                                        @endfor
                                                @endif

                                                {{-- ============================================== Shift Wise Duty Section Here ==================================== --}}

                                            </div>

                                            @if (isset($examData->{'ID'}) && !empty($examData->{'ID'}))
                                                <div class="col-md-12 mt-5">
                                                    <div class="form-group text-end">
                                                        <button type="submit" class="btn btn-success">Update</button>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="col-md-12 mt-5">
                                                    <div class="form-group text-end">
                                                        <button type="submit" class="btn btn-success">Submit</button>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            // Update the TotalAttendance value based on checkbox state
            $('.Attendance-checkbox').change(function() {
                var totalAttendance = parseInt($('#TotalAttendance')
                    .val()); // Get the current total attendance value
                if ($(this).prop('checked')) {
                    totalAttendance++;
                } else {
                    totalAttendance--;
                }
                $('#TotalAttendance').val(totalAttendance);

            });

            $('.Attendance-checkbox-days').change(function() {
                var totalDutyDays = parseInt($('#TotalDutyDays')
                    .val()); // Get the current total attendance value
                if ($(this).prop('checked')) {
                    totalDutyDays++;
                } else {
                    totalDutyDays--;
                }
                $('#TotalDutyDays').val(totalDutyDays);

            });

        });

        $(document).ready(function() {
            // Validate the form
            $('#advanceForm').validate({
                rules: {

                    'Observer_Name': {
                        required: true,
                        minlength: 3, // Example: Minimum length of 3 characters
                        maxlength: 50,
                    },
                    // 'Exam_Type': {
                    //     required: true,
                    // },
                    'NTA_Observer_ID': {
                        required: true,
                        minlength: 6, // Example: Minimum length of 3 characters
                        maxlength: 15, // Example: Minimum length of 3 characters
                    },
                    'Advance_Amount': {
                        required: true,
                        number: true, // Ensures that the field only accepts numbers
                        min: 1, // Example: Minimum value should be 1
                    }
                },
                messages: {
                    'Observer_Name': {
                        required: 'Please enter the Observer Name',
                        minlength: 'Observer Name must be at least 3 characters long',
                        maxlength: 'Observer Name must be last 50 characters long',
                    },
                    'Advance_Amount': {
                        required: 'Please enter the Advance Amount',
                        number: 'Please enter a valid number for Advance Amount',
                        min: 'Advance Amount must be at least 1',
                    },
                    // 'Exam_Type': {
                    //     required: 'Please enter the Exam Type',
                    // },
                    'NTA_Observer_ID': {
                        required: 'Please enter the NTA Observer ID',
                        minlength: 'NTA Observer ID must be at least 5 characters long',
                        maxlength: 'NTA Observer ID must be last 9 characters long',
                    }
                },

            });
        });
    </script>
    <script>
        // $(document).ready(function() {
        //     let maxFields = 12; // Maximum sections
        //     let wrapper = $("#daySections"); // Container for dynamic fields
        //     let addBtn = $(".addMoreDays"); // Add button
        //     let count = ''; // Counter for fields

        //     function updateSummary() {
        //         let values = $(".dmax").map(function() {
        //             return $(this).val() ? parseInt($(this).val()) : 0;
        //         }).get();

        //         let maxCount = Math.max(...values);
        //         let totalCount = values.reduce((a, b) => a + b, 0);

        //         $("#maxCount").val(maxCount);
        //         $("#totalMaxCount").val(totalCount);
        //     }

        //     $(document).on("input", ".dmax", function() {
        //         updateSummary();
        //     });

        //     $(document).on("click", ".addMoreDays", function() {
        //         if (count < maxFields) {
        //             count++;
        //             let newSection = `
    //             <div class="row day-section">
    //                 <div class="col-md-3">
    //                     <div class="form-group mb-3">
    //                         <label for="D${count}Max" class="text-left form-label fw-bold labelName">Day ${count} Max Count</label>
    //                         <input type="text" name="D${count}Max" id="D${count}Max" class="form-control form-control-lg dmax" placeholder="Enter Day ${count} Max Count" onkeypress="return blockSpecialChar(event, 'numeric')">
    //                     </div>
    //                 </div>
    //                 <div class="col-md-1 mt-40">
    //                    <span class="text-danger fs-3 cursor-pointer removeSection"><i class="fa fa-trash" aria-hidden="true"></i></span>
    //                 </div>
    //             </div>`;
        //             wrapper.append(newSection);

        //             if (count === maxFields) {
        //                 $(".addMoreDays").hide(); // Hide add button when max reached
        //             }
        //         }
        //     });

        //     $(document).on("click", ".removeSection", function() {
        //         $(this).closest(".day-section").remove();
        //         count--;

        //         if (count < maxFields) {
        //             $(".addMoreDays").show(); // Show add button if below max
        //         }

        //         updateSummary();
        //     });
        // });

        $(document).ready(function() {
            let maxFields = '12'; // Maximum sections (12 fields)
            let wrapper = $("#daySections"); // Container for dynamic fields
            // Initialize the count with the PHP value (number of non-empty fields)
            let count = 1; // Initial count based on PHP data
            // Function to update the summary values (max count, total count)
            function updateSummary() {
                let values = $(".dmax").map(function() {
                    return $(this).val() ? parseInt($(this).val()) : 0;
                }).get();

                let maxCount = Math.max(...values);
                let totalCount = values.reduce((a, b) => a + b, 0);

                $("#maxCount").val(maxCount);
                $("#totalMaxCount").val(totalCount);
            }

            // Function to check how many fields have a non-zero, non-empty value
            function checkAddButtonVisibility() {
                let nonEmptyCount = $(".dmax").filter(function() {
                    return $(this).val() != '' && $(this).val() != '0';
                }).length;

                console.log('Non-empty fields count:', nonEmptyCount);

                if (nonEmptyCount < maxFields) {
                    $(".addMoreDays").show(); // Show add button if there are less than 12 non-empty fields
                } else {
                    $(".addMoreDays").hide(); // Hide add button if all fields are filled
                }
            }

            // On input change in any of the dmax fields, update the summary and check add button visibility
            $(document).on("input", ".dmax", function() {
                updateSummary();
                checkAddButtonVisibility();
            });

            // Handle the Add More button click event
            $(document).on("click", ".addMoreDays", function() {
                if (count < maxFields) {
                    count++; // Increment the counter when adding new fields

                    // Generate the new section HTML
                    let newSection = `
                <div class="row day-section" id="day-section-${count}">
                    <div class="col-md-3">
                        <div class="form-group mb-3">
                            <label for="D${count}Max" class="text-left form-label fw-bold labelName">Day ${count} Max Count</label>
                            <input type="text" name="D${count}Max" id="D${count}Max" class="form-control form-control-lg dmax" placeholder="Enter Day ${count} Max Count" onkeypress="return blockSpecialChar(event, 'numeric')">
                        </div>
                    </div>
                    <div class="col-md-1 mt-40">
                       <span class="text-danger fs-3 cursor-pointer removeSection"><i class="fa fa-trash" aria-hidden="true"></i></span>
                    </div>
                </div>`;

                    // Append the new section to the wrapper
                    wrapper.append(newSection);

                    // Hide the add button when max fields are reached
                    if (count === maxFields) {
                        $(".addMoreDays").hide();
                    }
                } else {
                    alert("You can't add more than duty days");
                }
            });

            // Handle the Remove Section button click event
            $(document).on("click", ".removeSection", function() {
                $(this).closest(".day-section").remove();
                count--; // Decrease the counter when a section is removed

                checkAddButtonVisibility(); // Check visibility of add button after removing a section
                updateSummary(); // Update the summary values
            });

            // Initial visibility check on page load
            checkAddButtonVisibility();
        });
    </script>
@endsection