@extends('layouts.branch')

@section('title', 'Clinical Schedules')
@section('header', 'Clinical Settings')

@section('content')
<div class="space-y-6">
    <div class="bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div>
            <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Service Timings</h2>
            <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase mt-2">Configure 24/7 operations or specific daily schedules</p>
        </div>
        <div class="flex gap-4">
            <a href="{{ route('branch.operational') }}" class="px-6 py-3 bg-slate-100 text-slate-600 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-200 transition-all italic">Dashboard</a>
        </div>
    </div>

    <form action="{{ route('branch.settings.clinical.update') }}" method="POST" class="space-y-6">
        @csrf

        @if($errors->any())
            <div class="bg-rose-50 border-2 border-rose-100 p-6 rounded-[30px] italic">
                <p class="text-[10px] text-rose-400 font-black uppercase tracking-widest mb-2">Update Errors</p>
                <ul class="list-disc list-inside text-xs font-bold text-rose-600 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
            @foreach($services as $key => $name)
                <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden" x-data="{ is247: false }">
                    <div class="px-8 py-6 bg-slate-50/50 border-b border-slate-100 flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <div class="h-10 w-10 bg-emerald-600 rounded-2xl flex items-center justify-center text-white font-black shadow-lg shadow-emerald-200 uppercase italic">
                                {{ substr($key, 0, 1) }}
                            </div>
                            <h3 class="text-lg font-black text-slate-800 uppercase tracking-tight">{{ $name }}</h3>
                        </div>
                    </div>

                    <div class="p-8">
                        <div class="overflow-x-auto">
                            <table class="w-full text-left">
                                <thead>
                                    <tr>
                                        <th class="pb-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Day</th>
                                        <th class="pb-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Status</th>
                                        <th class="pb-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Operating Hours</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-50">
                                    @php
                                        $days = [
                                            0 => 'Sunday', 1 => 'Monday', 2 => 'Tuesday', 
                                            3 => 'Wednesday', 4 => 'Thursday', 5 => 'Friday', 6 => 'Saturday'
                                        ];
                                    @endphp
                                    @foreach($days as $dayNum => $dayName)
                                        @php
                                            $sched = $schedules->get($key)?->where('day_of_week', $dayNum)->first();
                                        @endphp
                                        <tr class="group" x-data="{ 
                                            isClosed: {{ $sched?->is_closed ? 'true' : 'false' }},
                                            is247: {{ $sched?->is_24_7 ? 'true' : 'false' }} 
                                        }">
                                            <td class="py-4">
                                                <span class="text-sm font-black text-slate-700 uppercase tracking-tight">{{ $dayName }}</span>
                                            </td>
                                            <td class="py-4">
                                                <div class="flex items-center gap-4">
                                                    <label class="flex items-center cursor-pointer group">
                                                        <input type="checkbox" name="schedules[{{ $key }}][{{ $dayNum }}][is_closed]" x-model="isClosed" value="1" class="hidden">
                                                        <div class="w-12 h-6 flex items-center rounded-full p-1 transition-colors duration-300" :class="isClosed ? 'bg-rose-500' : 'bg-slate-200'">
                                                            <div class="bg-white w-4 h-4 rounded-full shadow-sm transform transition-transform duration-300" :class="isClosed ? 'translate-x-6' : ''"></div>
                                                        </div>
                                                        <span class="ml-2 text-[10px] font-black uppercase tracking-widest" :class="isClosed ? 'text-rose-600' : 'text-emerald-600'" x-text="isClosed ? 'Closed' : 'Active'">Active</span>
                                                    </label>

                                                    <label class="flex items-center cursor-pointer group" x-show="!isClosed">
                                                        <input type="checkbox" name="schedules[{{ $key }}][{{ $dayNum }}][is_24_7]" x-model="is247" value="1" class="hidden">
                                                        <div class="w-12 h-6 flex items-center rounded-full p-1 transition-colors duration-300" :class="is247 ? 'bg-emerald-500' : 'bg-slate-200'">
                                                            <div class="bg-white w-4 h-4 rounded-full shadow-sm transform transition-transform duration-300" :class="is247 ? 'translate-x-6' : ''"></div>
                                                        </div>
                                                        <span class="ml-2 text-[10px] font-black uppercase tracking-widest" :class="is247 ? 'text-emerald-600' : 'text-slate-400'">24/7</span>
                                                    </label>
                                                </div>
                                            </td>
                                            <td class="py-4">
                                                <div class="flex items-center gap-3" x-show="!isClosed && !is247">
                                                    <input type="time" name="schedules[{{ $key }}][{{ $dayNum }}][open_time]" value="{{ $sched?->open_time?->format('H:i') }}" class="px-3 py-2 bg-slate-50 border border-slate-100 rounded-xl text-xs font-black text-slate-700 shadow-inner">
                                                    <span class="text-xs font-black text-slate-300 uppercase tracking-widest">To</span>
                                                    <input type="time" name="schedules[{{ $key }}][{{ $dayNum }}][close_time]" value="{{ $sched?->close_time?->format('H:i') }}" class="px-3 py-2 bg-slate-50 border border-slate-100 rounded-xl text-xs font-black text-slate-700 shadow-inner">
                                                </div>
                                                <div x-show="isClosed" class="text-[10px] font-black text-rose-400 uppercase tracking-[0.2em] italic">No Operations</div>
                                                <div x-show="!isClosed && is247" class="text-[10px] font-black text-emerald-400 uppercase tracking-[0.2em] italic">Round the Clock</div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="fixed bottom-8 right-8">
            <button type="submit" class="px-10 py-5 bg-slate-900 text-white rounded-[2rem] font-black uppercase tracking-[0.2em] text-[11px] shadow-2xl shadow-emerald-200 hover:bg-emerald-600 transition-all transform hover:scale-110 flex items-center gap-3">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                Publish Schedules
            </button>
        </div>
    </form>
</div>
@endsection