@extends('layouts.app')

@section('title', 'Appointments')
@section('subtitle', 'Schedule calls and meetings with automated follow-up workflows')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="text-body-secondary">Internal scheduling with signed confirmation links.</div>
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#appointmentCanvas">New appointment</button>
    </div>

    <div id="appointmentsTableWrapper">@include('appointments.table')</div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="appointmentCanvas">
        <div class="offcanvas-header">
            <h2 class="offcanvas-title h5">New appointment</h2>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <form method="POST" action="{{ route('appointments.store') }}" class="needs-validation" novalidate data-async-form>
                @csrf
                <div class="mb-3">
                    <label class="form-label">Client</label>
                    <select class="form-select" name="client_id" required>
                        @foreach ($clients as $client)
                            <option value="{{ $client->id }}">{{ $client->display_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3"><input class="form-control" name="source" value="manual" placeholder="Source"></div>
                <div class="mb-3"><input class="form-control" name="status" value="pending" placeholder="Status"></div>
                <div class="mb-3"><input class="form-control" type="datetime-local" name="starts_at"></div>
                <div class="mb-3"><input class="form-control" type="datetime-local" name="ends_at"></div>
                <div class="mb-3"><input class="form-control" name="location" placeholder="Location"></div>
                <div class="mb-3"><textarea class="form-control" name="notes" rows="4" placeholder="Notes"></textarea></div>
                <button class="btn btn-primary w-100">Save appointment</button>
            </form>
        </div>
    </div>
@endsection