<div class="container flex gap-5">

    <!-- Weekly Hours Form -->
    <form action="{{ route('tutor.set.availability') }}" method="POST" class="card w-1/2">
        @csrf
        <h3>Weekly hours</h3>

        @foreach(['monday','tuesday','wednesday','thursday','friday'] as $day)
        <div class="day-row" data-day="{{ $day }}">
            <div class="day-header">
                <label>
                    <input type="checkbox" name="days[{{ $day }}][enabled]" checked> {{ ucfirst($day) }}
                </label>
                <span class="add-slot" onclick="addSlot(this)">+ Add another timeslot</span>
            </div>
            <div class="slots">
                <div class="timeslot">
                    <select name="days[{{ $day }}][slots][0][from]">
                        @for($h=0;$h<24;$h++)
                        <option value="{{ sprintf('%02d:00', $h) }}">{{ sprintf('%02d:00', $h) }}</option>
                        @endfor
                    </select>
                    <select name="days[{{ $day }}][slots][0][to]">
                        @for($h=0;$h<24;$h++)
                        <option value="{{ sprintf('%02d:00', $h) }}">{{ sprintf('%02d:00', $h) }}</option>
                        @endfor
                    </select>
                </div>
            </div>
        </div>
        @endforeach

        <button type="submit" class="save-btn mt-3">Save Weekly Hours</button>
    </form>

    <!-- Date-specific Hours Form -->
    <form action="{{route('tutor.unavailable.slots')}}" method="POST" class="card w-1/2">
        @csrf
        <h3>Date-specific hours</h3>

        <button type="button" class="date-btn" onclick="addDate()">+ Add Date</button>

        <div id="date-container">
            <div class="timeslot">
                <input type="date" name="dates[0][date]" required>
                <select name="dates[0][from]">
                    @for($h=0;$h<24;$h++)
                    <option value="{{ sprintf('%02d:00', $h) }}">{{ sprintf('%02d:00', $h) }}</option>
                    @endfor
                </select>
                <select name="dates[0][to]">
                    @for($h=0;$h<24;$h++)
                    <option value="{{ sprintf('%02d:00', $h) }}">{{ sprintf('%02d:00', $h) }}</option>
                    @endfor
                </select>
            </div>
        </div>

        <button type="submit" class="save-btn mt-3">Save Date-specific Hours</button>
    </form>

</div>

<style>
.container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px;
}
.card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
}
.w-1/2 {
    flex: 1 1 45%;
}
.day-row {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}
.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.slots {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.timeslot {
    display: flex;
    gap: 10px;
    align-items: center;
}
.timeslot select, .timeslot input[type="date"] {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.add-slot, .date-btn {
    cursor: pointer;
    color: #007bff;
    font-weight: 500;
    font-size: 0.9rem;
}
.add-slot:hover, .date-btn:hover {
    text-decoration: underline;
}
.save-btn {
    background: #28a745;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.save-btn:hover {
    background: #218838;
}
.mt-3 {
    margin-top: 15px;
}
</style>

<script>
let dateIndex = 1;

function addSlot(el) {
    const slots = el.closest('.day-row').querySelector('.slots');
    const slotCount = slots.children.length;
    const day = el.closest('.day-row').dataset.day;

    const div = document.createElement('div');
    div.className = 'timeslot';
    div.innerHTML = `
        <select name="days[${day}][slots][${slotCount}][from]">
            ${[...Array(24).keys()].map(h => `<option value="${h.toString().padStart(2,'0')}:00">${h.toString().padStart(2,'0')}:00</option>`).join('')}
        </select>
        <select name="days[${day}][slots][${slotCount}][to]">
            ${[...Array(24).keys()].map(h => `<option value="${h.toString().padStart(2,'0')}:00">${h.toString().padStart(2,'0')}:00</option>`).join('')}
        </select>
    `;
    slots.appendChild(div);
}

function addDate() {
    const container = document.getElementById('date-container');
    const div = document.createElement('div');
    div.className = 'timeslot';
    div.innerHTML = `
        <input type="date" name="dates[${dateIndex}][date]" required>
        <select name="dates[${dateIndex}][from]">
            ${[...Array(24).keys()].map(h => `<option value="${h.toString().padStart(2,'0')}:00">${h.toString().padStart(2,'0')}:00</option>`).join('')}
        </select>
        <select name="dates[${dateIndex}][to]">
            ${[...Array(24).keys()].map(h => `<option value="${h.toString().padStart(2,'0')}:00">${h.toString().padStart(2,'0')}:00</option>`).join('')}
        </select>
    `;
    container.appendChild(div);
    dateIndex++;
}
</script>
