@extends('admin.layout.master')
@section('title', 'Inspection Schedule Create')

@section('custom_style')
    <style>

    </style>
@endsection

@section('content')
    @include('inspection.flash-message')
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <div class="d-flex justify-content-between">
                <h4 class="col-6 pl-0">{{ __('obs.inspection') }}   {{ __('obs.schedule') }}   {{ __('obs.create') }} </h4>
                <a href="{{ route('inspection.schedule.index') }}" class="btn btn-sm btn-primary">{{ __('obs.list') }}  </a>
            </div>
        </div>
        <div class="card-body">

            <div class="row">
                <div class="col-md-12">
                    <form id="form" method="post" action="{{ route('inspection.schedule.store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        {{-- <div class="row mb-3 align-items-end">
                            <div class="d-flex gap-2 col-10">
                                <div class="col-3">
                                    <label>Inspector</label>
                                    <select class="form-control" name="admin_id" id="admin_id">
                                        <option value="">Select Inspector</option>
                                        @foreach ($admins as $admin)
                                            <option value="{{ $admin->id }}">{{ $admin->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-2">
                                    <label>Start Date</label>
                                    <input type="text" class="form-control date_picker" id="start_date"
                                        name="start_date">
                                </div>

                                <div class="col-2">
                                    <label>End Date</label>
                                    <input type="text" class="form-control date_picker" id="end_date" name="end_date">
                                </div>
                            </div>

                            <!-- Right side: button -->
                            <div class="col-2 d-flex justify-content-end">
                                <button type="button" class="btn btn-success btn-sm" id="add_schedule_btn"
                                    title="Add Schedule">
                                    <i class="bi bi-plus-circle me-1"></i>
                                </button>
                            </div>
                        </div>
                        <hr> --}}

                        <div id="schedule_container">
                            <!-- Default schedule row -->
                            <div class="row align-items-end mb-2 schedule-row">
                                <div class="col-md-2">
                                    <label>{{ __('obs.date') }}  </label>
                                    <input type="text" class="form-control date_picker" name="schedules[0][date]"
                                        value="">
                                </div>
                                <div class="col-md-2">
                                    <label>{{ __('obs.start') }}  {{ __('obs.time') }}</label>
                                    <input type="text" class="form-control ins_time_picker"
                                        name="schedules[0][start_time]" value="">
                                </div>

                                <div class="col-md-2">
                                    <label>{{ __('obs.visit') }}  {{ __('obs.type') }} </label>
                                    <select class="form-control" name="schedules[0][visit_type_id]">
                                        <option value="">Select</option>
                                        @foreach ($visit_types as $visit_type)
                                            <option value="{{ $visit_type->id }}">{{ $visit_type->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label>{{ __('obs.branch') }}  </label>
                                    <select class="form-control" name="schedules[0][branch_id]">
                                        <option value="">{{ __('obs.select') }}  </option>
                                        @foreach ($branches ?? [] as $branch)
                                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-1 mb-2">
                                    <button type="button" class="btn btn-success btn-sm" id="add_schedule_btn"
                                        title="Add Schedule">
                                        <i class="bi bi-plus-circle me-1"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-6 d-flex justify-content-end">
                                <button type="button" class="btn btn-primary btn-sm px-4" onclick="store_schedule()">
                                    {{ __('obs.save') }}  
                                </button>
                            </div>
                        </div>

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

        </div>
    </div>
@endsection

@section('script')

    <script>
        flatpickr('.ins_time_picker', {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i:s",
            disableMobile: "true"
        });

        $(document).ready(function() {
            let scheduleIndex = 1;

            function parseDateDMY(dateStr) {
                let parts = dateStr.split('-');
                return new Date(parts[2], parts[1] - 1, parts[0]);
            }
            $('#end_date').on('change', function() {
                let startDateStr = $('#start_date').val();
                let endDateStr = $('#end_date').val();
                if (!startDateStr || !endDateStr) {
                    alert('Please select both start and end date');
                    return;
                }
                $('#schedule_container').html('');

                let start = parseDateDMY(startDateStr);
                let end = parseDateDMY(endDateStr);
                if (start > end) {
                    alert('End date must be greater than start date');
                    return;
                }
                while (start <= end) {
                    let dd = String(start.getDate()).padStart(2, '0');
                    let mm = String(start.getMonth() + 1).padStart(2, '0');
                    let yyyy = start.getFullYear();
                    appendScheduleRow(`${dd}-${mm}-${yyyy}`);
                    start.setDate(start.getDate() + 1);
                }
            });




            $('#add_schedule_btn').on('click', function() {
                appendScheduleRow();
            });

            $(document).on('click', '.remove-row', function() {
                $(this).closest('.schedule-row').remove();
            });

            function appendScheduleRow(date = '') {
                let index = scheduleIndex++;
                let row = `
                    <div class="row align-items-end mb-2 schedule-row">
                        <div class="col-md-2">
                            <label>Date</label>
                            <input type="text" class="form-control date_picker" 
                                name="schedules[${index}][date]" 
                                value="${date}" readonly>
                        </div>

                         <div class="col-md-2">
                            <label>Strat Time</label>
                            <input type="text" class="form-control ins_time_picker" name="schedules[${index}][start_time]"
                                value="">
                        </div>

                        <div class="col-md-2">
                            <label>Visit Type</label>
                            <select class="form-control" name="schedules[${index}][visit_type_id]">
                                <option value="">Select</option>
                                @foreach ($visit_types as $visit_type)
                                <option value="{{ $visit_type->id }}">{{ $visit_type->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label>Branch</label>
                            <select class="form-control" name="schedules[${index}][branch_id]">
                                <option value="">Select</option>
                                @foreach ($branches ?? [] as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-1 mb-2">
                            <button type="button" class="btn btn-danger btn-sm remove-row">
                               <i class="bi bi-trash me-1"></i>
                            </button>
                        </div>
                    </div>
                `;
                $('#schedule_container').append(row);

                flatpickr('.date_picker', {
                    dateFormat: 'd-m-Y',
                    disableMobile: true
                });
                flatpickr('.ins_time_picker', {
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: "H:i:s",
                    disableMobile: "true"
                });
            }

        });


       function store_schedule() {

        let isValid = true;
        let errorMsg = '';

        $('.schedule-row').each(function () {

            let $row = $(this);

            let date       = $row.find('input[name$="[date]"]').val().trim();
            let $visitType = $row.find('select[name$="[visit_type_id]"]');
            let $branch    = $row.find('select[name$="[branch_id]"]');

            // reset state
            $visitType.removeClass('is-invalid');
            $branch.removeClass('is-invalid');

            if (date !== '') {

                if (!$visitType.val()) {
                    isValid = false;
                    errorMsg = 'Please select visit type for the selected date.';
                    $visitType.addClass('is-invalid');
                    // return false; // stop loop
                }

                if (!$branch.val()) {
                    isValid = false;
                    errorMsg = 'Please select branch for the selected date.';
                    $branch.addClass('is-invalid');
                    // return false; // stop loop
                }
            }
        });

        if (!isValid) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: errorMsg,
                confirmButtonText: 'OK'
            });
            return;
        }

        // Check at least one date exists
        let hasDate = false;
        $('input[name^="schedules"][name$="[date]"]').each(function () {
            if ($(this).val().trim() !== '') {
                hasDate = true;
                return false;
            }
        });

        if (!hasDate) {
            Swal.fire({
                icon: 'warning',
                title: 'Date Required',
                text: 'Please select at least one schedule date.',
                confirmButtonText: 'OK'
            });
            return;
        }

        document.getElementById('form').submit();
    }
    </script>
@endsection