@extends('admin.layout.app')
@section('title', 'User Leads & Quiz Data')
@section('meta_description', 'List of all potential buyers captured via the car quiz.')
@section('content')


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <h1 class="admin-title mb-3">Captured Leads</h1>

                            <div class="tfcl-favorite-listing">

                                <div class="controller-sorting mb-3">
                                    <div class="count-list">
                                        <span>{{ $totalLeads }}</span> Leads Listings
                                    </div>
                                    <div class="sorting-input">
                                        <div class="label">Sort By</div>
                                        <form action="{{ route('admin.leads.index') }}" method="GET" id="sortForm">

                                            <select name="sort" class="nice-select form-control"
                                                    onchange="document.getElementById('sortForm').submit()">
                                                <option
                                                    value="newest" {{ $sort == 'newest' ? 'selected' : '' }}>
                                                    Newest
                                                </option>
                                                <option
                                                    value="oldest" {{ $sort == 'oldest' ? 'selected' : '' }}>
                                                    Oldest
                                                </option>
                                            </select>

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

                                <div class="wrap-leads">
                                    @foreach($sessions as $lead)
                                        <div class="lead-row-card mb-4 bg-white p-4 rounded border shadow-sm">
                                            <div class="row align-items-center w-100">
                                                <div class="col-md-3 border-end">
                                                    <div class="d-flex align-items-center mb-2" style="word-break: break-all;">
                                                        <i class="icon-autodeal-user text-orange me-2 fs-20"></i>
                                                        <span
                                                            class="lead-name text-dark">{{ $lead->full_name ?? 'N/A' }}</span>
                                                    </div>
                                                    <div class="lead-details text-muted mb-1" style="word-break: break-all;"><i
                                                            class="icon-autodeal-mail me-2"></i> {{ $lead->email ?? 'N/A' }}
                                                    </div>
                                                    <div class="lead-details text-muted"><i
                                                            class="icon-autodeal-phone2 me-2"></i> {{ $lead->phone ?? 'N/A' }}
                                                    </div>
                                                    <div class="lead-details text-muted"><i
                                                            class="icon-autodeal-account me-2"></i> {{ $lead->zip_code ?? 'N/A' }}
                                                    </div>
                                                </div>

                                                <div class="col-md-4 border-end">
                                                    <div class="row">
                                                        <div class="col-6">
                                                            <span class="text-uppercase-custom">Body Types</span>
                                                            <span class="lead-details text-color-3 fw-500 d-block"
                                                                  style="white-space: normal; word-wrap: break-word; line-height: 1.4;">
                {{ $lead->body_types ?? 'Any' }}
            </span>
                                                        </div>
                                                        <div class="col-6">
                                                            <span class="text-uppercase-custom">Brands</span>
                                                            <span class="lead-details text-color-3 fw-500 d-block"
                                                                  style="white-space: normal; word-wrap: break-word; line-height: 1.4;">
                {{ $lead->preferred_brands ?? 'Any' }}
            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 border-end">
                                                    <div class="lead-details mb-1">
                                                        <strong>Plan:</strong> {{ $lead->purchase_plan ?? 'N/A' }}
                                                    </div>
                                                    <div class="lead-details mb-1"><strong>Credit:</strong> <span
                                                            class="badge"
                                                            style="background-color: #fff3e0; color: #ff6600;">{{ $lead->credit_score ?? 'N/A' }}</span>
                                                    </div>
                                                    <div class="lead-details">
                                                        <strong>Timeline:</strong> {{ $lead->timeline ?? 'N/A' }}
                                                    </div>
                                                    <div class="lead-details mb-1"><strong>Trade In:</strong> <span
                                                            class="badge"
                                                            style="background-color: #fff3e0; color: #ff6600;">{{ $lead->trade_in ?? 'N/A' }}</span>
                                                    </div>
                                                    <div class="lead-details mb-1"><strong>Trade Details:</strong> <span
                                                            class="badge"
                                                            style="background-color: #fff3e0; color: #ff6600; white-space: normal; word-wrap: break-word; line-height: 1.4;">{{ $lead->trade_in_details ?? 'N/A' }}</span>
                                                    </div>
                                                </div>

                                                <div class="col-md-2 text-center">
                                                    <div class="lead-details text-muted mb-3 fw-bold">
                                                        <i class="far fa-calendar-alt text-orange"></i> {{ $lead->created_at->format('M d, Y') }}
                                                    </div>
                                                    <button
                                                        onclick="confirmDelete('{{ $lead->session_id }}', '{{ $lead->created_at }}')"
                                                        class="btn btn-sm btn-orange-outline w-100 py-2 fw-bold">
                                                        <i class="far fa-trash-alt me-1"></i> Delete Lead
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                @if ($sessions->hasPages())
                                    <div class="tfcl-pagination paging-navigation clearfix">

                                        {{-- PREVIOUS --}}
                                        @if ($sessions->onFirstPage())
                                            <span class="prev page-numbers disabled">
            <i class="far fa-angle-left"></i>
        </span>
                                        @else
                                            <a class="prev page-numbers"
                                               href="{{ $sessions->previousPageUrl() }}">
                                                <i class="far fa-angle-left"></i>
                                            </a>
                                        @endif


                                        {{-- PAGE LINKS --}}
                                        @foreach ($sessions->getUrlRange(1, $sessions->lastPage()) as $page => $url)
                                            @if ($page == $sessions->currentPage())
                                                <span
                                                    class="page-numbers current">{{ $page }}</span>
                                            @else
                                                <a class="page-numbers"
                                                   href="{{ $url }}">{{ $page }}</a>
                                            @endif
                                        @endforeach


                                        {{-- NEXT --}}
                                        @if ($sessions->hasMorePages())
                                            <a class="next page-numbers"
                                               href="{{ $sessions->nextPageUrl() }}">
                                                <i class="far fa-angle-right"></i>
                                            </a>
                                        @else
                                            <span class="next page-numbers disabled">
            <i class="far fa-angle-right"></i>
        </span>
                                        @endif

                                    </div>
                                @endif
                            </div>

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


    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <i class="fas fa-exclamation-triangle text-danger mb-3" style="font-size: 40px;"></i>
                    <p class="fs-16">Are you sure you want to delete this lead? This action cannot be undone.</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="created_at" id="delete_created_at">
                        <button type="submit" class="btn btn-danger">Delete Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



@endsection
@push('scripts')
    <script>
        function confirmDelete(sessionId, createdAt) {
            let url = "{{ route('admin.leads.destroy', ':id') }}";
            url = url.replace(':id', sessionId);

            // Form action set karo
            document.getElementById('deleteForm').action = url;
            // Hidden input mein timestamp daalo
            document.getElementById('delete_created_at').value = createdAt;

            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }
    </script>

@endpush