@extends('admin.layout.app')
@section('title', 'Seller Listings ')
@section('meta_description', 'List of all potential buyers captured via the car quiz.')
@section('content')
    <style>
        .bg-soft-primary {
            background-color: #fef1e6 !important;
        }

        .box-car-list {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: 1px solid #eee;
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
        }

        .box-car-list:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            border-color: #ffaa33;
        }

        .status-badge {
            padding: 4px 10px;
            border-radius: 50px;
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .status-active {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .status-pending {
            background: #fff3e0;
            color:#1471C7;
        }

        .status-blocked {
            background: red;
            color: white;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            display: block;
            font-weight: 700;
            color: #222;
            font-size: 16px;
        }

        .stat-label {
            display: block;
            font-size: 11px;
            color: #777;
            text-transform: uppercase;
        }

        .action-area {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #ddd;
        }

        .btn-action {
            flex: 1;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            transition: 0.2s;
            cursor: pointer;
        }

        .btn-view {
            background: #222;
            color: #fff !important;
        }

        .btn-billing {
            background: darkgray;
            color: #fff !important;
        }

        .btn-inquirey {
            background: forestgreen;
            color: #fff !important;
        }

        .btn-view:hover {
            background: #444;
        }

        .btn-delete {
            background: #fff1f1;
            color: #d9534f !important;
            border: 1px solid #ffdada;
        }

        .btn-delete:hover {
            background: #d9534f;
            color: #fff !important;
        }

        .verified-icon {
            color: #007bff;
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
    <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">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h1 class="admin-title m-0">Sellers</h1>
                                <div class="controller-sorting d-flex align-items-center">
                                    <div class="count-list me-3">
                                        <span class="fw-bold text-orange">{{ $totalLeads }}</span> Sellers
                                    </div>
                                    <form action="{{ url()->current() }}" method="GET" id="sortForm"
                                          class="d-flex align-items-center">
                                        <label class="me-2 mb-0 text-muted" style="font-size: 13px;">Sort:</label>
                                        <select name="sort" class="form-control form-control-sm"
                                                onchange="this.form.submit()"
                                                style="border-radius: 6px; min-width: 120px;">
                                            <option value="newest" {{ $sort == 'newest' ? 'selected' : '' }}>Newest
                                                First
                                            </option>
                                            <option value="oldest" {{ $sort == 'oldest' ? 'selected' : '' }}>Oldest
                                                First
                                            </option>
                                        </select>
                                    </form>
                                </div>
                            </div>

                            <div class="row">
                                @foreach($sessions as $lead)
                                    <div class="col-xl-4 col-lg-6 col-md-6 mb-4">
                                        <div class="box-car-list p-4">
                                            <div class="d-flex justify-content-between align-items-start mb-3">
                                                @if($lead->isVerified())
                                                    <span class="status-badge status-active">Verified</span>
                                                @elseif($lead->isBlocked())
                                                    <span class="status-badge status-blocked">Blocked</span>
                                                @else
                                                    <span class="status-badge status-pending">Pending</span>
                                                @endif
                                                <span class="text-muted small">
                                                    <i class="far fa-calendar-alt me-1"></i> {{ $lead->created_at->format('M d, Y') }}
                                                </span>
                                            </div>

                                            <div class="user-info mb-3">
                                                <h5 class="mb-1 fw-bold d-flex align-items-center">
                                                    {{ $lead->name ?? 'Unknown Seller' }}
                                                    @if($lead->email_verified_at)
                                                        <i class="fas fa-check-circle verified-icon"
                                                           title="Verified Seller"></i>
                                                    @endif
                                                </h5>
                                                <div class="text-muted small mb-1"><i
                                                        class="icon-autodeal-mail me-2"></i>{{ $lead->email }}</div>
                                                <div class="text-muted small"><i
                                                        class="icon-autodeal-phone2 me-2"></i>{{ $lead->phone ?? 'No Phone' }}
                                                </div>
                                            </div>
                                            @if($lead->isVerified())
                                                <div class="stats-grid">
                                                    <div class="stat-item">
                                                            <span
                                                                class="stat-value">{{ $lead->listings()->count() }}</span>
                                                        <span class="stat-label">Total</span>
                                                    </div>
                                                    <div class="stat-item">
                                                        <span
                                                            class="stat-value text-warning">{{ $lead->listings()->where('status','draft')->count() }}</span>
                                                        <span class="stat-label">Drafts</span>
                                                    </div>
                                                    <div class="stat-item">
                                                        <span
                                                            class="stat-value text-success">{{ $lead->listings()->where('status','active')->count() }}</span>
                                                        <span class="stat-label">Active</span>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="action-area">
                                                {{-- Always visible --}}
                                                <button onclick="confirmDelete('{{ $lead->id }}')"
                                                        class="btn-action btn-delete">
                                                    <i class="far fa-trash-alt"></i>
                                                </button>

                                                {{-- Only after verified --}}
                                                @if($lead->isVerified())
                                                    <a href="{{ route('admin.sellers.listing', $lead->id) }}"
                                                       class="btn-action btn-view">
                                                        <i class="far fa-eye me-1"></i>
                                                    </a>

                                                    <a href="{{ route('admin.sellers.billing', ['slug'=>$lead->name,'id'=>$lead->id]) }}"
                                                       class="btn-action btn-billing">
                                                        <i class="far fa-file-invoice me-1"></i>
                                                    </a>

                                                    @php
                                                        $inquiryCount = \App\Models\AvailabilityInquiries::whereHas('listing', function ($q) use ($lead) {
                                                            $q->where('user_id', $lead->id);
                                                        })->count();
                                                    @endphp

                                                    <a href="{{ route('admin.sellers.inquiries', $lead->id) }}"
                                                       class="btn-action btn-inquirey"
                                                       style="position: relative;">
                                                        <i class="far fa-calendar-check me-1"></i>
                                                        @if($inquiryCount > 0)
                                                            <span style="
            position: absolute;
            top: -6px;
            right: -6px;
            background: #dc3545;
            color: white;
            font-size: 10px;
            font-weight: 700;
            border-radius: 50%;
            min-width: 17px;
            height: 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            border: 2px solid white;
            line-height: 1;
        ">{{ $inquiryCount }}</span>
                                                        @endif
                                                    </a>
                                                @endif
                                            </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>
                    </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 Seller? 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')

                        <button type="submit" class="btn btn-danger" id="deleteBtn">
                            Delete Now
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        function confirmDelete(sessionId) {

            let deleteBtn = document.getElementById('deleteBtn');

            // Reset button state every time modal opens
            deleteBtn.disabled = false;
            deleteBtn.innerHTML = 'Delete Now';

            let url = "{{ route('admin.sellers.destroy', ':id') }}";
            url = url.replace(':id', sessionId);

            const form = document.getElementById('deleteForm');
            form.action = url;

            const modalEl = document.getElementById('deleteModal');
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);

            modal.show();
        }

        // Disable only when form actually submits
        document.getElementById('deleteForm').addEventListener('submit', function () {

            let deleteBtn = document.getElementById('deleteBtn');

            deleteBtn.disabled = true;
            deleteBtn.innerHTML = 'Deleting...';
        });
    </script>
@endpush