@extends('layouts.dental')
@section('title', 'Horários de Atendimento')
@section('content')

<div style="max-width:600px">
<form method="POST" action="{{ route('settings.schedule.save') }}">
@csrf

<div class="card" style="overflow:hidden;margin-bottom:16px">
    <div style="padding:16px 20px;border-bottom:1px solid #f1f5f9;background:#f8fafc">
        <h3 style="font-weight:700;color:#1a202c;font-size:14px">Configure os dias e horários de atendimento da clínica</h3>
    </div>

    @php
    $days = [
        'seg' => 'Segunda-feira',
        'ter' => 'Terça-feira',
        'qua' => 'Quarta-feira',
        'qui' => 'Quinta-feira',
        'sex' => 'Sexta-feira',
        'sab' => 'Sábado',
        'dom' => 'Domingo',
    ];
    $defaults = ['seg'=>true,'ter'=>true,'qua'=>true,'qui'=>true,'sex'=>true,'sab'=>false,'dom'=>false];
    @endphp

    @foreach($days as $key => $label)
    @php
        $active = $schedule[$key]['active'] ?? $defaults[$key];
        $open   = $schedule[$key]['open']   ?? '08:00';
        $close  = $schedule[$key]['close']  ?? '18:00';
    @endphp
    <div style="display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid #f8fafc" id="row_{{ $key }}">
        {{-- Toggle --}}
        <div onclick="toggleDay('{{ $key }}')" id="toggle_{{ $key }}"
            style="width:40px;height:22px;background:{{ $active ? '#2563eb' : '#e2e8f0' }};border-radius:34px;cursor:pointer;position:relative;transition:.3s;flex-shrink:0">
            <div id="dot_{{ $key }}" style="position:absolute;top:3px;left:{{ $active ? '19px' : '3px' }};width:16px;height:16px;background:#fff;border-radius:50%;transition:.3s"></div>
        </div>
        <input type="hidden" name="day_{{ $key }}_hidden" value="0">
        <input type="checkbox" name="day_{{ $key }}" id="chk_{{ $key }}" {{ $active ? 'checked' : '' }} style="display:none">

        {{-- Dia --}}
        <span style="font-size:14px;font-weight:600;color:#1a202c;width:130px">{{ $label }}</span>

        {{-- Horários --}}
        <div id="hours_{{ $key }}" style="display:{{ $active ? 'flex' : 'none' }};align-items:center;gap:8px;flex:1">
            <input type="time" name="open_{{ $key }}" value="{{ $open }}"
                style="padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;width:110px">
            <span style="color:#64748b;font-size:13px">até</span>
            <input type="time" name="close_{{ $key }}" value="{{ $close }}"
                style="padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;width:110px">
        </div>
        <div id="closed_{{ $key }}" style="display:{{ $active ? 'none' : 'flex' }};align-items:center">
            <span style="font-size:13px;color:#94a3b8;font-style:italic">Fechado</span>
        </div>
    </div>
    @endforeach
</div>

<div style="display:flex;justify-content:flex-end">
    <button type="submit" class="btn btn-primary">Salvar Horários</button>
</div>
</form>
</div>

<script>
function toggleDay(day) {
    var chk = document.getElementById('chk_'+day);
    var toggle = document.getElementById('toggle_'+day);
    var dot = document.getElementById('dot_'+day);
    var hours = document.getElementById('hours_'+day);
    var closed = document.getElementById('closed_'+day);
    chk.checked = !chk.checked;
    if (chk.checked) {
        toggle.style.background = '#2563eb';
        dot.style.left = '19px';
        hours.style.display = 'flex';
        closed.style.display = 'none';
    } else {
        toggle.style.background = '#e2e8f0';
        dot.style.left = '3px';
        hours.style.display = 'none';
        closed.style.display = 'flex';
    }
}
</script>
@endsection