{{--
    ══════════════════════════════════════════════════════════════
    Appointments section — include in leads/edit.blade.php
    Place OUTSIDE your main lead <form> tag, near the bottom.

    @include('leads.partials._appointments_section')

    Requires (already available on edit page):
      $lead      — with appointments.designer eager-loaded
      $designers — collection of users with designer role
    ══════════════════════════════════════════════════════════════
--}}

<div class="card mt-4" id="appointments-section">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="mb-0">
            <i class="fas fa-calendar-check me-2"></i>Appointments
        </h5>
        <!-- <button type="button" class="btn btn-sm btn-primary"
                data-bs-toggle="modal" data-bs-target="#addAppointmentModal">
            <i class="fas fa-plus me-1"></i> Add Appointment
        </button> -->
    </div>

    <div class="card-body p-0">
        @if ($lead->appointments->isEmpty())
            <div class="text-center py-4 text-muted">
                <i class="fas fa-calendar-times fa-2x mb-2 d-block"></i>
                No appointments yet. Click <strong>Add Appointment</strong> to schedule one.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover mb-0 w-full">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Appt. With</th>
                            <th>Date &amp; Time</th>
                            <th>Designer</th>
                            <th>Fee ($)</th>
                            <th>Location</th>
                            <th>Both Available</th>
                            <th>Note</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($lead->appointments as $i => $appt)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td>{{ $appt->appointment_with ?? '—' }}</td>
                                <td>
                                    {{ $appt->appointment_date
                                        ? $appt->appointment_date->format('d-m-Y') : '—' }}
                                    @if ($appt->appointment_time)
                                        <br>
                                        <small class="text-muted">
                                            {{ \Carbon\Carbon::createFromFormat('H:i:s', $appt->appointment_time)->format('h:i A') }}
                                        </small>
                                    @endif
                                </td>
                                <td>{{ $appt->designer?->name ?? '—' }}</td>
                                <td>{{ $appt->appointment_fee
                                        ? number_format($appt->appointment_fee, 2) : '—' }}</td>
                                <td>{{ $appt->appointment_location ?? '—' }}</td>
                                <td>
                                    <span class="badge {{ $appt->both_available === 'Yes'
                                        ? 'bg-success' : 'bg-warning text-dark' }}">
                                        {{ $appt->both_available }}
                                    </span>
                                </td>
                                <td>{{ Str::limit($appt->note, 40) ?? '—' }}</td>
                                <td class="text-center">
                                    <form method="POST"
                                          action="{{ route('leads.appointments.destroy', [$lead, $appt]) }}"
                                          onsubmit="return confirm('Delete this appointment?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>

{{-- ── Add Appointment Modal ──────────────────────────────────── --}}
<div class="modal fade" id="addAppointmentModal" tabindex="-1"
     aria-labelledby="addAppointmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title" id="addAppointmentModalLabel"></h5>
                <button type="button" class="btn-close btn-close-white"
                        data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="POST" action="{{ route('leads.appointments.store', $lead) }}">
                @csrf
                <div class="modal-body">
                    <div class="row">

                        {{-- Appointment With --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Appointment With</label>
                            <select name="appointment_with"
                                    class="input form-select select2 @error('appointment_with') is-invalid @enderror">
                                <option value="">Select Here</option>
                                <option value="Client">Client</option>
                                <option value="Designer">Designer</option>
                                <option value="Both">Both</option>
                            </select>
                            @error('appointment_with')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Both Mr./Mrs. Available --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Both Mr./Mrs. Available</label>
                            <select name="both_available"
                                    class="input form-select @error('both_available') is-invalid @enderror">
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                            @error('both_available')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Appointment Date --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Appointment Date</label>
                            <input type="date" name="appointment_date"
                                   class="input form-control @error('appointment_date') is-invalid @enderror">
                            @error('appointment_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Appointment Time --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Appointment Time</label>
                            <input type="time" name="appointment_time"
                                   class="input form-control @error('appointment_time') is-invalid @enderror">
                            @error('appointment_time')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Designer — pre-populated from lead --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Designer</label>
                            <select name="designer_id"
                                    class="input form-select select2 @error('designer_id') is-invalid @enderror">
                                <option value="">Select Here</option>
                                @foreach ($designers as $designer)
                                    <option value="{{ $designer->id }}"
                                        {{ $lead->designer_id == $designer->id ? 'selected' : '' }}>
                                        {{ $designer->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('designer_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Appointment Fee --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Appointment Fee ($)</label>
                            <input type="number" name="appointment_fee" value="70"
                                   min="0" step="0.01"
                                   class="input form-control @error('appointment_fee') is-invalid @enderror">
                            @error('appointment_fee')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Appointment Location --}}
                        <div class="col-12 mb-3">
                            <label class="form-label">Appointment Location</label>
                            <input type="text" name="appointment_location" placeholder="Location"
                                   class="input form-control @error('appointment_location') is-invalid @enderror">
                            @error('appointment_location')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Note --}}
                        <div class="col-12 mb-3">
                            <label class="form-label">Note</label>
                            <textarea name="note" rows="3" placeholder="Note"
                                      class="input form-control @error('note') is-invalid @enderror"></textarea>
                            @error('note')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>
                </div>

                <div class="modal-footer justify-content-center border-0 pt-0">
                    <button type="submit"
                            class="btn btn-primary flex-1 justify-center">
                        ADD APPOINTMENT
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>