@extends('admin.main')
@section('content')
<script>
        const shiftCounters = {}; // Track shift index for each day

        function addShift(day) {
        // Initialize if not already tracked
        if (!shiftCounters[day]) shiftCounters[day] = 0;

        const index = shiftCounters[day]++;
        const container = document.getElementById(`${day}-container`);
        const div = document.createElement('div');
        div.className = "flex items-center gap-2 mb-2";

        div.innerHTML = `
            <input type="time" name="availability[${day}][${index}][start]" required class="border p-1 rounded w-28">
            <span class="m-2">to</span>
            <input type="time" name="availability[${day}][${index}][end]" required class="border p-1 rounded w-28">
            <button type="button" onclick="this.parentElement.remove()" class="btn btn-danger btn-sm"><i class="i-Remove"></i></button>
        `;

        container.appendChild(div);
        }
       
    </script>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="">Doctor Availability</h4>
                </div>
                <div class="card-body">
                    @if(session('success'))
                    <div class="text-success m-2">
                        {{ session('success') }}
                    </div>
                    @endif
                    @if($errors->any())
                    <div class="text-danger m-2 mb-4">
                        <ul class="list-unstyled ml-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                        </ul>
                    </div>
                    @endif
                <form action="{{ route('availability.store') }}" method="POST">
                    @csrf
                    @method('POST')
                    <div class="row"> 
                        @foreach(['monday','tuesday','wednesday','thursday','friday','saturday','sunday'] as $day)
                            <div class="col-md-4 mb-32">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between items-center">
                                            <label class="font-semibold text-capitalize font-weight-700">{{ $day }}</label>
                                            <button type="button" onclick="addShift('{{ $day }}')" class="btn btn-primary btn-sm">+ Add Shift</button>
                                        </div>
                                        <div id="{{ $day }}-container">
                                            @if(isset($availability[$day]))
                                            @foreach($availability[$day] as $i =>  $shift)
                                                <div class="flex items-center gap-2 mb-2">
                                                    <input type="time" name="availability[{{ $day }}][{{$i}}][start]" value="{{ $shift['start'] }}" required class="border p-1 rounded w-28">
                                                    <span class="m-2">to</span>
                                                    <input type="time" name="availability[{{ $day }}][{{$i}}][end]" value="{{ $shift['end'] }}" required class="border p-1 rounded w-28">
                                                    <button type="button" onclick="this.parentElement.remove()" class="btn btn-danger btn-sm"><i class="i-Remove"></i></button>
                                                </div>
                                            @endforeach
                                            <script>
                                                if (!shiftCounters['{{ $day }}']) shiftCounters['{{ $day }}'] = {{ count($availability[$day]) }};
                                            </script>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <button type="submit" class="btn btn-primary m-2 mt-4">Update</button>
                </form>
                </div>
            </div>
        </div>
    </div>
@endsection