{{--
    Follow-Ups section — include in leads/edit.blade.php
    @include('leads.partials._followups_section')

    Requires:
      $lead — with followUps eager-loaded
--}}

<div class="card mt-6" id="followups-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-phone-alt" style="color:#4ade80;"></i> Follow-Ups
            <span style="background:#14532d44; color:#4ade80; font-size:0.75rem; padding:2px 10px; border-radius:999px; font-weight:500;">
                {{ $lead->followUps->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="#addFollowUpModal">
            <i class="fas fa-plus me-1"></i> Add Follow-Up
        </button>
    </div>

    <div style="padding:0;">
        @if ($lead->followUps->isEmpty())
            <div class="text-center py-10" style="color:#64748b;">
                <i class="fas fa-comments fa-2x mb-3 d-block" style="color:#334155;"></i>
                <p style="font-size:0.9rem;">No follow-ups yet. Click <strong style="color:#86efac;">Add Follow-Up</strong> to add 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;">Type</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Date</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Time</th>
                            <th style="padding:10px 16px; text-align:left; font-weight:600;">Feedback</th>
                            <th style="padding:10px 16px; text-align:center; font-weight:600;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($lead->followUps as $i => $fu)
                            @php
                                $typeStyle = match($fu->follow_up_type) {
                                    'Online Meeting'  => 'background:#0c4a6e44; color:#38bdf8; border:1px solid #0369a155;',
                                    'Offline Meeting' => 'background:#4a1d9644; color:#a78bfa; border:1px solid #7c3aed55;',
                                    default           => 'background:#164e6344; color:#2dd4bf; border:1px solid #0d9488555;',
                                };
                            @endphp
                            <tr style="border-top:1px solid #1e293b; {{ $i % 2 === 0 ? 'background:#1e293b;' : 'background:#172033;' }}"
                                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="{{ $typeStyle }} padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600; white-space:nowrap;">
                                        {{ $fu->follow_up_type }}
                                    </span>
                                </td>
                                <td style="padding:12px 16px;">
                                    @if($fu->follow_up_date)
                                        <span style="color:#e2e8f0; font-size:0.875rem; font-weight:500;">
                                            {{ $fu->follow_up_date->format('d M Y') }}
                                        </span>
                                    @else
                                        <span style="color:#475569;">—</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px;">
                                    @if($fu->follow_up_time)
                                        <span style="color:#60a5fa; font-size:0.875rem;">
                                            <i class="fas fa-clock" style="font-size:0.7rem;"></i>
                                            {{ \Carbon\Carbon::createFromFormat('H:i:s', $fu->follow_up_time)->format('h:i A') }}
                                        </span>
                                    @else
                                        <span style="color:#475569;">—</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#94a3b8; font-size:0.875rem; max-width:200px;">
                                    <span title="{{ $fu->feedback }}">{{ Str::limit($fu->feedback, 70) ?? '—' }}</span>
                                </td>
                                <td style="padding:12px 16px; text-align:center;">
                                    <form method="POST"
                                          action="{{ route('leads.followups.destroy', [$lead, $fu]) }}"
                                          onsubmit="return confirm('Delete this follow-up?')">
                                        @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 Follow-Up Modal ────────────────────────────────────────────────── --}}
<div class="modal fade" id="addFollowUpModal" tabindex="-1"
     aria-labelledby="addFollowUpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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="addFollowUpModalLabel" style="color:#e2e8f0; font-size:1rem; font-weight:600;">
                    <i class="fas fa-phone-alt" style="color:#4ade80; margin-right:8px;"></i>Add Follow-Up
                </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.followups.store', $lead) }}">
                @csrf
                <div class="modal-body" style="padding:24px;">

                    <div class="mb-4">
                        <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Follow Up Type <span style="color:#f87171;">*</span></label>
                        <select name="follow_up_type" required
                                class="input form-select @error('follow_up_type') is-invalid @enderror"
                                style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;">
                            <option value="">Select</option>
                            <option value="Online Meeting">Online Meeting</option>
                            <option value="Offline Meeting">Offline Meeting</option>
                            <option value="On Call Meeting">On Call Meeting</option>
                        </select>
                        @error('follow_up_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

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

                    <div class="mb-2">
                        <label class="form-label" style="color:#94a3b8; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;">Feedback</label>
                        <textarea name="feedback" rows="4" placeholder="Add feedback or notes..."
                                  class="input form-control @error('feedback') is-invalid @enderror"
                                  style="background:#0f172a; border:1px solid #334155; color:#e2e8f0;"></textarea>
                        @error('feedback')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </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-plus me-1"></i> Save Follow-Up
                    </button>
                </div>
            </form>

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