@extends('admin.layouts.dashboard')
@section('title', 'Create Appointment')
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="main-heading mb-0">Create Appointment</h3>
            <a href="{{ route('admin.appointment') }}" class="btn btn-secondary btn-sm">← Back</a>
        </div>

        @if($errors->any())
            <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
        @endif

        <div class="card shadow-sm">
            <div class="card-body p-4">
                <form method="POST" action="{{ route('admin.appointments.store') }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Date <span class="text-danger">*</span></label>
                            <input type="date" name="date" id="appointmentDate" class="form-control @error('date') is-invalid @enderror" value="{{ old('date') }}" required>
                            @error('date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Time <span class="text-danger">*</span></label>
                            <select name="time" id="timeSelect" class="form-control @error('time') is-invalid @enderror" required>
                                <option value="">-- Select date first --</option>
                            </select>
                            <small id="slotsMsg" class="text-muted"></small>
                            @error('time')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Price ($)</label>
                            <input type="number" name="price" class="form-control" value="{{ old('price', 50) }}" min="0" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Payment Status</label>
                            <select name="payment_status" class="form-control">
                                <option value="unpaid">Unpaid</option>
                                <option value="paid">Paid</option>
                            </select>
                        </div>
                        <div class="col-12"><hr><h6 class="fw-bold text-muted">Customer Information</h6></div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">First Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Last Name <span class="text-danger">*</span></label>
                            <input type="text" name="last_name" class="form-control @error('last_name') is-invalid @enderror" value="{{ old('last_name') }}" required>
                            @error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Phone <span class="text-danger">*</span></label>
                            <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}" required>
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">City</label>
                            <input type="text" name="city" class="form-control" value="{{ old('city') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Postal Code</label>
                            <input type="text" name="postal_code" class="form-control" value="{{ old('postal_code') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold">Notes</label>
                            <textarea name="remarks" class="form-control" rows="2">{{ old('remarks') }}</textarea>
                        </div>
                        <div class="col-12 mt-2">
                            <button type="submit" class="btn btn-dark px-4">Create Appointment</button>
                            <a href="{{ route('admin.appointment') }}" class="btn btn-secondary ms-2">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
document.getElementById('appointmentDate').addEventListener('change', function () {
    const date = this.value;
    const select = document.getElementById('timeSelect');
    const msg = document.getElementById('slotsMsg');

    if (!date) return;

    select.innerHTML = '<option value="">Loading slots...</option>';
    msg.textContent = '';

    fetch(`/appointments/available-times?date=${date}&category=Others`)
        .then(res => res.json())
        .then(data => {
            const slots = data.availableSlots || [];
            select.innerHTML = '';

            if (slots.length === 0) {
                select.innerHTML = '<option value="">No slots available</option>';
                msg.textContent = 'No available slots for this date.';
                return;
            }

            select.innerHTML = '<option value="">-- Select Time --</option>';
            slots.forEach(slot => {
                const opt = document.createElement('option');
                opt.value = slot;
                opt.textContent = slot;
                select.appendChild(opt);
            });

            msg.textContent = slots.length + ' slot(s) available';
        })
        .catch(() => {
            select.innerHTML = '<option value="">Error loading slots</option>';
        });
});
</script>
@endpush

@endsection