@extends('layouts.app')

@section('title', 'Disponibilités - Prestataire')

@php
    $days = [
        1 => 'Lundi',
        2 => 'Mardi',
        3 => 'Mercredi',
        4 => 'Jeudi',
        5 => 'Vendredi',
        6 => 'Samedi',
        0 => 'Dimanche',
    ];

    $availabilitiesByDay = $weeklyAvailability->keyBy('day_of_week');
    $backUrl = session('availability_setup_return_url') ?: route('prestataire.dashboard');
    $initialActiveDays = 0;
    $initialWeeklyHours = 0;
    $initialBreakDays = 0;

    foreach ($days as $dayNumber => $dayName) {
        $availability = $availabilitiesByDay->get($dayNumber);
        $isActive = old("days.$dayNumber.is_active", $availability?->is_active ? '1' : null) == '1';
        $startValue = old("days.$dayNumber.start_time", $availability?->start_time?->format('H:i') ?: '09:00');
        $endValue = old("days.$dayNumber.end_time", $availability?->end_time?->format('H:i') ?: '17:00');
        $breakStartValue = old("days.$dayNumber.break_start", $availability?->break_start?->format('H:i') ?: '');
        $breakEndValue = old("days.$dayNumber.break_end", $availability?->break_end?->format('H:i') ?: '');

        if (! $isActive || ! $startValue || ! $endValue) {
            continue;
        }

        $initialActiveDays++;

        [$startHour, $startMinute] = array_map('intval', explode(':', $startValue));
        [$endHour, $endMinute] = array_map('intval', explode(':', $endValue));
        $minutes = (($endHour * 60) + $endMinute) - (($startHour * 60) + $startMinute);

        if ($breakStartValue && $breakEndValue) {
            [$breakStartHour, $breakStartMinute] = array_map('intval', explode(':', $breakStartValue));
            [$breakEndHour, $breakEndMinute] = array_map('intval', explode(':', $breakEndValue));
            $minutes -= ((($breakEndHour * 60) + $breakEndMinute) - (($breakStartHour * 60) + $breakStartMinute));
            $initialBreakDays++;
        }

        $initialWeeklyHours += max(0, $minutes);
    }

    $initialWeeklyHours = round($initialWeeklyHours / 60, 1);
    $initialSummary = $initialActiveDays > 0
        ? $initialActiveDays . ' jour(s) ouverts • ' . str_replace('.', ',', (string) $initialWeeklyHours) . ' h / semaine'
        : 'Aucune disponibilité active';
@endphp

@push('styles')
<style>
    .availability-page {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0.95rem 0.9rem calc(6.75rem + env(safe-area-inset-bottom));
    }

    .availability-stack {
        display: grid;
        gap: 0.9rem;
    }

    .availability-topbar {
        display: grid;
        gap: 0.85rem;
    }

    .availability-back {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        width: fit-content;
        padding: 0.72rem 0.9rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.92);
        color: #1d4ed8;
        font-size: 0.92rem;
        font-weight: 700;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
        transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .availability-back:hover {
        color: #1e40af;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
    }

    .availability-header {
        display: grid;
        gap: 0.9rem;
    }

    .availability-heading {
        display: grid;
        gap: 0.28rem;
    }

    .availability-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        width: fit-content;
        padding: 0.32rem 0.65rem;
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.1);
        color: #1d4ed8;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .availability-heading h1 {
        margin: 0;
        color: #0f172a;
        font-size: 1.8rem;
        font-weight: 800;
        line-height: 1.05;
    }

    .availability-heading p {
        margin: 0;
        max-width: 42rem;
        color: #475569;
        font-size: 0.98rem;
        line-height: 1.5;
    }

    .availability-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .availability-stat {
        min-width: 0;
        padding: 0.8rem 0.85rem;
        border-radius: 1.05rem;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
    }

    .availability-stat-label {
        display: block;
        margin-bottom: 0.28rem;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .availability-stat-value {
        display: block;
        color: #0f172a;
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .availability-stat-note {
        display: block;
        margin-top: 0.22rem;
        color: #475569;
        font-size: 0.76rem;
        line-height: 1.35;
    }

    .availability-alert {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.88rem 0.95rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.92);
        color: #334155;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .availability-alert + .availability-alert {
        margin-top: 0.7rem;
    }

    .availability-alert strong {
        color: #0f172a;
    }

    .availability-alert.is-success {
        background: rgba(240, 253, 244, 0.98);
        color: #166534;
    }

    .availability-alert.is-warning {
        background: rgba(255, 251, 235, 0.98);
        color: #92400e;
    }

    .availability-alert.is-error {
        background: rgba(254, 242, 242, 0.98);
        color: #b91c1c;
    }

    .availability-alert svg {
        flex: 0 0 auto;
        width: 1.05rem;
        height: 1.05rem;
        margin-top: 0.1rem;
    }

    .availability-toolbar {
        display: grid;
        gap: 0.75rem;
        padding: 0.95rem 1rem;
        border-radius: 1.25rem;
        background:
            radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 38%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.96));
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .availability-toolbar-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
    }

    .availability-toolbar-head h2 {
        margin: 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 800;
    }

    .availability-toolbar-head p {
        margin: 0.2rem 0 0;
        color: #64748b;
        font-size: 0.84rem;
    }

    .availability-toolbar-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.42rem 0.72rem;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.06);
        color: #334155;
        font-size: 0.76rem;
        font-weight: 700;
    }

    .availability-preset-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .availability-preset-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-height: 2.55rem;
        padding: 0.72rem 0.95rem;
        border: 0;
        border-radius: 0.95rem;
        background: rgba(255, 255, 255, 0.95);
        color: #0f172a;
        font-size: 0.82rem;
        font-weight: 700;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .availability-preset-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
    }

    .availability-preset-btn.is-primary {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #ffffff;
    }

    .availability-preset-btn.is-soft {
        background: rgba(239, 246, 255, 0.92);
        color: #1d4ed8;
    }

    .availability-preset-btn.is-muted {
        background: rgba(248, 250, 252, 0.95);
        color: #475569;
    }

    .availability-form {
        display: grid;
        gap: 0.9rem;
    }

    .availability-days {
        display: grid;
        gap: 0.8rem;
    }

    .availability-day {
        padding: 0.92rem;
        border-radius: 1.22rem;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .availability-day.is-active {
        background:
            linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.98)),
            #ffffff;
    }

    .availability-day:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
    }

    .availability-day-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .availability-day-name {
        margin: 0;
        color: #0f172a;
        font-size: 1.02rem;
        font-weight: 800;
        line-height: 1.15;
    }

    .availability-day-meta {
        margin: 0.18rem 0 0;
        color: #64748b;
        font-size: 0.83rem;
        line-height: 1.4;
    }

    .availability-day-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
    }

    .availability-copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 2.3rem;
        padding: 0.62rem 0.82rem;
        border: 0;
        border-radius: 0.85rem;
        background: rgba(248, 250, 252, 0.96);
        color: #334155;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .availability-switch {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        user-select: none;
    }

    .availability-toggle-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .availability-switch-track {
        position: relative;
        display: inline-flex;
        width: 3.05rem;
        height: 1.8rem;
        border-radius: 999px;
        background: #cbd5e1;
        transition: background 0.2s ease;
    }

    .availability-switch-track::after {
        content: '';
        position: absolute;
        top: 0.18rem;
        left: 0.2rem;
        width: 1.43rem;
        height: 1.43rem;
        border-radius: 999px;
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
        transition: transform 0.2s ease;
    }

    .availability-toggle-input:checked + .availability-switch-track {
        background: linear-gradient(135deg, #16a34a, #22c55e);
    }

    .availability-toggle-input:checked + .availability-switch-track::after {
        transform: translateX(1.23rem);
    }

    .availability-switch-label {
        min-width: 3.85rem;
        color: #0f172a;
        font-size: 0.82rem;
        font-weight: 800;
        text-align: right;
    }

    .availability-day-body {
        margin-top: 0.82rem;
        padding-top: 0.82rem;
        border-top: 1px solid rgba(148, 163, 184, 0.22);
    }

    .availability-day.is-inactive .availability-day-body {
        display: none;
    }

    .availability-input-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .availability-field {
        display: grid;
        gap: 0.36rem;
        padding: 0.72rem 0.78rem;
        border-radius: 0.95rem;
        background: #f8fafc;
    }

    .availability-field span {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .availability-field input {
        width: 100%;
        border: 0;
        outline: 0;
        padding: 0;
        background: transparent;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 700;
    }

    .availability-field.is-break {
        background: #fff7ed;
    }

    .availability-field.is-break span {
        color: #9a3412;
    }

    .availability-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        padding: 0.95rem 1rem;
        border-radius: 1.22rem;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    }

    .availability-footer-copy {
        min-width: 0;
        display: grid;
        gap: 0.22rem;
    }

    .availability-footer-copy strong {
        color: #0f172a;
        font-size: 0.98rem;
        font-weight: 800;
    }

    .availability-footer-copy span {
        color: #64748b;
        font-size: 0.8rem;
    }

    .availability-save-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 3rem;
        padding: 0.9rem 1.3rem;
        border: 0;
        border-radius: 1rem;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 800;
        box-shadow: 0 16px 30px rgba(37, 99, 235, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .availability-save-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 36px rgba(37, 99, 235, 0.32);
    }

    @media (min-width: 768px) {
        .availability-page {
            padding-top: 1.1rem;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .availability-header {
            grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.95fr);
            align-items: end;
        }

        .availability-toolbar {
            grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
            align-items: start;
        }

        .availability-input-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (max-width: 767px) {
        .availability-page {
            padding-top: 0.75rem;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .availability-heading h1 {
            font-size: 1.48rem;
        }

        .availability-heading p {
            font-size: 0.88rem;
        }

        .availability-summary {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .availability-stat {
            padding: 0.72rem;
            border-radius: 1rem;
        }

        .availability-stat-label {
            font-size: 0.62rem;
        }

        .availability-stat-value {
            font-size: 1.02rem;
        }

        .availability-stat-note {
            font-size: 0.68rem;
        }

        .availability-toolbar,
        .availability-day,
        .availability-footer {
            border-radius: 1.05rem;
        }

        .availability-toolbar {
            padding: 0.82rem;
        }

        .availability-preset-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .availability-preset-btn {
            min-width: 0;
            min-height: 2.35rem;
            padding: 0.65rem 0.72rem;
            font-size: 0.76rem;
            line-height: 1.25;
            text-align: center;
        }

        .availability-day {
            padding: 0.82rem;
        }

        .availability-day-head {
            align-items: flex-start;
        }

        .availability-day-name {
            font-size: 0.98rem;
        }

        .availability-day-meta {
            font-size: 0.76rem;
        }

        .availability-day-actions {
            width: 100%;
            justify-content: space-between;
        }

        .availability-copy-btn {
            min-height: 2.1rem;
            padding: 0.56rem 0.72rem;
            font-size: 0.76rem;
        }

        .availability-switch-track {
            width: 2.85rem;
            height: 1.68rem;
        }

        .availability-switch-track::after {
            width: 1.32rem;
            height: 1.32rem;
        }

        .availability-toggle-input:checked + .availability-switch-track::after {
            transform: translateX(1.15rem);
        }

        .availability-switch-label {
            min-width: 3.5rem;
            font-size: 0.76rem;
        }

        .availability-input-grid {
            gap: 0.55rem;
        }

        .availability-field {
            padding: 0.66rem 0.7rem;
            border-radius: 0.85rem;
        }

        .availability-field span {
            font-size: 0.64rem;
        }

        .availability-field input {
            font-size: 0.92rem;
        }

        .availability-footer {
            padding: 0.82rem;
        }

        .availability-save-btn {
            width: 100%;
            min-height: 2.8rem;
        }
    }

    @media (max-width: 479px) {
        .availability-page {
            padding-left: 0.62rem;
            padding-right: 0.62rem;
        }

        .availability-summary {
            gap: 0.45rem;
        }

        .availability-stat {
            padding: 0.65rem 0.58rem;
        }

        .availability-preset-list {
            grid-template-columns: 1fr 1fr;
            gap: 0.45rem;
        }
    }
</style>
@endpush

@section('content')
<div class="availability-page">
    <div class="availability-stack">
        <div class="availability-topbar">
            <a href="{{ $backUrl }}" class="availability-back">
                <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M11.79 4.23a.75.75 0 010 1.06L7.81 9.25H16a.75.75 0 010 1.5H7.81l3.98 3.96a.75.75 0 11-1.06 1.06l-5.25-5.25a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0z" clip-rule="evenodd" />
                </svg>
                Retour
            </a>

            <div class="availability-header">
                <div class="availability-heading">
                    <span class="availability-kicker">Planning hebdomadaire</span>
                    <h1>Disponibilités</h1>
                    <p>Activez seulement les jours utiles, posez vos horaires en 2 minutes et gardez une vue claire sur votre semaine.</p>
                </div>

                <div class="availability-summary">
                    <div class="availability-stat">
                        <span class="availability-stat-label">Jours ouverts</span>
                        <strong id="active-days-count" class="availability-stat-value">{{ $initialActiveDays }}</strong>
                        <span class="availability-stat-note">sur 7 jours</span>
                    </div>
                    <div class="availability-stat">
                        <span class="availability-stat-label">Charge hebdo</span>
                        <strong id="weekly-hours-count" class="availability-stat-value">{{ str_replace('.', ',', (string) $initialWeeklyHours) }} h</strong>
                        <span class="availability-stat-note">temps net estimé</span>
                    </div>
                    <div class="availability-stat">
                        <span class="availability-stat-label">Jours avec pause</span>
                        <strong id="break-days-count" class="availability-stat-value">{{ $initialBreakDays }}</strong>
                        <span class="availability-stat-note">pause déjeuner incluse</span>
                    </div>
                </div>
            </div>
        </div>

        <div>
            @if (session('success'))
                <div class="availability-alert is-success">
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.414l-7.2 7.2a1 1 0 01-1.414 0l-3.2-3.2A1 1 0 116.304 9.29l2.493 2.493 6.493-6.493a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    <div>{{ session('success') }}</div>
                </div>
            @endif

            @if (session('warning'))
                <div class="availability-alert is-warning">
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.72-1.36 3.485 0l5.58 9.92c.75 1.334-.213 2.981-1.742 2.981H4.42c-1.53 0-2.492-1.647-1.743-2.98l5.58-9.92zM11 13a1 1 0 10-2 0 1 1 0 002 0zm-1-7a1 1 0 00-1 1v3a1 1 0 102 0V7a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    <div>
                        <strong>Attention.</strong> {{ session('warning') }}
                        @if (session('availability_setup_return_url'))
                            <div class="mt-2">
                                <a href="{{ session('availability_setup_return_url') }}" class="font-semibold underline underline-offset-2">Retourner à l'étape précédente</a>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            @if (session('error'))
                <div class="availability-alert is-error">
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm2.12-10.88a.75.75 0 10-1.06-1.06L10 7.94 8.94 6.88a.75.75 0 00-1.06 1.06L8.94 9l-1.06 1.06a.75.75 0 101.06 1.06L10 10.06l1.06 1.06a.75.75 0 101.06-1.06L11.06 9l1.06-1.06z" clip-rule="evenodd" />
                    </svg>
                    <div>{{ session('error') }}</div>
                </div>
            @endif
        </div>

        <div class="availability-toolbar">
            <div class="availability-toolbar-head">
                <div>
                    <h2>Raccourcis utiles</h2>
                    <p>Choisissez un modèle puis ajustez jour par jour.</p>
                </div>
                <span class="availability-toolbar-chip">Réservation plus simple</span>
            </div>

            <div class="availability-preset-list">
                <button type="button" class="availability-preset-btn is-primary" data-preset="classic">09h-18h · Lun-Ven</button>
                <button type="button" class="availability-preset-btn is-soft" data-preset="fullweek">09h-18h · Lun-Sam</button>
                <button type="button" class="availability-preset-btn" data-preset="morning">08h-12h · Lun-Sam</button>
                <button type="button" class="availability-preset-btn" data-preset="afternoon">14h-18h · Lun-Ven</button>
                <button type="button" class="availability-preset-btn is-muted" data-preset="reset">Base 09h-17h</button>
                <button type="button" class="availability-preset-btn is-muted" data-preset="clear">Tout fermer</button>
            </div>
        </div>

        <form action="{{ route('prestataire.availability.updateWeekly') }}" method="POST" id="availabilityForm" class="availability-form">
            @csrf
            @method('PUT')

            <div class="availability-days">
                @foreach ($days as $dayNumber => $dayName)
                    @php
                        $availability = $availabilitiesByDay->get($dayNumber);
                        $isActive = old("days.$dayNumber.is_active", $availability?->is_active ? '1' : null) == '1';
                        $startValue = old("days.$dayNumber.start_time", $availability?->start_time?->format('H:i') ?: '09:00');
                        $endValue = old("days.$dayNumber.end_time", $availability?->end_time?->format('H:i') ?: '17:00');
                        $breakStartValue = old("days.$dayNumber.break_start", $availability?->break_start?->format('H:i') ?: '');
                        $breakEndValue = old("days.$dayNumber.break_end", $availability?->break_end?->format('H:i') ?: '');
                        $slotDuration = old("days.$dayNumber.slot_duration", $availability?->slot_duration ?? 60);
                        $dayMeta = $isActive
                            ? trim($startValue . ' - ' . $endValue . ($breakStartValue && $breakEndValue ? ' • pause ' . $breakStartValue . ' - ' . $breakEndValue : ''))
                            : 'Fermé';
                    @endphp

                    <section class="availability-day {{ $isActive ? 'is-active' : 'is-inactive' }}" data-day-card="{{ $dayNumber }}">
                        <div class="availability-day-head">
                            <div>
                                <h3 class="availability-day-name">{{ $dayName }}</h3>
                                <p class="availability-day-meta" data-day-status="{{ $dayNumber }}">{{ $dayMeta }}</p>
                            </div>

                            <div class="availability-day-actions">
                                <button type="button" class="availability-copy-btn" data-copy-day="{{ $dayNumber }}">
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4">
                                        <path d="M6 2a2 2 0 00-2 2v8a2 2 0 002 2h1V6a2 2 0 012-2h5V4a2 2 0 00-2-2H6z" />
                                        <path d="M9 6a2 2 0 00-2 2v8a2 2 0 002 2h5a2 2 0 002-2V8a2 2 0 00-2-2H9z" />
                                    </svg>
                                    Copier
                                </button>

                                <label class="availability-switch">
                                    <input
                                        type="checkbox"
                                        class="availability-toggle-input"
                                        name="days[{{ $dayNumber }}][is_active]"
                                        value="1"
                                        data-day-toggle="{{ $dayNumber }}"
                                        {{ $isActive ? 'checked' : '' }}
                                    >
                                    <span class="availability-switch-track"></span>
                                    <span class="availability-switch-label" data-switch-label="{{ $dayNumber }}">{{ $isActive ? 'Actif' : 'Fermé' }}</span>
                                </label>
                            </div>
                        </div>

                        <div class="availability-day-body" id="day-panel-{{ $dayNumber }}">
                            <input type="hidden" name="days[{{ $dayNumber }}][slot_duration]" value="{{ $slotDuration }}">

                            <div class="availability-input-grid">
                                <label class="availability-field">
                                    <span>Début</span>
                                    <input type="time" name="days[{{ $dayNumber }}][start_time]" value="{{ $startValue }}" data-day-input="{{ $dayNumber }}">
                                </label>

                                <label class="availability-field">
                                    <span>Fin</span>
                                    <input type="time" name="days[{{ $dayNumber }}][end_time]" value="{{ $endValue }}" data-day-input="{{ $dayNumber }}">
                                </label>

                                <label class="availability-field is-break">
                                    <span>Pause début</span>
                                    <input type="time" name="days[{{ $dayNumber }}][break_start]" value="{{ $breakStartValue }}" data-day-input="{{ $dayNumber }}">
                                </label>

                                <label class="availability-field is-break">
                                    <span>Pause fin</span>
                                    <input type="time" name="days[{{ $dayNumber }}][break_end]" value="{{ $breakEndValue }}" data-day-input="{{ $dayNumber }}">
                                </label>
                            </div>
                        </div>
                    </section>
                @endforeach
            </div>

            <div class="availability-footer">
                <div class="availability-footer-copy">
                    <strong id="config-summary">{{ $initialSummary }}</strong>
                    <span>Seuls les jours actifs apparaitront dans vos réservations.</span>
                </div>

                <button type="submit" class="availability-save-btn">
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5">
                        <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.414l-7.2 7.2a1 1 0 01-1.414 0l-3.2-3.2A1 1 0 116.304 9.29l2.493 2.493 6.493-6.493a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    Enregistrer les disponibilités
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const dayOrder = [1, 2, 3, 4, 5, 6, 0];
        const shortNames = {
            0: 'Dim',
            1: 'Lun',
            2: 'Mar',
            3: 'Mer',
            4: 'Jeu',
            5: 'Ven',
            6: 'Sam'
        };
        const longNames = {
            0: 'Dimanche',
            1: 'Lundi',
            2: 'Mardi',
            3: 'Mercredi',
            4: 'Jeudi',
            5: 'Vendredi',
            6: 'Samedi'
        };
        const presets = {
            classic: {
                label: '09h-18h · Lun-Ven',
                days: [1, 2, 3, 4, 5],
                start: '09:00',
                end: '18:00',
                breakStart: '12:00',
                breakEnd: '14:00'
            },
            morning: {
                label: '08h-12h · Lun-Sam',
                days: [1, 2, 3, 4, 5, 6],
                start: '08:00',
                end: '12:00',
                breakStart: '',
                breakEnd: ''
            },
            afternoon: {
                label: '14h-18h · Lun-Ven',
                days: [1, 2, 3, 4, 5],
                start: '14:00',
                end: '18:00',
                breakStart: '',
                breakEnd: ''
            },
            fullweek: {
                label: '09h-18h · Lun-Sam',
                days: [1, 2, 3, 4, 5, 6],
                start: '09:00',
                end: '18:00',
                breakStart: '12:00',
                breakEnd: '14:00'
            },
            reset: {
                label: 'Base 09h-17h',
                days: [1, 2, 3, 4, 5],
                start: '09:00',
                end: '17:00',
                breakStart: '12:00',
                breakEnd: '14:00'
            },
            clear: {
                label: 'Tout fermer',
                days: [],
                start: '09:00',
                end: '17:00',
                breakStart: '',
                breakEnd: ''
            }
        };

        const form = document.getElementById('availabilityForm');
        const activeDaysCount = document.getElementById('active-days-count');
        const weeklyHoursCount = document.getElementById('weekly-hours-count');
        const breakDaysCount = document.getElementById('break-days-count');
        const configSummary = document.getElementById('config-summary');

        function getFields(day) {
            return {
                card: document.querySelector('[data-day-card="' + day + '"]'),
                toggle: document.querySelector('[data-day-toggle="' + day + '"]'),
                status: document.querySelector('[data-day-status="' + day + '"]'),
                switchLabel: document.querySelector('[data-switch-label="' + day + '"]'),
                start: document.querySelector('input[name="days[' + day + '][start_time]"]'),
                end: document.querySelector('input[name="days[' + day + '][end_time]"]'),
                breakStart: document.querySelector('input[name="days[' + day + '][break_start]"]'),
                breakEnd: document.querySelector('input[name="days[' + day + '][break_end]"]')
            };
        }

        function toMinutes(value) {
            if (!value || value.indexOf(':') === -1) {
                return null;
            }

            const parts = value.split(':');
            return (parseInt(parts[0], 10) * 60) + parseInt(parts[1], 10);
        }

        function setDayState(day, isActive) {
            const fields = getFields(day);
            if (!fields.card || !fields.switchLabel) {
                return;
            }

            fields.card.classList.toggle('is-active', isActive);
            fields.card.classList.toggle('is-inactive', !isActive);
            fields.switchLabel.textContent = isActive ? 'Actif' : 'Fermé';
        }

        function buildDayStatus(day) {
            const fields = getFields(day);
            if (!fields.toggle || !fields.toggle.checked) {
                return 'Fermé';
            }

            const start = fields.start ? fields.start.value : '';
            const end = fields.end ? fields.end.value : '';
            const breakStart = fields.breakStart ? fields.breakStart.value : '';
            const breakEnd = fields.breakEnd ? fields.breakEnd.value : '';

            if (!start || !end) {
                return 'Horaires à compléter';
            }

            return breakStart && breakEnd
                ? start + ' - ' + end + ' • pause ' + breakStart + ' - ' + breakEnd
                : start + ' - ' + end;
        }

        function updateDayStatus(day) {
            const fields = getFields(day);
            if (fields.status) {
                fields.status.textContent = buildDayStatus(day);
            }
        }

        function updateSummary() {
            const activeDays = [];
            let totalMinutes = 0;
            let breakDays = 0;

            dayOrder.forEach(function (day) {
                const fields = getFields(day);
                if (!fields.toggle || !fields.toggle.checked) {
                    return;
                }

                activeDays.push(shortNames[day]);

                const startMinutes = toMinutes(fields.start ? fields.start.value : '');
                const endMinutes = toMinutes(fields.end ? fields.end.value : '');
                const breakStartMinutes = toMinutes(fields.breakStart ? fields.breakStart.value : '');
                const breakEndMinutes = toMinutes(fields.breakEnd ? fields.breakEnd.value : '');

                if (startMinutes !== null && endMinutes !== null && endMinutes > startMinutes) {
                    let dayMinutes = endMinutes - startMinutes;

                    if (
                        breakStartMinutes !== null &&
                        breakEndMinutes !== null &&
                        breakEndMinutes > breakStartMinutes &&
                        breakStartMinutes >= startMinutes &&
                        breakEndMinutes <= endMinutes
                    ) {
                        dayMinutes -= (breakEndMinutes - breakStartMinutes);
                        breakDays += 1;
                    }

                    totalMinutes += Math.max(dayMinutes, 0);
                }
            });

            const hours = Math.round((totalMinutes / 60) * 10) / 10;
            const hoursText = hours.toFixed(1).replace('.', ',') + ' h';

            if (activeDaysCount) {
                activeDaysCount.textContent = String(activeDays.length);
            }

            if (weeklyHoursCount) {
                weeklyHoursCount.textContent = hoursText;
            }

            if (breakDaysCount) {
                breakDaysCount.textContent = String(breakDays);
            }

            if (configSummary) {
                configSummary.textContent = activeDays.length
                    ? activeDays.join(', ') + ' • ' + hoursText + ' / semaine'
                    : 'Aucune disponibilité active';
            }
        }

        function applyPreset(presetKey) {
            const preset = presets[presetKey];
            if (!preset) {
                return;
            }

            const confirmed = window.confirm('Appliquer "' + preset.label + '" ? Les horaires actuels seront remplacés.');
            if (!confirmed) {
                return;
            }

            dayOrder.forEach(function (day) {
                const fields = getFields(day);
                if (!fields.toggle) {
                    return;
                }

                const enabled = preset.days.indexOf(day) !== -1;
                fields.toggle.checked = enabled;

                if (fields.start) {
                    fields.start.value = preset.start;
                }

                if (fields.end) {
                    fields.end.value = preset.end;
                }

                if (fields.breakStart) {
                    fields.breakStart.value = preset.breakStart;
                }

                if (fields.breakEnd) {
                    fields.breakEnd.value = preset.breakEnd;
                }

                setDayState(day, enabled);
                updateDayStatus(day);
            });

            updateSummary();
        }

        function copyDayToOthers(sourceDay) {
            const sourceFields = getFields(sourceDay);
            if (!sourceFields.start || !sourceFields.end) {
                return;
            }

            const confirmed = window.confirm('Copier les horaires de ' + longNames[sourceDay] + ' vers les autres jours actifs ?');
            if (!confirmed) {
                return;
            }

            dayOrder.forEach(function (day) {
                if (day === sourceDay) {
                    return;
                }

                const fields = getFields(day);
                if (!fields.toggle || !fields.toggle.checked) {
                    return;
                }

                if (fields.start) {
                    fields.start.value = sourceFields.start.value;
                }

                if (fields.end) {
                    fields.end.value = sourceFields.end.value;
                }

                if (fields.breakStart) {
                    fields.breakStart.value = sourceFields.breakStart ? sourceFields.breakStart.value : '';
                }

                if (fields.breakEnd) {
                    fields.breakEnd.value = sourceFields.breakEnd ? sourceFields.breakEnd.value : '';
                }

                updateDayStatus(day);
            });

            updateSummary();
        }

        function validateForm() {
            const activeDays = dayOrder.filter(function (day) {
                const fields = getFields(day);
                return fields.toggle && fields.toggle.checked;
            });

            if (!activeDays.length) {
                window.alert('Vous devez activer au moins un jour.');
                return false;
            }

            for (const day of activeDays) {
                const fields = getFields(day);
                const startMinutes = toMinutes(fields.start ? fields.start.value : '');
                const endMinutes = toMinutes(fields.end ? fields.end.value : '');
                const breakStartMinutes = toMinutes(fields.breakStart ? fields.breakStart.value : '');
                const breakEndMinutes = toMinutes(fields.breakEnd ? fields.breakEnd.value : '');

                if (startMinutes === null || endMinutes === null || endMinutes <= startMinutes) {
                    window.alert(longNames[day] + ' : l\'heure de fin doit être après l\'heure de début.');
                    return false;
                }

                if ((breakStartMinutes === null) !== (breakEndMinutes === null)) {
                    window.alert(longNames[day] + ' : complétez la pause entière ou laissez les deux champs vides.');
                    return false;
                }

                if (
                    breakStartMinutes !== null &&
                    breakEndMinutes !== null &&
                    (breakEndMinutes <= breakStartMinutes || breakStartMinutes < startMinutes || breakEndMinutes > endMinutes)
                ) {
                    window.alert(longNames[day] + ' : la pause doit rester comprise dans la plage ouverte.');
                    return false;
                }
            }

            return true;
        }

        document.querySelectorAll('[data-preset]').forEach(function (button) {
            button.addEventListener('click', function () {
                applyPreset(button.dataset.preset);
            });
        });

        document.querySelectorAll('[data-copy-day]').forEach(function (button) {
            button.addEventListener('click', function () {
                copyDayToOthers(parseInt(button.dataset.copyDay, 10));
            });
        });

        document.querySelectorAll('[data-day-toggle]').forEach(function (toggle) {
            const day = parseInt(toggle.dataset.dayToggle, 10);
            toggle.addEventListener('change', function () {
                setDayState(day, toggle.checked);
                updateDayStatus(day);
                updateSummary();
            });
        });

        document.querySelectorAll('[data-day-input]').forEach(function (input) {
            const name = input.getAttribute('name') || '';
            const match = name.match(/days\[(\d)\]/);
            if (!match) {
                return;
            }

            const day = parseInt(match[1], 10);
            input.addEventListener('input', function () {
                updateDayStatus(day);
                updateSummary();
            });
        });

        if (form) {
            form.addEventListener('submit', function (event) {
                if (!validateForm()) {
                    event.preventDefault();
                }
            });
        }

        dayOrder.forEach(function (day) {
            const fields = getFields(day);
            if (!fields.toggle) {
                return;
            }

            setDayState(day, fields.toggle.checked);
            updateDayStatus(day);
        });

        updateSummary();
    });
</script>
@endpush