@extends('layout.master')

@section('title', 'Lead Details')

@section('content')
    @php
        $statusColors = [
            'pending' => 'warning',
            'done' => 'success',
            'need further follow up' => 'info',
        ];
        $leadTypes = \App\Models\Lead::getLeadTypes();
    @endphp
    <!-- Add Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="container">
                    <h4 class="mb-4 mt-4">Lead Details</h4>

                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <h4 style="color: #005f73">Lead Code #({{ $lead->lead_number ?? 'N/A' }})</h4>
                                <div class="col-6">
                                    <p><strong>Client:</strong> {{ $lead->client->name ?? ($lead->client_name ?? 'N/A') }}
                                    </p>
                                    <p><strong>Client Email:</strong>
                                        {{ $lead->client->email ?? ($lead->client_email ?? 'N/A') }}</p>
                                    <p><strong>Client Phone:</strong>
                                        {{ $lead->client->phone ?? ($lead->client_phone ?? 'N/A') }}</p>
                                    <p><strong>Company:</strong> {{ $lead->company_name ?? 'N/A' }}</p>
                                    {{-- <p><strong>Service:</strong> {{ $lead->service->name ?? 'N/A' }}</p> --}}
                                    <p><strong>Lead Type:</strong> {{ $leadTypes[$lead->lead_type] ?? 'N/A' }}</p>
                                    <p><strong>Visa Qty:</strong> {{ $lead->visa_qty ?? 'N/A' }}</p>
                                    <p><strong>Assigned To:</strong> {{ $lead->user->name ?? 'Unassigned' }}</p>
                                </div>
                                <div class="col-6">
                                    <p><strong>Source:</strong> {{ $lead->source->name ?? 'N/A' }}</p>
                                    <p><strong>Method of Contact:</strong>
                                        {{ $lead->mediumOfContact->name ?? 'N/A' }}</p>
                                    <p><strong>Status:</strong>
                                        <span class="badge bg-{{ $statusColors[$lead->status] ?? 'secondary' }}">
                                            {{ ucfirst($lead->status ?? 'N/A') }}
                                        </span>
                                    </p>
                                </div>
                                <div class="col-12">
                                    <p><strong>Description:</strong> {{ $lead->description ?? 'N/A' }}</p>
                                    <p><strong>Created At:</strong>
                                        {{ $lead->created_at ? \Carbon\Carbon::parse($lead->created_at)->format('d M Y, h:i A') : 'N/A' }}
                                    </p>
                                </div>
                            </div>

                            <nav class="mt-4">
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <button class="nav-link active" id="nav-followups-tab" data-bs-toggle="tab"
                                        data-bs-target="#nav-followups" type="button" role="tab"
                                        aria-controls="nav-followups" aria-selected="true">Follow-ups</button>
                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-followups" role="tabpanel"
                                    aria-labelledby="nav-followups-tab">
                                    <div class="d-flex justify-content-between align-items-center mb-4">
                                        <h4 class="mt-4" style="color: #005f73">Follow-ups:</h4>
                                        <button data-bs-toggle="modal" data-bs-target="#followUpModal-{{ $lead->id }}"
                                            class="btn btn-success btn-sm">Create Follow-up</button>
                                    </div>
                                    <!-- Follow-up Creation Modal -->
                                    <div class="modal fade" id="followUpModal-{{ $lead->id }}" tabindex="-1"
                                        aria-labelledby="followUpModalLabel-{{ $lead->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <form method="POST" action="{{ route('followUp.store', $lead->id) }}">
                                                @csrf
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title"
                                                            id="followUpModalLabel-{{ $lead->id }}">
                                                            Create Follow-up for
                                                            {{ $lead->client->name ?? ($lead->client_name ?? 'Unknown Client') }}
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="mb-3">
                                                            <label for="subject" class="form-label">Subject</label>
                                                            <input type="text" id="subject" name="subject"
                                                                class="form-control" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="create_date" class="form-label">Follow-up
                                                                Date</label>
                                                            <input type="text" id="create_date" name="create_date"
                                                                class="form-control" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="reason" class="form-label">Reason</label>
                                                            <input type="text" id="reason" name="reason"
                                                                class="form-control" placeholder="Enter reason">
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-primary">Create
                                                            Follow-up</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <!-- Follow-ups Accordion -->
                                    <div class="accordion" id="followUpAccordion">
                                        @forelse ($lead->followUps as $followUp)
                                            <div class="accordion-item mb-2">
                                                <h2 class="accordion-header" id="heading{{ $followUp->id }}">
                                                    <button class="accordion-button" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse{{ $followUp->id }}" aria-expanded="true"
                                                        aria-controls="collapse{{ $followUp->id }}">
                                                        Follow-up: {{ $followUp->reason ?? 'N/A' }}
                                                        ({{ $followUp->create_date ? \Carbon\Carbon::parse($followUp->create_date)->format('d M Y, h:i A') : '-' }})
                                                    </button>
                                                </h2>
                                                <div id="collapse{{ $followUp->id }}" class="accordion-collapse collapse"
                                                    aria-labelledby="heading{{ $followUp->id }}"
                                                    data-bs-parent="#followUpAccordion">
                                                    <div class="accordion-body">
                                                        <table class="table table-bordered">
                                                            <tr>
                                                                <th>Customer Name</th>
                                                                <td>{{ $followUp->lead->client->name ?? ($followUp->lead->client_name ?? 'N/A') }}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th>Lead Code</th>
                                                                <td>{{ $followUp->lead->lead_number ?? 'N/A' }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th>Create Date</th>
                                                                <td>{{ $followUp->create_date ? \Carbon\Carbon::parse($followUp->create_date)->format('d M Y, h:i A') : '-' }}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th>Reason</th>
                                                                <td>{{ $followUp->reason ?? '-' }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th>Status</th>
                                                                <td>
                                                                    <span
                                                                        class="badge bg-{{ $statusColors[$followUp->status] ?? 'secondary' }}">
                                                                        {{ ucfirst($followUp->status) }}
                                                                    </span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th>Remarks</th>
                                                                <td>{{ $followUp->remarks ?? '-' }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th>Take Date</th>
                                                                <td>{{ $followUp->taken_at ? \Carbon\Carbon::parse($followUp->taken_at)->format('d M Y, h:i A') : '-' }}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th>Due Date</th>
                                                                <td>{{ $followUp->due_date ? \Carbon\Carbon::parse($followUp->due_date)->format('d M Y, h:i A') : '-' }}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th>Action</th>
                                                                <td>
                                                                    @if ($followUp->status != 'done')
                                                                        <button type="button"
                                                                            class="btn btn-success btn-sm"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#takeModal{{ $followUp->id }}">Take</button>
                                                                    @else
                                                                        <span
                                                                            class="badge bg-primary text-white">Taken</span>
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Take Follow-up Modal -->
                                            <div class="modal fade" id="takeModal{{ $followUp->id }}" tabindex="-1"
                                                aria-labelledby="takeModalLabel{{ $followUp->id }}" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <form method="POST"
                                                        action="{{ route('followUp.take', $followUp->id) }}">
                                                        @csrf
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Take Follow-up</h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="mb-3">
                                                                    <label for="remarks-{{ $followUp->id }}"
                                                                        class="form-label">Remarks</label>
                                                                    <textarea id="remarks-{{ $followUp->id }}" name="remarks" class="form-control" rows="3"></textarea>
                                                                </div>
                                                                <div class="mb-3">
                                                                    <label for="status-{{ $followUp->id }}"
                                                                        class="form-label">Select
                                                                        Status</label>
                                                                    <select name="status"
                                                                        id="status-{{ $followUp->id }}"
                                                                        class="form-select" required>
                                                                        <option value="" selected disabled>Select
                                                                            Status</option>
                                                                        @foreach (\App\Models\FollowUp::getStatuses() as $key => $value)
                                                                            <option value="{{ $key }}">
                                                                                {{ $value }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <div class="mb-3">
                                                                    <label for="taken_at-{{ $followUp->id }}"
                                                                        class="form-label">Take
                                                                        Date</label>
                                                                    <input type="text"
                                                                        id="taken_at-{{ $followUp->id }}" name="taken_at"
                                                                        class="form-control flatpickr-taken-at"
                                                                        value="{{ \Carbon\Carbon::now('Asia/Karachi')->format('d M Y, h:i A') }}">
                                                                </div>
                                                                <div class="mb-3">
                                                                    <label for="due_date-{{ $followUp->id }}"
                                                                        class="form-label">Due
                                                                        Date</label>
                                                                    <input type="text"
                                                                        id="due_date-{{ $followUp->id }}" name="due_date"
                                                                        class="form-control flatpickr-due-date">
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="submit"
                                                                    class="btn btn-primary">Submit</button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        @empty
                                            <p class="text-center text-muted">No follow-ups available.</p>
                                        @endforelse
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 d-flex align-items-center gap-2 flex-wrap">
                                <a href="{{ route('lead.index') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-arrow-left me-1"></i> Back to Lead
                                </a>
                                <a href="{{ route('lead.edit', $lead->id) }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-edit me-1"></i> Go To Edit
                                </a>

                                @if (!$lead->client_id)
                                    <form action="{{ route('lead.convert', $lead->id) }}" method="POST"
                                        class="d-inline" onsubmit="return confirm('Convert this lead into a Client?')">
                                        @csrf
                                        <button type="submit" class="btn btn-warning btn-sm">
                                            <i class="fas fa-user-plus me-1"></i> Convert to Client
                                        </button>
                                    </form>
                                @else
                                    <span class="badge bg-success text-white px-2 py-2" style="font-size: 0.875rem;">
                                        <i class="fas fa-check-circle me-1"></i> Converted
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        flatpickr("#create_date", {
            enableTime: true,
            dateFormat: "d M Y, h:i K",
            defaultDate: "{{ \Carbon\Carbon::now('Asia/Karachi')->format('d M Y, h:i K') }}",
            time_24hr: false
        });

        document.querySelectorAll('.flatpickr-taken-at').forEach(function(el) {
            flatpickr(el, {
                enableTime: true,
                dateFormat: "d M Y, h:i K",
                defaultDate: "{{ \Carbon\Carbon::now('Asia/Karachi')->format('d M Y, h:i K') }}",
                time_24hr: false
            });
        });

        document.querySelectorAll('.flatpickr-due-date').forEach(function(el) {
            flatpickr(el, {
                enableTime: true,
                dateFormat: "d M Y, h:i K",
                time_24hr: false
            });
        });
    </script>
@endsection