{{--
    Appointments section — include in leads/edit.blade.php
    @include('leads.partials._appointments_section')

    Requires:
      $lead      — with appointments.designer eager-loaded
      $designers — collection of users with designer role
--}}

<div class="card mt-6" id="appointments-section" style="background:#1e293b; border:1px solid #334155; border-radius:10px; overflow:hidden;">
    <div class="flex items-center justify-between px-5 py-4" style="border-bottom:1px solid #334155; background:#0f172a;">
        <h3 class="flex items-center gap-2 mb-0" style="color:#e2e8f0; font-size:1rem; font-weight:600;">
            <i class="fas fa-calendar-check" style="color:#60a5fa;"></i> Appointments
            <span style="background:#1e3a5f; color:#93c5fd; font-size:0.75rem; padding:2px 10px; border-radius:999px; font-weight:500;">
                {{ $lead->appointments->count() }}
            </span>
        </h3>
        <button type="button"
                class="btn btn-primary"
                style="font-size:0.8rem; padding:6px 14px;"
                data-bs-toggle="modal" data-bs-target="#addAppointmentModal">
            <i class="fas fa-plus me-1"></i> Add Appointment
        </button>
    </div>

    <div style="padding:0;">
        @if ($lead->appointments->isEmpty())
            <div class="text-center py-10" style="color:#64748b;">
                <i class="fas fa-calendar-times fa-2x mb-3 d-block" style="color:#334155;"></i>
                <p style="font-size:0.9rem;">No appointments yet. Click <strong style="color:#93c5fd;">Add Appointment</strong> to schedule one.</p>
            </div>
        @else
            <div style="overflow-x:auto;">
                <table style="width:100%; border-collapse:collapse;">
                    <thead>
                        <tr style="background:#0f172a; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:#64748b;">
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">#</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Appt. With</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Date &amp; Time</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Designer</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Fee</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Location</th>
                            <th style="padding:10px 16px; text-align:center; font-weight:600;">Both Avail.</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Note</th>
                            <th style="padding:10px 16px; text-align:center; font-weight:600;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($lead->appointments as $i => $appt)
                            <tr style="border-top:1px solid #1e293b; {{ $i % 2 === 0 ? 'background:#1e293b;' : 'background:#172033;' }} transition:background 0.15s;"
                                onmouseover="this.style.background='#263348'" onmouseout="this.style.background='{{ $i % 2 === 0 ? '#1e293b' : '#172033' }}'">
                                <td style="padding:12px 16px; color:#94a3b8; font-size:0.8rem;">{{ $i + 1 }}</td>
                                <td style="padding:12px 16px;">
                                    <span style="color:#e2e8f0; font-size:0.875rem; font-weight:500;">{{ $appt->appointment_with ?? '—' }}</span>
                                </td>
                                <td style="padding:12px 16px;">
                                    @if($appt->appointment_date)
                                        <div style="color:#e2e8f0; font-size:0.875rem; font-weight:500;">
                                            {{ $appt->appointment_date->format('d M Y') }}
                                        </div>
                                        @if ($appt->appointment_time)
                                            <div style="color:#60a5fa; font-size:0.75rem; margin-top:2px;">
                                                <i class="fas fa-clock" style="font-size:0.7rem;"></i>
                                                {{ \Carbon\Carbon::createFromFormat('H:i:s', $appt->appointment_time)->format('h:i A') }}
                                            </div>
                                        @endif
                                    @else
                                        <span style="color:#475569;">—</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#e2e8f0; font-size:0.875rem;">
                                    {{ $appt->designer?->name ?? '—' }}
                                </td>
                                <td style="padding:12px 16px;">
                                    @if($appt->appointment_fee)
                                        <span style="color:#4ade80; font-size:0.875rem; font-weight:600;">
                                            ${{ number_format($appt->appointment_fee, 2) }}
                                        </span>
                                    @else
                                        <span style="color:#475569;">—</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#cbd5e1; font-size:0.875rem;">
                                    {{ $appt->appointment_location ?? '—' }}
                                </td>
                                <td style="padding:12px 16px; text-align:center;">
                                    @if($appt->both_available === 'Yes')
                                        <span style="background:#14532d44; color:#4ade80; border:1px solid #16a34a55; padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600;">
                                            <i class="fas fa-check" style="font-size:0.65rem;"></i> Yes
                                        </span>
                                    @else
                                        <span style="background:#7f1d1d44; color:#f87171; border:1px solid #dc262655; padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600;">
                                            <i class="fas fa-times" style="font-size:0.65rem;"></i> No
                                        </span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#94a3b8; font-size:0.8rem; max-width:160px;">
                                    <span title="{{ $appt->note }}">{{ Str::limit($appt->note, 50) ?? '—' }}</span>
                                </td>
                                <td style="padding:12px 16px; text-align:center;">
                                    <form method="POST"
                                          action="{{ route('leads.appointments.destroy', [$lead, $appt]) }}"
                                          onsubmit="return confirm('Delete this appointment?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                style="background:#7f1d1d33; color:#f87171; border:1px solid #dc262644; padding:5px 10px; border-radius:6px; font-size:0.75rem; cursor:pointer; transition:background 0.15s;"
                                                onmouseover="this.style.background='#7f1d1d66'" onmouseout="this.style.background='#7f1d1d33'">
                                            <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" style="background:#1e293b; border:1px solid #334155; border-radius:12px;">

            <div class="modal-header" style="background:#0f172a; border-bottom:1px solid #334155; border-radius:12px 12px 0 0;">
                <h5 class="modal-title" id="addAppointmentModalLabel" style="color:#e2e8f0; font-size:1rem; font-weight:600;">
                    <i class="fas fa-calendar-plus" style="color:#60a5fa; margin-right:8px;"></i>Add Appointment
                </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" style="padding:24px;">
                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Appointment With</label>
                            <select name="appointment_with"
                                    class="input form-select @error('appointment_with') is-invalid @enderror"
                                    style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                                <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>

                        <div class="col-md-6">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Both Mr./Mrs. Available <span style="color:#f87171;">*</span></label>
                            <select name="both_available"
                                    class="input form-select @error('both_available') is-invalid @enderror"
                                    style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                            @error('both_available')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Appointment Date</label>
                            <input type="date" name="appointment_date"
                                   class="input form-control @error('appointment_date') is-invalid @enderror"
                                   style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                            @error('appointment_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Appointment Time</label>
                            <input type="time" name="appointment_time"
                                   class="input form-control @error('appointment_time') is-invalid @enderror"
                                   style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                            @error('appointment_time')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Designer</label>
                            <select name="designer_id"
                                    class="input form-select @error('designer_id') is-invalid @enderror"
                                    style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                                <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>

                        <div class="col-md-6">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">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"
                                   style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                            @error('appointment_fee')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Appointment Location</label>
                            <input type="text" name="appointment_location" placeholder="Location"
                                   class="input form-control @error('appointment_location') is-invalid @enderror"
                                   style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                            @error('appointment_location')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Note</label>
                            <textarea name="note" rows="3" placeholder="Additional notes..."
                                      class="input form-control @error('note') is-invalid @enderror"
                                      style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;"></textarea>
                            @error('note')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>
                </div>

                <div class="modal-footer" style="border-top:1px solid #334155; padding:16px 24px; background:#0f172a; border-radius:0 0 12px 12px;">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-calendar-check me-1"></i> Save Appointment
                    </button>
                </div>
            </form>

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