@extends('layouts.contentNavbarLayout')

@section('title', 'Edit Time Slots')

@section('content')
<div class="card">
    <div class="card-header pb-0">
        <h5>Edit Time Slots for {{$coach->name}}</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('coachs.timeSlots.save', $coach->id) }}" method="POST" class="form-inline">
        @csrf
        @foreach($session_days as $session_day)
            <div class="mb-1 mt-3" id="sessionDay-{{$session_day->id}}">
                <h6 class="fw-bold">{{ $session_day->day }}</h6>
                @foreach($session_day->sessionCoachs as $session_coach_day)
                    @foreach($session_coach_day->slots as $slot)
                        <div class="row" id="timeSlot-{{$slot->id}}">
                            <div class="col-md-4"><input type="time" step="900" name="time_start[{{$slot->id}}]" class="form-control mb-2" value="{{ $slot->time_start }}" required></div>
                            <div class="col-md-4"><input type="time" step="900" name="time_end[{{$slot->id}}]" class="form-control mb-2" value="{{ $slot->time_end }}" required></div>
                            <div class="col-md-4"><button type="button" class="btn btn-danger ml-2" onclick="deleteSlot({{ $slot->id }})">Delete</button></div>
                        </div>
                    @endforeach
                @endforeach
            </div>
            <button class="btn btn-success" type="button" onclick="addSlot({{ $session_day->id }})">Add Slot</button>
        @endforeach
        <div class="d-flex justify-content-end">
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ route('coachs.index') }}" class="btn btn-secondary ms-2">Cancel</a>
        </div>
        </form>
    </div>
</div>
@endsection
@section('page-script')
<script>
function addSlot(sessionDayId) {
    var markup = `
        <div class="row slot-row">
            <div class="col-md-4"><input type="time" step="900" name="new_time_start[]" class="form-control mb-2" required></div>
            <div class="col-md-4"><input type="time" step="900" name="new_time_end[]" class="form-control mb-2" required></div>
            <input type="hidden" name="session_day_id[]" value="${sessionDayId}">
            <div class="col-md-4"><button type="button" class="btn btn-danger ml-2" onclick="$(this).closest('.row').remove();">Delete</button></div>
        </div>
    `;
    $('#sessionDay-' + sessionDayId).append(markup);
}

function deleteSlot(slotId) {
    if(confirm('Are you sure you want to delete this slot?')) {
        $.ajax({
            url: '/CRM/coachs/{{$coach->id}}/time-slots/' + slotId, // Modify with the correct route
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                alert('Slot deleted successfully!');
                $(`#timeSlot-${slotId}`).remove();
            },
            error: function() {
                alert('Error deleting slot.');
            }
        });
    }
}
</script>
@endsection