@extends('dashboard.admin.layouts.master')

@php
    $dayNames = [
        0 => trans('clinic.doctors.days.sunday'),
        1 => trans('clinic.doctors.days.monday'),
        2 => trans('clinic.doctors.days.tuesday'),
        3 => trans('clinic.doctors.days.wednesday'),
        4 => trans('clinic.doctors.days.thursday'),
        5 => trans('clinic.doctors.days.friday'),
        6 => trans('clinic.doctors.days.saturday'),
    ];
    $oldDays = old('days');
@endphp

@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        {{ trans('clinic.doctors.schedule_title') }} — {{ $doctor->name }}
                    </h1>
                </div>
                <a href="{{ route('admin.dashboard.clinic.doctors.edit', $doctor) }}" class="btn btn-sm fw-bold btn-secondary">{{ trans('clinic.common.back') }}</a>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                @if(session('success'))
                    <div class="alert alert-success mb-4">{{ session('success') }}</div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger mb-4">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if($clinics->count() > 1)
                    <div class="card card-flush py-4 mb-4">
                        <div class="card-body d-flex align-items-center gap-4">
                            <label for="clinic_selector" class="form-label mb-0">{{ trans('clinic.schedules.select_clinic') }}</label>
                            <select id="clinic_selector" class="form-select w-auto">
                                @foreach($clinics as $clinic)
                                    <option value="{{ $clinic->id }}" @selected($clinic->id === $doctorBranch->clinic_profile_id)>
                                        {{ $clinic->branch->name }} — {{ $clinic->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                @endif

                <form action="{{ route('admin.dashboard.clinic.doctors.schedule.update', $doctor) }}" method="POST" id="scheduleForm">
                    @csrf @method('PUT')
                    <div class="card card-flush py-4">
                        <div class="card-body">
                            <div class="text-muted fs-7 mb-5">{{ trans('clinic.doctors.periods_hint') }}</div>

                            @foreach($days as $dayOfWeek => $periods)
                                @php
                                    $oldPeriods = $oldDays[$dayOfWeek]['periods'] ?? null;
                                    $dayActive = $oldDays !== null
                                        ? ! empty($oldDays[$dayOfWeek]['is_active'])
                                        : $periods->isNotEmpty();
                                    $rows = $oldPeriods !== null
                                        ? collect($oldPeriods)->values()
                                        : $periods->map(fn ($period) => [
                                            'id' => $period->id,
                                            'label' => $period->label,
                                            'start_time' => substr($period->start_time, 0, 5),
                                            'end_time' => substr($period->end_time, 0, 5),
                                        ])->values();
                                    // Always render one blank row so the first period needs no extra click.
                                    $rows = $rows->isEmpty() ? collect([[]]) : $rows;
                                @endphp

                                <div class="border border-dashed rounded p-4 mb-4 js-day" data-day="{{ $dayOfWeek }}" data-next-index="{{ $rows->count() }}">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="form-check form-check-custom form-check-solid me-3">
                                            <input type="hidden" name="days[{{ $dayOfWeek }}][is_active]" value="0">
                                            <input class="form-check-input js-day-toggle" type="checkbox" value="1"
                                                   id="day_active_{{ $dayOfWeek }}"
                                                   name="days[{{ $dayOfWeek }}][is_active]"
                                                   {{ $dayActive ? 'checked' : '' }}>
                                        </div>
                                        <label class="fw-bold fs-6 mb-0" for="day_active_{{ $dayOfWeek }}">{{ $dayNames[$dayOfWeek] }}</label>
                                    </div>

                                    <div class="js-periods {{ $dayActive ? '' : 'opacity-50' }}">
                                        @foreach($rows as $index => $row)
                                            <div class="row g-3 align-items-end mb-3 js-period-row">
                                                <input type="hidden" name="days[{{ $dayOfWeek }}][periods][{{ $index }}][id]" value="{{ $row['id'] ?? '' }}">
                                                <div class="col-md-3">
                                                    <label class="form-label fs-8 text-muted">{{ trans('clinic.doctors.start_time') }}</label>
                                                    <input type="time" name="days[{{ $dayOfWeek }}][periods][{{ $index }}][start_time]"
                                                           class="form-control @error("days.$dayOfWeek.periods.$index.start_time") is-invalid @enderror"
                                                           value="{{ $row['start_time'] ?? '' }}">
                                                    @error("days.$dayOfWeek.periods.$index.start_time")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label fs-8 text-muted">{{ trans('clinic.doctors.end_time') }}</label>
                                                    <input type="time" name="days[{{ $dayOfWeek }}][periods][{{ $index }}][end_time]"
                                                           class="form-control @error("days.$dayOfWeek.periods.$index.end_time") is-invalid @enderror"
                                                           value="{{ $row['end_time'] ?? '' }}">
                                                    @error("days.$dayOfWeek.periods.$index.end_time")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label fs-8 text-muted">{{ trans('clinic.doctors.period_label') }}</label>
                                                    <input type="text" maxlength="60" name="days[{{ $dayOfWeek }}][periods][{{ $index }}][label]"
                                                           class="form-control" value="{{ $row['label'] ?? '' }}"
                                                           placeholder="{{ trans('clinic.doctors.period_label_placeholder') }}">
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" class="btn btn-light-danger w-100 js-remove-period">{{ trans('clinic.doctors.remove_period') }}</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <button type="button" class="btn btn-sm btn-light-primary js-add-period">{{ trans('clinic.doctors.add_period') }}</button>
                                </div>
                            @endforeach
                        </div>
                        <div class="card-footer d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">{{ trans('clinic.common.save') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\Admin\Clinic\UpdateDoctorScheduleRequest', '#scheduleForm') !!}
    <script>
        document.getElementById('clinic_selector')?.addEventListener('change', function () {
            var url = new URL(window.location.href);
            url.searchParams.set('clinic', this.value);
            window.location.href = url.toString();
        });

        document.querySelectorAll('.js-day').forEach(function (dayBlock) {
            var day = dayBlock.dataset.day;
            var periods = dayBlock.querySelector('.js-periods');
            var toggle = dayBlock.querySelector('.js-day-toggle');

            toggle.addEventListener('change', function () {
                periods.classList.toggle('opacity-50', !toggle.checked);
            });

            dayBlock.querySelector('.js-add-period').addEventListener('click', function () {
                var index = parseInt(dayBlock.dataset.nextIndex, 10);
                dayBlock.dataset.nextIndex = index + 1;

                var template = periods.querySelector('.js-period-row');
                var row = template.cloneNode(true);

                row.querySelectorAll('input').forEach(function (input) {
                    input.name = input.name.replace(/\[periods]\[\d+]/, '[periods][' + index + ']');
                    input.value = '';
                    input.classList.remove('is-invalid');
                });
                row.querySelectorAll('.invalid-feedback').forEach(function (el) { el.remove(); });

                periods.appendChild(row);

                // The toggle turns on implicitly — adding a period means the doctor works that day.
                if (!toggle.checked) {
                    toggle.checked = true;
                    periods.classList.remove('opacity-50');
                }
            });

            periods.addEventListener('click', function (event) {
                var button = event.target.closest('.js-remove-period');
                if (!button) {
                    return;
                }

                var rows = periods.querySelectorAll('.js-period-row');
                if (rows.length === 1) {
                    // Never leave a day with zero rows — blank it instead so the day can be re-filled.
                    rows[0].querySelectorAll('input').forEach(function (input) { input.value = ''; });
                    return;
                }

                button.closest('.js-period-row').remove();
            });
        });
    </script>
@endsection