@extends('layout.super-admin-app')

@section('title', 'Super Admin - Leads Management')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}" />
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}" />
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <style>
        .kpi-card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .kpi-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .table td {
            vertical-align: middle;
        }
        .font-mono {
            font-family: 'JetBrains Mono', monospace;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('super-admin.dashboard') }}"><i class="ri-home-8-line"></i> Dashboard</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Registration Leads
        </li>
    </ol>
</div>

<div class="app-body">
    <!-- Top KPI Cards -->
    <div class="row gx-3 mb-3">
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3 mb-3 mb-xl-0">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-primary-subtle text-primary me-3">
                        <i class="ri-user-shared-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Total Leads</span>
                        <h4 class="mb-0 fw-bold text-dark">{{ $stats['total'] ?? 0 }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3 mb-3 mb-xl-0">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-info-subtle text-info me-3">
                        <i class="ri-shield-check-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">OTP Verified</span>
                        <h4 class="mb-0 fw-bold text-info">{{ $stats['otp_verified'] ?? 0 }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3 mb-3 mb-xl-0 border-danger-subtle">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-danger-subtle text-danger me-3">
                        <i class="ri-alarm-warning-line"></i>
                    </div>
                    <div>
                        <span class="text-danger small text-uppercase fw-bold">Payment Failed</span>
                        <h4 class="mb-0 fw-bold text-danger">{{ $stats['payment_failed'] ?? 0 }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3 mb-3 mb-xl-0">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-success-subtle text-success me-3">
                        <i class="ri-checkbox-circle-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Converted Customers</span>
                        <h4 class="mb-0 fw-bold text-success">{{ $stats['converted'] ?? 0 }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Row -->
    <div class="card bg-white border mb-3">
        <div class="card-body p-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-semibold" for="date_period">Period</label>
                    <select id="date_period" class="form-select form-select-sm">
                        <option value="all" selected>All Time</option>
                        <option value="today">Today</option>
                        <option value="yesterday">Yesterday</option>
                        <option value="last_7">Last 7 Days</option>
                        <option value="last_30">Last 30 Days</option>
                        <option value="this_month">This Month</option>
                        <option value="last_month">Last Month</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-semibold" for="from_date">From Date</label>
                    <input type="text" id="from_date" class="form-control form-control-sm datepicker" placeholder="DD-MM-YYYY">
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-semibold" for="to_date">To Date</label>
                    <input type="text" id="to_date" class="form-control form-control-sm datepicker" placeholder="DD-MM-YYYY">
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="form-label small fw-semibold" for="lead_status_filter">Lead Status</label>
                    <select id="lead_status_filter" class="form-select form-select-sm">
                        <option value="all">-- All Statuses --</option>
                        <option value="payment_failed">Payment Failed (High Priority)</option>
                        <option value="converted">Converted Customer</option>
                        <option value="otp_verified">Verified Lead</option>
                        <option value="otp_sent">OTP Sent</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-12">
                    <label class="form-label small fw-semibold" for="plan_id">Plan Filter</label>
                    <select id="plan_id" class="form-select form-select-sm select2">
                        <option value="">-- All Plans --</option>
                        @foreach($plans as $plan)
                            <option value="{{ $plan->id }}">{{ $plan->name }} (₹{{ number_format($plan->price, 2) }})</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table Container -->
    <div class="card bg-white border">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0 fw-bold">Inbound Leads Funnel</h5>
            <span class="text-muted small">Updated in real-time as users register on website</span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="leadsTable" class="table table-hover align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>Date & Time</th>
                            <th>Lead Contact</th>
                            <th>Plan Interested</th>
                            <th>OTP Status</th>
                            <th>Payment Status</th>
                            <th>Funnel Stage</th>
                            <th style="width: 80px;">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Lead Details Modal -->
<div class="modal fade" id="leadDetailsModal" tabindex="-1" aria-labelledby="leadDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light">
                <h5 class="modal-title fw-bold" id="leadDetailsModalLabel">
                    <i class="ri-user-search-line me-1 text-primary"></i> Lead Profile
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="text-center mb-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary-subtle text-primary rounded-circle mb-2" style="width: 56px; height: 56px; font-size: 24px; font-weight: bold;" id="mAvatarInitials">
                        L
                    </div>
                    <h5 class="fw-bold mb-0" id="mLeadName">-</h5>
                    <span class="badge bg-secondary-subtle text-dark border mt-1" id="mLeadStatus">-</span>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <a href="#" id="mCallBtn" class="btn btn-sm btn-outline-success w-100 d-flex align-items-center justify-content-center gap-1">
                            <i class="ri-phone-fill"></i> Call Lead
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="#" id="mEmailBtn" class="btn btn-sm btn-outline-primary w-100 d-flex align-items-center justify-content-center gap-1">
                            <i class="ri-mail-fill"></i> Email Lead
                        </a>
                    </div>
                </div>

                <table class="table table-sm table-bordered">
                    <tbody>
                        <tr>
                            <th class="bg-light text-muted w-40" style="font-size: 13px;">Email Address</th>
                            <td class="fw-semibold" id="mLeadEmail" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Mobile Number</th>
                            <td class="fw-semibold text-dark font-mono" id="mLeadMobile" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Plan Selected</th>
                            <td id="mLeadPlan" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Billing Cycle</th>
                            <td id="mLeadCycle" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Plan Price</th>
                            <td class="fw-bold text-success" id="mLeadAmount" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Payment Status</th>
                            <td id="mPaymentStatus" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Razorpay Payment ID</th>
                            <td class="font-mono text-muted small" id="mRazorpayId" style="font-size: 12px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">OTP Verified At</th>
                            <td id="mOtpVerified" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Converted Company</th>
                            <td class="fw-bold text-primary" id="mTenantName" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">Created At</th>
                            <td id="mCreatedAt" style="font-size: 13px;">-</td>
                        </tr>
                        <tr>
                            <th class="bg-light text-muted" style="font-size: 13px;">IP Address</th>
                            <td class="font-mono text-muted" id="mIpAddress" style="font-size: 12px;">-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer bg-light p-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/jszip.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/buttons.print.min.js') }}"></script>

    <script>
        let leadDetailsModalInstance = null;

        $(document).ready(function() {
            leadDetailsModalInstance = new bootstrap.Modal(document.getElementById('leadDetailsModal'));

            // Initialize Datepickers
            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false,
                locale: { format: 'DD-MM-YYYY' }
            });

            $('.datepicker').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
                table.draw();
            });

            $('.datepicker').on('cancel.daterangepicker', function() {
                $(this).val('');
                table.draw();
            });

            // Date Period Dropdown
            $('#date_period').on('change', function() {
                var val = $(this).val();
                var start, end;

                switch(val) {
                    case 'today':
                        start = moment();
                        end = moment();
                        break;
                    case 'yesterday':
                        start = moment().subtract(1, 'days');
                        end = moment().subtract(1, 'days');
                        break;
                    case 'last_7':
                        start = moment().subtract(6, 'days');
                        end = moment();
                        break;
                    case 'last_30':
                        start = moment().subtract(29, 'days');
                        end = moment();
                        break;
                    case 'this_month':
                        start = moment().startOf('month');
                        end = moment().endOf('month');
                        break;
                    case 'last_month':
                        start = moment().subtract(1, 'month').startOf('month');
                        end = moment().subtract(1, 'month').endOf('month');
                        break;
                    case 'all':
                        $('#from_date').val('');
                        $('#to_date').val('');
                        table.draw();
                        return;
                    default:
                        return;
                }

                if (start && end) {
                    $('#from_date').val(start.format('DD-MM-YYYY'));
                    $('#to_date').val(end.format('DD-MM-YYYY'));
                }

                table.draw();
            });

            $('#lead_status_filter, #plan_id').on('change', function() {
                table.draw();
            });

            var table = $('#leadsTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [
                    { extend: 'excel', text: '<i class="ri-file-excel-line me-1"></i> Excel', className: 'btn btn-sm btn-success' },
                    { extend: 'print', text: '<i class="ri-printer-line me-1"></i> Print', className: 'btn btn-sm btn-secondary' }
                ],
                ajax: {
                    url: '{{ route("super-admin.leads.getData") }}',
                    data: function(d) {
                        d.from_date = $('#from_date').val() ? moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD") : '';
                        d.to_date   = $('#to_date').val() ? moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD") : '';
                        d.status    = $('#lead_status_filter').val();
                        d.plan_id   = $('#plan_id').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'created_date', name: 'created_at' },
                    { data: 'contact_info', name: 'name' },
                    { data: 'plan_info', name: 'plan.name', orderable: false },
                    { data: 'otp_status', name: 'otp_verified_at' },
                    { data: 'payment_status', name: 'payment_status' },
                    { data: 'lead_status', name: 'status' },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],
                order: [[1, 'desc']]
            });
        });

        function openLeadDetailsModal(lead) {
            $('#mAvatarInitials').text(lead.name ? lead.name.charAt(0).toUpperCase() : 'L');
            $('#mLeadName').text(lead.name);
            $('#mLeadStatus').text(lead.status);
            $('#mLeadEmail').text(lead.email);
            $('#mLeadMobile').text(lead.mobile_no);
            $('#mLeadPlan').text(lead.plan_name);
            $('#mLeadCycle').text(lead.billing_cycle);
            $('#mLeadAmount').text(lead.amount);
            $('#mPaymentStatus').text(lead.payment_status);
            $('#mRazorpayId').text(lead.razorpay_payment_id);
            $('#mOtpVerified').text(lead.otp_verified_at);
            $('#mTenantName').text(lead.tenant_name);
            $('#mCreatedAt').text(lead.created_at);
            $('#mIpAddress').text(lead.ip_address);

            $('#mCallBtn').attr('href', 'tel:' + lead.mobile_no);
            $('#mEmailBtn').attr('href', 'mailto:' + lead.email);

            leadDetailsModalInstance.show();
        }

        function deleteLead(id) {
            if (!confirm('Are you sure you want to delete this lead record?')) return;

            $.ajax({
                url: '{{ url("super-admin/leads") }}/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    if (res.success) {
                        $('#leadsTable').DataTable().ajax.reload(null, false);
                    } else {
                        alert(res.message || 'Failed to delete lead.');
                    }
                },
                error: function(err) {
                    alert('An error occurred deleting this lead.');
                }
            });
        }
    </script>
@endpush