@extends('layouts.owner')

@section('title', 'Horário — Lined')
@section('page-title', 'Horário de atendimento')
@section('page-subtitle', $professional->name)

@section('content')

    @if (session('error'))
        <div class="mb-6 px-4 sm:px-5 py-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm break-words">
            {{ session('error') }}
        </div>
    @endif

    @php
        $days = [
            1 => 'Segunda-feira',
            2 => 'Terça-feira',
            3 => 'Quarta-feira',
            4 => 'Quinta-feira',
            5 => 'Sexta-feira',
            6 => 'Sábado',
            7 => 'Domingo',
        ];
    @endphp

    <form method="POST" action="{{ route('owner.professionals.schedule.save', $professional->idprofessional) }}"
        id="schedule-form" onsubmit="handleSubmit()">
        @csrf

        <div class="rounded-2xl border border-white/8 bg-white/3 overflow-hidden mb-6">
            <div class="px-4 sm:px-6 py-4 sm:py-5 border-b border-white/8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
                <div class="min-w-0">
                    <h3 class="font-heading font-bold text-white text-base">Defina os intervalos da semana</h3>
                    <p class="text-gray-500 text-xs mt-1">Adicione um ou mais intervalos por dia. Dias sem intervalo ficam
                        fechados.</p>
                </div>
                <button type="button" onclick="copyToAll()"
                    class="w-full sm:w-auto shrink-0 inline-flex items-center justify-center gap-2 px-3 py-2.5 sm:py-2 rounded-xl bg-white/5 border border-white/10 text-gray-300 text-xs font-semibold hover:bg-white/10 hover:text-white transition-all cursor-pointer">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <rect x="9" y="9" width="13" height="13" rx="2" />
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                    </svg>
                    Copiar segunda para todos
                </button>
            </div>

            <div class="divide-y divide-white/6">
                @foreach ($days as $num => $label)
                    <div class="px-4 sm:px-6 py-4 sm:py-5 flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4 min-w-0" data-day-block="{{ $num }}">
                        <div class="sm:w-44 shrink-0 flex items-center justify-between gap-3 sm:block">
                            <span class="text-white font-semibold text-sm">{{ $label }}</span>
                            <button type="button" onclick="addInterval({{ $num }})"
                                class="sm:mt-2 shrink-0 inline-flex items-center gap-1.5 text-brand-green text-xs font-semibold hover:text-brand-green-dark transition-colors cursor-pointer">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2.5" stroke-linecap="round">
                                    <line x1="12" y1="5" x2="12" y2="19" />
                                    <line x1="5" y1="12" x2="19" y2="12" />
                                </svg>
                                Intervalo
                            </button>
                        </div>

                        <div class="flex-1 min-w-0 flex flex-col gap-2.5" data-intervals="{{ $num }}">
                            @php $rows = old('day_week') ? null : ($byDay[$num] ?? []); @endphp

                            {{-- Reconstrução de old() em caso de erro de validação --}}
                            @if (old('day_week'))
                                @foreach (old('day_week') as $i => $d)
                                    @if ((int) $d === $num)
                                        @include('owner.professionals.partials.interval-row', [
                                            'day'   => $num,
                                            'start' => old('start_time')[$i] ?? '',
                                            'end'   => old('end_time')[$i] ?? '',
                                        ])
                                    @endif
                                @endforeach
                            @else
                                @foreach ($rows as $row)
                                    @include('owner.professionals.partials.interval-row', [
                                        'day'   => $num,
                                        'start' => $row['start'],
                                        'end'   => $row['end'],
                                    ])
                                @endforeach
                            @endif

                            <p class="text-gray-600 text-xs italic" data-empty="{{ $num }}">Fechado</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="flex flex-col-reverse sm:flex-row sm:items-center gap-3">
            <button id="submit-btn" type="submit"
                class="w-full sm:w-auto py-3 px-6 rounded-xl bg-brand-green text-white text-sm font-bold hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 shadow-[0_4px_16px_-4px_rgba(34,197,94,0.4)] flex items-center justify-center gap-2">
                <span id="submit-text">Salvar horário</span>
                <svg id="submit-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                </svg>
            </button>
            <a href="{{ route('owner.professionals.index') }}"
                class="w-full sm:w-auto py-3 px-6 rounded-xl bg-white/5 border border-white/10 text-white text-sm font-semibold text-center hover:bg-white/10 transition-all no-underline flex items-center justify-center">
                Voltar
            </a>
        </div>
    </form>

@endsection

@push('scripts')
    <script>
        function rowTemplate(day, start = '', end = '') {
            return `
            <div class="flex items-center gap-2 min-w-0" data-row>
                <input type="hidden" name="day_week[]" value="${day}">
                <input type="time" name="start_time[]" value="${start}" required
                    class="flex-1 min-w-0 px-2.5 sm:px-3 py-2 rounded-lg bg-black/30 border border-white/10 text-white text-sm outline-none focus:border-brand-green/50 transition-colors [color-scheme:dark]">
                <span class="text-gray-500 text-xs shrink-0">até</span>
                <input type="time" name="end_time[]" value="${end}" required
                    class="flex-1 min-w-0 px-2.5 sm:px-3 py-2 rounded-lg bg-black/30 border border-white/10 text-white text-sm outline-none focus:border-brand-green/50 transition-colors [color-scheme:dark]">
                <button type="button" onclick="removeInterval(this)"
                    class="shrink-0 p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-all cursor-pointer">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
                    </svg>
                </button>
            </div>`;
        }

        function refreshEmpty(day) {
            const container = document.querySelector(`[data-intervals="${day}"]`);
            const empty = container.querySelector(`[data-empty="${day}"]`);
            const hasRows = container.querySelector('[data-row]') !== null;
            empty.style.display = hasRows ? 'none' : 'block';
        }

        function addInterval(day, start = '', end = '') {
            const container = document.querySelector(`[data-intervals="${day}"]`);
            const empty = container.querySelector(`[data-empty="${day}"]`);
            empty.insertAdjacentHTML('beforebegin', rowTemplate(day, start, end));
            refreshEmpty(day);
        }

        function removeInterval(btn) {
            const row = btn.closest('[data-row]');
            const day = btn.closest('[data-intervals]').getAttribute('data-intervals');
            row.remove();
            refreshEmpty(day);
        }

        function copyToAll() {
            const source = document.querySelector('[data-intervals="1"]');
            const intervals = [...source.querySelectorAll('[data-row]')].map(row => ({
                start: row.querySelector('input[name="start_time[]"]').value,
                end: row.querySelector('input[name="end_time[]"]').value,
            }));

            if (intervals.length === 0) {
                showToast('Adicione ao menos um intervalo na segunda-feira', 'error');
                return;
            }

            for (let day = 2; day <= 7; day++) {
                const container = document.querySelector(`[data-intervals="${day}"]`);
                container.querySelectorAll('[data-row]').forEach(r => r.remove());
                intervals.forEach(iv => addInterval(day, iv.start, iv.end));
            }

            showToast('Intervalos copiados para todos os dias', 'success');
        }

        function handleSubmit() {
            const btn = document.getElementById('submit-btn');
            btn.disabled = true;
            btn.classList.add('opacity-60', 'cursor-not-allowed');
            document.getElementById('submit-text').textContent = 'Salvando...';
            document.getElementById('submit-spinner').classList.remove('hidden');
        }

        // Estado inicial dos rótulos "Fechado"
        document.addEventListener('DOMContentLoaded', () => {
            for (let day = 1; day <= 7; day++) refreshEmpty(day);
        });
    </script>
@endpush