@extends('garage.layouts.app')

@section('title', 'Work Schedule')

@section('content')
<div class="d-flex flex-column gap-4">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2 class="h4 mb-1 fw-bold">Work Schedule</h2>
            <p class="text-muted mb-0">Manage employee work schedules and availability</p>
        </div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createScheduleModal">
            <i class="bi bi-plus-lg me-2"></i>New Schedule
        </button>
    </div>

    <!-- Schedule View Toggle -->
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="btn-group" role="group">
                <input type="radio" class="btn-check" name="viewType" id="viewWeekly" checked>
                <label class="btn btn-outline-primary" for="viewWeekly">
                    <i class="bi bi-calendar-week me-2"></i>Weekly View
                </label>
                <input type="radio" class="btn-check" name="viewType" id="viewDaily">
                <label class="btn btn-outline-primary" for="viewDaily">
                    <i class="bi bi-calendar-day me-2"></i>Daily View
                </label>
                <input type="radio" class="btn-check" name="viewType" id="viewList">
                <label class="btn btn-outline-primary" for="viewList">
                    <i class="bi bi-list-ul me-2"></i>List View
                </label>
            </div>
        </div>
    </div>

    <!-- Weekly Schedule View -->
    <div id="weeklyView" class="schedule-view">
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 150px;">Employee</th>
                                <th>Monday</th>
                                <th>Tuesday</th>
                                <th>Wednesday</th>
                                <th>Thursday</th>
                                <th>Friday</th>
                                <th>Saturday</th>
                                <th>Sunday</th>
                            </tr>
                        </thead>
                        <tbody id="weeklyScheduleBody">
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">
                                    <i class="bi bi-calendar-x fs-3 d-block mb-2"></i>
                                    No schedules found
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Daily Schedule View -->
    <div id="dailyView" class="schedule-view d-none">
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Daily Schedule</h5>
                    <div class="btn-group">
                        <button class="btn btn-sm btn-outline-secondary" onclick="changeDate(-1)">
                            <i class="bi bi-chevron-left"></i>
                        </button>
                        <input type="date" class="form-control form-control-sm" id="dailyDatePicker" style="width: 150px;">
                        <button class="btn btn-sm btn-outline-secondary" onclick="changeDate(1)">
                            <i class="bi bi-chevron-right"></i>
                        </button>
                    </div>
                </div>
                <div id="dailyScheduleBody">
                    <p class="text-center text-muted">No schedules for selected date</p>
                </div>
            </div>
        </div>
    </div>

    <!-- List View -->
    <div id="listView" class="schedule-view d-none">
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Employee</th>
                                <th>Day/Date</th>
                                <th>Time</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Max Appointments</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="listScheduleBody">
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <i class="bi bi-calendar-x fs-3 d-block mb-2"></i>
                                    No schedules found
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Schedule Modal -->
<div class="modal fade" id="createScheduleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Work Schedule</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="createScheduleForm">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Employee Name</label>
                            <input type="text" class="form-control" name="employee_name">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Employee Email</label>
                            <input type="email" class="form-control" name="employee_email">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Employee Phone</label>
                            <input type="tel" class="form-control" name="employee_phone">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Schedule Type</label>
                            <select class="form-select" name="is_recurring" id="scheduleType">
                                <option value="1">Recurring (Weekly)</option>
                                <option value="0">One-time (Specific Date)</option>
                            </select>
                        </div>
                        <div class="col-md-6" id="dayOfWeekField">
                            <label class="form-label">Day of Week <span class="text-danger">*</span></label>
                            <select class="form-select" name="day_of_week" required>
                                <option value="">Select Day</option>
                                <option value="monday">Monday</option>
                                <option value="tuesday">Tuesday</option>
                                <option value="wednesday">Wednesday</option>
                                <option value="thursday">Thursday</option>
                                <option value="friday">Friday</option>
                                <option value="saturday">Saturday</option>
                                <option value="sunday">Sunday</option>
                            </select>
                        </div>
                        <div class="col-md-6 d-none" id="specificDateField">
                            <label class="form-label">Specific Date</label>
                            <input type="date" class="form-control" name="specific_date">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Start Time <span class="text-danger">*</span></label>
                            <input type="time" class="form-control" name="start_time" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Time <span class="text-danger">*</span></label>
                            <input type="time" class="form-control" name="end_time" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="on_leave">On Leave</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Max Appointments per Slot</label>
                            <input type="number" class="form-control" name="max_appointments_per_slot" value="1" min="1">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" rows="2" name="notes"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Schedule</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Toggle schedule type fields
document.getElementById('scheduleType').addEventListener('change', function() {
    const isRecurring = this.value === '1';
    document.getElementById('dayOfWeekField').classList.toggle('d-none', !isRecurring);
    document.getElementById('specificDateField').classList.toggle('d-none', isRecurring);
    
    const dayOfWeekSelect = document.querySelector('select[name="day_of_week"]');
    const specificDateInput = document.querySelector('input[name="specific_date"]');
    
    if (isRecurring) {
        dayOfWeekSelect.required = true;
        specificDateInput.required = false;
    } else {
        dayOfWeekSelect.required = false;
        specificDateInput.required = true;
    }
});

// View type toggle
document.querySelectorAll('input[name="viewType"]').forEach(radio => {
    radio.addEventListener('change', function() {
        document.querySelectorAll('.schedule-view').forEach(view => view.classList.add('d-none'));
        
        if (this.id === 'viewWeekly') {
            document.getElementById('weeklyView').classList.remove('d-none');
        } else if (this.id === 'viewDaily') {
            document.getElementById('dailyView').classList.remove('d-none');
        } else if (this.id === 'viewList') {
            document.getElementById('listView').classList.remove('d-none');
        }
    });
});

function changeDate(days) {
    const dateInput = document.getElementById('dailyDatePicker');
    const currentDate = new Date(dateInput.value || new Date());
    currentDate.setDate(currentDate.getDate() + days);
    dateInput.value = currentDate.toISOString().split('T')[0];
    // TODO: Load schedule for new date
}

document.getElementById('createScheduleForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // TODO: Implement form submission
    alert('Schedule creation will be implemented with backend integration');
});
</script>
@endsection