@extends('front.layouts.main')

    @section('title', 'Leads')

    @push('pageCss')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
        <style>
            .action-icon,
            .action-icon:hover,
            .action-icon:focus,
            .action-icon:active {
                background-color: none !important;
            }

            /* Custom table row colors for lead timeline */
            .products-table tbody tr.table-success {
                background-color: #DDF1E1 !important;
                border-left: 4px solid #28a745;
            }

            .products-table tbody tr.table-warning {
                background-color: rgba(255, 193, 7, 0.1) !important;
                border-left: 4px solid #ffc107;
            }

            .products-table tbody tr.table-danger {
                background-color: rgba(220, 53, 69, 0.1) !important;
                border-left: 4px solid #dc3545;
            }
            .products-table .material-icons {
                vertical-align: sub;
                font-size: 20px;
                color: #4E5867;
            }
            /* Badge styling */
            .badge {
                padding: 6px 12px;
                font-size: 0.8rem;
                font-weight: 600;
                border-radius: 12px;
            }

            .badge-success {
                background-color: #28a745;
                color: white;
            }

            .badge-danger {
                background-color: #dc3545;
                color: white;
            }

            .badge-secondary {
                background-color: #6c757d;
                color: white;
            }

            /* Filter button styling */
            .btn-filter {
                position: relative;
            }

            .btn-filter.has-filters::after {
                content: '';
                position: absolute;
                top: -2px;
                right: -2px;
                width: 8px;
                height: 8px;
                background-color: #dc3545;
                border-radius: 50%;
            }

            /* Color legend styling */
            .color-legend {
                background-color: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                border: 1px solid #e9ecef;
            }

            .color-legend h6 {
                color: #495057;
                font-weight: 600;
                margin-bottom: 10px;
            }

            .legend-item {
                font-size: 0.875rem;
                color: #6c757d;
            }

            .legend-color {
                border-radius: 4px;
            }

            @media (max-width: 768px) {
                .color-legend .d-flex {
                    flex-direction: column;
                    gap: 10px !important;
                }
            }
        </style>
    @endpush

    @section('content')
        <main class="products-page-container">
            <div class="products-card">
                {{-- Header --}}
                <div class="card-header-bar">
                    <h2>Leads</h2>
                    <div class="d-flex align-items-center" style="gap: 1rem;">
                            <a href="#"
                                class="btn-filter {{ request('filter_lead_status') || request('filter_lead_type') || request('filter_product') || request('filter_company') || request('filter_expected_closure_date') || request('filter_location') ? 'has-filters' : '' }}">
                                <i class="fa-solid fa-filter"></i>
                                <span>{{ request('filter_lead_status') || request('filter_lead_type') || request('filter_product') || request('filter_company') || request('filter_expected_closure_date') || request('filter_location') ? 'Edit Filter' : 'Filter' }}</span>
                            </a>
                        
                        <a href="{{ route('kua-agent-lead.create') }}" class="btn  btn-primary-em">
                            <i class="fa-solid fa-plus"></i>
                            Add Lead
                        </a>
                    </div>
                </div>
                {{-- Search and Pagination Form --}}
               
                    <form action="{{ url()->current() }}" method="GET" id="main-form">
                        <div class="controls-bar">
                            <div class="search-input-wrapper">
                                <i class="fa-solid fa-search"></i>
                                <input type="text" name="search" value="{{ request('search') }}"
                                    placeholder="Search by name, client, or product">
                            </div>

                            <div class="pagination-controls">
                                <div class="record-per-page">
                                    <label for="per_page">Record Per Page</label>
                                    <select name="per_page" id="per_page" onchange="this.form.submit()">
                                        <option value="10" @if (request('per_page') == 10) selected @endif>10</option>
                                        <option value="25" @if (request('per_page') == 25) selected @endif>25</option>
                                        <option value="50" @if (request('per_page', 50) == 50) selected @endif>50</option>
                                        <option value="100" @if (request('per_page') == 100) selected @endif>100
                                        </option>
                                    </select>
                                </div>
                                <span>Total {{ $leads->total() }}</span>

                                <nav class="pagination-nav">
                                    @php

                                        // Get all current query parameters except page
                                        $queryParams = request()->query();
                                        unset($queryParams['page']);

                                        // Build previous page URL
                                        $prevUrl = $leads->previousPageUrl();
                                        if ($prevUrl) {
                                            $prevUrl =
                                                $prevUrl .
                                                (count($queryParams) > 0 ? '&' . http_build_query($queryParams) : '');
                                        }

                                        // Build next page URL
                                        $nextUrl = $leads->nextPageUrl();
                                        if ($nextUrl) {
                                            $nextUrl =
                                                $nextUrl .
                                                (count($queryParams) > 0 ? '&' . http_build_query($queryParams) : '');
                                        }
                                    @endphp
                                    <a href="{{ $prevUrl }}" class="{{ $leads->onFirstPage() ? 'disabled' : '' }}"><i
                                            class="fa-solid fa-arrow-left"></i></a>
                                    <span class="page-number active">{{ $leads->currentPage() }}</span>
                                    <a href="{{ $nextUrl }}"
                                        class="{{ !$leads->hasMorePages() ? 'disabled' : '' }}"><i
                                            class="fa-solid fa-arrow-right"></i></a>
                                </nav>

                            </div>
                        </div>
                    </form>
                    @if ( $leads->total() > 0 )
                    <div id="leads-table-container">

                        <table class="products-table">
                            <thead>
                                <tr>
                                    @php
                                        $currentSort = request('sort_by');
                                        $currentOrder = request('order') === 'asc' ? 'desc' : 'asc';

                                        // Get all current query parameters except sort_by and order
                                        $sortQueryParams = request()->query();
                                        unset($sortQueryParams['sort_by']);
                                        unset($sortQueryParams['order']);
                                        unset($sortQueryParams['page']); // Reset to page 1 when sorting
                                    @endphp
                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'lead_name', // <-- was agent_name
                                                'order'   => $currentSort == 'lead_name' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Lead Name
                                            @if ($currentSort === 'lead_name')
                                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'lead_type',
                                                'order' => $currentSort == 'lead_type' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Lead Type
                                            @if ($currentSort === 'lead_type')
                                                <i
                                                    class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'client',
                                                'order' => $currentSort == 'client' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Client
                                            @if ($currentSort === 'client')
                                                <i
                                                    class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'product_name',
                                                'order' => $currentSort == 'product_name' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Product
                                            @if ($currentSort === 'product_name')
                                                <i
                                                    class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'added_on',
                                                'order' => $currentSort == 'added_on' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Added on
                                            @if ($currentSort === 'added_on')
                                                <i
                                                    class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'expected_closure_date',
                                                'order' =>
                                                    $currentSort == 'expected_closure_date' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Expected Closure Date
                                            @if ($currentSort === 'expected_closure_date')
                                                <i
                                                    class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>

                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'stage',
                                                'order' => $currentSort == 'stage' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Stage
                                            @if ($currentSort === 'stage')
                                                <i
                                                    class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th>
                                        @php
                                            $sortParams = array_merge($sortQueryParams, [
                                                'sort_by' => 'action',
                                                'order' => $currentSort == 'action' ? $currentOrder : 'asc',
                                            ]);
                                        @endphp
                                        <a href="{{ request()->url() . '?' . http_build_query($sortParams) }}">
                                            Action
                                            @if ($currentSort === 'action')
                                                <i
                                                    class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                            @else
                                                <i class="fa-solid fa-sort"></i>
                                            @endif
                                        </a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($leads as $lead)
                                    @php
                                        $expectedDate = \Carbon\Carbon::parse($lead->expected_closure_date);
                                        $today = \Carbon\Carbon::today();
                                        $daysUntilClosure = $today->diffInDays($expectedDate, false);
                                        $isWonOrLost = in_array($lead->lead_status, ['won', 'lost']);
                                        $rowClass = '';
                                        if (!$isWonOrLost) {
                                            if ($expectedDate < $today && $lead->lead_status != 'won') {
                                                $rowClass = 'table-danger'; // Red - past due
                                            } elseif ($daysUntilClosure <= 7 && $lead->lead_status != 'won') {
                                                $rowClass = 'table-warning'; // Orange - within 7 days
                                            } else {
                                                $rowClass = 'table-success'; // Green - more than 7 days
                                            }
                                        }                                       
                                    @endphp
                                    <tr class="{{ $rowClass }}">
                                        @if ($lead->lead_type == 'individual')
                                            <td>{{ $lead->customer_name ?? 'N/A' }}</td>
                                        @else
                                            <td>{{ $lead->business_name ?? 'N/A' }}</td>
                                        @endif
                                        <td>{{ ucfirst($lead->lead_type) ?? 'N/A' }}</td>
                                        <td>{{ $lead->kuaCompany? $lead->kuaCompany->name:  'N/A' }}</td>
                                        <td>{{ $lead->kuaProduct ? $lead->kuaProduct->product_name : 'N/A' }}</td>
                                        <td>{{ \Carbon\Carbon::parse($lead->created_at)->format('d M Y') ?? 'N/A' }}</td>
                                        <td>{{ \Carbon\Carbon::parse($lead->expected_closure_date)->format('d M Y') ?? 'N/A' }}
                                        </td>
                                        <td>
                                            <span
                                                class="
                                                {{ $lead->lead_status == 'won' ? 'text-success' : ($lead->lead_status == 'lost' ? 'text-danger' : 'text-dark') }}">
                                                {{ ucfirst($lead->lead_status ?? 'N/A') }}
                                            </span>
                                        </td>

                                        <td>
                                            @if (!$isWonOrLost)
                                            @if($lead->company_id != 0 && $lead->product_id != 0)
                                            <button class="btn-won me-10"
                                                    data-lead-id="{{ $lead->id }}">Won</button>
                                                @endif        
                                                    <button class="btn-lost me-10"
                                                        data-lead-id="{{ $lead->id }}">Lost</button>
                                                
                                            @endif

                                            <a href="{{ route('kua-agent-lead.show', $lead->id) }}"
                                                class="btn  btn-primary-em action-icon me-10" title="View Lead">
                                                <i class="material-icons">visibility</i>
                                            </a>
                                            @if ($lead->lead_status == 'new')
                                                <a href="{{ route('kua-agent-lead.edit', $lead->id) }}" title="Edit Lead"
                                                    class="btn btn-primary-em edit-btn action-icon">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>

                    <div class="color-legend mt-3">
                        <h6 class="mb-2">Color Legend:</h6>
                        <div class="d-flex align-items-center gap-3">
                            <div class="legend-item d-flex align-items-center">
                                <div class="legend-color"
                                    style="width: 20px; height: 20px; background-color: rgba(40, 167, 69, 0.1); border-left: 4px solid #28a745; margin-right: 8px;">
                                </div>
                                <span class="small">Green: More than 7 days until closure</span>
                            </div>
                            <div class="legend-item d-flex align-items-center">
                                <div class="legend-color"
                                    style="width: 20px; height: 20px; background-color: rgba(255, 193, 7, 0.1); border-left: 4px solid #ffc107; margin-right: 8px;">
                                </div>
                                <span class="small">Orange: Within 7 days of closure</span>
                            </div>
                            <div class="legend-item d-flex align-items-center">
                                <div class="legend-color"
                                    style="width: 20px; height: 20px; background-color: rgba(220, 53, 69, 0.1); border-left: 4px solid #dc3545; margin-right: 8px;">
                                </div>
                                <span class="small">Red: Past closure date</span>
                            </div>
                        </div>
                    </div>
               
                  
                    @else
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-warning" role="alert">
                                {{ 'No Records to show' }}
                            </div>
                        </div>
                    </div>
                @endif
                <div class="modal right filter-modal" id="filter" tabindex="-1" role="dialog"
                    aria-labelledby="filter">
                    <div class="modal-dialog modal-md" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="filter">Kua Agent Lead Filter</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </div>

                            <form id="filter-form" method="GET" action="{{ route('kua-agent-lead.index') }}">
                                <div class="modal-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <input type="hidden" name="per_page" value="{{ request('per_page') }}">
                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Select Status</label>
                                                    <select id="filter_lead_status" name="filter_lead_status"
                                                        class="form-control select-two">
                                                        <option value="">Show All</option>
                                                        <option value="new"
                                                            {{ request('filter_lead_status') == 'new' ? 'selected' : '' }}>
                                                            New</option>
                                                        <option value="won"
                                                            {{ request('filter_lead_status') == 'won' ? 'selected' : '' }}>
                                                            Won</option>
                                                        <option value="lost"
                                                            {{ request('filter_lead_status') == 'lost' ? 'selected' : '' }}>
                                                            Lost</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Select Lead Type</label>
                                                    <select id="filter_lead_type" name="filter_lead_type"
                                                        class="form-control select-two">
                                                        <option value="">Show All</option>
                                                        <option value="individual"
                                                            {{ request('filter_lead_type') == 'individual' ? 'selected' : '' }}>
                                                            Individual</option>
                                                        <option value="business"
                                                            {{ request('filter_lead_type') == 'business' ? 'selected' : '' }}>
                                                            Business</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Select Company</label>
                                                    <select id="filter_company" name="filter_company"
                                                        class="form-control select-two">
                                                        <option value="">Show All</option>
                                                        @foreach ($companies as $company)
                                                            <option value="{{ $company->id }}"
                                                                {{ request('filter_company') == $company->id ? 'selected' : '' }}>
                                                                {{ $company->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Select Product</label>
                                                    <select id="filter_product" name="filter_product"
                                                        class="form-control select-two">
                                                        <option value="">Show All</option>
                                                        @foreach ($products as $product)
                                                            <option value="{{ $product->id }}"
                                                                {{ request('filter_product') == $product->id ? 'selected' : '' }}>
                                                                {{ $product->product_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Select Expected Closure Date</label>
                                                    <select id="filter_expected_closure_date"
                                                        name="filter_expected_closure_date"
                                                        class="form-control select-two">
                                                        <option value="">Show All</option>
                                                        <option value="today"
                                                            {{ request('filter_expected_closure_date') == 'today' ? 'selected' : '' }}>
                                                            Today</option>
                                                        <option value="tomorrow"
                                                            {{ request('filter_expected_closure_date') == 'tomorrow' ? 'selected' : '' }}>
                                                            Tomorrow</option>
                                                        <option value="this_week"
                                                            {{ request('filter_expected_closure_date') == 'this_week' ? 'selected' : '' }}>
                                                            This Week</option>
                                                        <option value="next_week"
                                                            {{ request('filter_expected_closure_date') == 'next_week' ? 'selected' : '' }}>
                                                            Next Week</option>
                                                        <option value="this_month"
                                                            {{ request('filter_expected_closure_date') == 'this_month' ? 'selected' : '' }}>
                                                            This Month</option>
                                                        <option value="next_month"
                                                            {{ request('filter_expected_closure_date') == 'next_month' ? 'selected' : '' }}>
                                                            Next Month</option>
                                                        <option value="this_year"
                                                            {{ request('filter_expected_closure_date') == 'this_year' ? 'selected' : '' }}>
                                                            This Year</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Select Location</label>
                                                    <select id="filter_location" name="filter_location"
                                                        class="form-control select-two">
                                                        <option value="">Show All</option>
                                                        @foreach ($locations as $location)
                                                            <option value="{{ $location->id }}"
                                                                {{ request('filter_location') == $location->id ? 'selected' : '' }}>
                                                                {{ $location->region_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer d-flex justify-content-between">
                                    <button type="button" class="btn btn-em" id="reset-all-filter"
                                        onclick="window.location.href = '{{ route('kua-agent-lead.index') }}'">Reset</button>
                                    <button type="submit" class="btn btn-em">Filter</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Modal for customer TIN number --}}
            <div class="modal fade" id="customer-tin-number" tabindex="-1" role="dialog"
                aria-labelledby="customer-tin-number">
                <div class="modal-dialog modal-md modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div>
                                <h4 class="modal-title" id="customer-tin-number-title">Customer TIN Number</h4>
                                <p class="mb-1 mt-1">Enter TIN Number to continue</p>
                            </div>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <form method="post" id="frmCustomerTIN" name="frmCustomerTIN" autocomplete="off">
                                @csrf
                                <input type="hidden" name="id" value="" />

                                <div class="form-group">
                                    <label for="tin_number">Customer TIN Number</label>
                                    <input type="text" class="form-control" id="tin_number" name="tin_number"
                                        placeholder="Enter TIN Number" required>
                                </div>
                            </form>
                        </div>

                        <div class="modal-footer justify-content-between bg-transparent">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-em" id="submit-customer-tin-number">Submit</button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Modal for lost lead --}}
            <div class="modal fade" id="lost-lead" tabindex="-1" role="dialog" aria-labelledby="lost-lead">
                <div class="modal-dialog modal-md modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="lost-lead-title">Lost Lead</h4>
                         
                        </div>
                        <div class="modal-body">
                            <form method="post" id="frmLostLead" name="frmLostLead" autocomplete="off">
                                @csrf
                                <input type="hidden" name="id" value="" />
                                <div class="form-group">
                                    <p>Are you sure you want to update the lead status to lost?</p>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer justify-content-between bg-transparent">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-dark" id="submit-lost-lead">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="snackbar"></div>
            {{-- Modal for lost lead --}}
        </main>
       
    @endsection
    @if (session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            showSnackbar("{{ session('success') }}");
        });
    </script>
    @endif

    @if (session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                showSnackbar("{{ session('error') }}");
            });
        </script>
    @endif
    @push('pageJs')
        <script>
            function showSnackbar(message) {
              Snackbar.show({
                pos: 'bottom-right',
                text: message,
                actionText: 'Okay',
              });
            }
            $(document).ready(function() {

                $('.btn-lost').click(function() {
                    $(this).closest('tr').find('.edit-btn').attr('disabled', true).css('opacity', 0.5);
                });

                $('input[name="search"]').on('keyup', function() {
                    $(this).closest('form').submit();
                });

                $('.btn-filter').on('click', function(e) {
                    e.preventDefault();
                    $('#filter').modal('show');
                });

                $('.btn-won').on('click', function() {
                    var $btn = $(this);
                    var leadId = $btn.data('lead-id');

                    // Check if TIN number is already set
                    if ($('#customer-tin-number').data('lead-id') === leadId) {
                        $('#customer-tin-number').modal('show');
                        return;
                    }

                    // Show the modal to enter TIN number
                    $('#customer-tin-number').data('lead-id', leadId);
                    $('#customer-tin-number').modal('show');
                });

                $('#submit-customer-tin-number').on('click', function() {
                    var $btn = $(this);
                    var leadStatus = 'won';
                    var tinNumber = $('#tin_number').val();
                    var leadId = $('#customer-tin-number').data('lead-id');

                    if (!tinNumber) {
                        Snackbar.show({
                            pos: 'bottom-right',
                            text: 'Please enter a TIN number',
                            actionText: 'Okay'
                        });
                        return;
                    }

                    // $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Checking...');
                    $("#submit-customer-tin-number").attr("disabled", true);
                    $("#submit-customer-tin-number").text("Checking...");

                    $.ajax({
                        url: "{{ route('kua-agent-lead.get-customer-tin-number', ['tin_number' => ':tin_number']) }}"
                            .replace(':tin_number', tinNumber),
                        type: 'GET',
                        success: function(response) {
                            console.log(response);
                            //update customer_id in lead table
                            $.ajax({
                                url: "{{ route('kua-agent-lead.update-customer-id-by-tin') }}",
                                type: 'POST',
                                data: {
                                    lead_id: leadId,
                                    tin_number: tinNumber,
                                    _token: $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function(response) {
                                    var redirectUrl = "{{ route('kua-agent-customer.create') }}";
                                    var params = new URLSearchParams();
                                    params.append('tin_number', tinNumber);
                                    params.append('lead_id', leadId)
                                    window.location.href = redirectUrl + '?' + params.toString();
                                    console.log(response)
                                    // alert(response.message)
                                    // $.ajax({
                                    //     url: "{{ route('kua-agent-lead.update-lead-status', ['id' => ':id']) }}"
                                    //         .replace(':id', leadId),
                                    //     type: 'POST',
                                    //     data: {
                                    //         status: leadStatus,
                                    //         _token: $('meta[name="csrf-token"]').attr('content')
                                    //     },
                                    //     success: function(response) {
                                    //         $btn.prop('disabled', false).html('Won');
                                    //         $('#customer-tin-number').data('lead-id', leadId);
                                    //         $('#customer-tin-number').modal('show');
                                    //     },
                                    //     error: function(xhr, status, error) {
                                    //         $('#customer-tin-number').modal('hide');
                                    //         console.error(xhr.responseText);
                                    //         $btn.prop('disabled', false).html('Won');
                                    //         alert('Failed to update lead status. Please try again.');
                                    //     }
                                    // });
                                    // alert('Customer found' + response.customer_id);
                                    // console.log(response);
                                },
                                error: function(xhr, status, error) {
                                    // console.log(xhr)
                                Snackbar.show({
                                    pos: 'bottom-right',
                                    text: xhr.responseJSON.message,
                                    actionText: 'Okay',
                                });

                                $('#customer-tin-number').modal('hide');
                                    $btn.prop('disabled', false).html('Submit');
                                        console.error(xhr.responseText);
                                    }
                                });

                            // Redirect to customer form with TIN number (customer exists)
                           
                            console.log(response)
                          
                        },
                        error: function(xhr, status, error) {
                            $btn.prop('disabled', false).html('Submit');
                            if (xhr.status === 400) {
                                var redirectUrl = "{{ route('kua-agent-customer.create') }}";
                                var params = new URLSearchParams();
                                params.append('lead_id', leadId);
                                params.append('tin_number', tinNumber);
                                window.location.href = redirectUrl + '?' + params.toString();
                            } else {
                                Snackbar.show({
                                    pos: 'bottom-right',
                                    text: 'Failed to check TIN number. Please try again.',
                                    actionText: 'Okay',
                                });
                            }
                        }
                    });
                });

                $('#customer-tin-number').on('hidden.bs.modal', function() {
                    $('#tin_number').val('');
                    $('#submit-customer-tin-number').prop('disabled', false).html('Submit');
                });

                $('.btn-lost').on('click', function() {
                    var $btn = $(this);
                    var leadId = $btn.data('lead-id');
                    var leadStatus = 'lost';
                    $('#lost-lead').modal('show');
                   $('#submit-lost-lead').on('click', function() {
                        $('#lost-lead').modal('hide');
                        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Updating...');

                        $.ajax({
                            url: "{{ route('kua-agent-lead.update-lead-status', ['id' => ':id']) }}"
                                .replace(':id', leadId),
                            type: 'POST',
                            data: {
                                status: leadStatus,
                                _token: $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                console.log(response);

                                setTimeout(function() {
                                    location.reload();
                                }, 1000);
                            },
                            error: function(xhr, status, error) {
                                console.error(xhr.responseText);
                                $btn.prop('disabled', false).html('Lost');
                                alert('Failed to update lead status. Please try again.');
                            }
                        });
                    });
                });

                $('#filter-form').on('submit', function(e) {
                    $('#filter .modal-footer .btn-em').html(
                        '<i class="fa fa-spinner fa-spin"></i> Filtering...').prop('disabled', true);

                    $('#filter').modal('hide');

                });

                // $('#filter').on('hidden.bs.modal', function() {
                //     $('#filter .modal-footer .btn-em').html('Filter').prop('disabled', false);
                //     $('#filter .modal-footer .btn-cncl').html('Reset').prop('disabled', false);
                // });

                $('#filter-form select, #filter-form input').on('change', function() {
                    var hasFilters = false;
                    $('#filter-form select, #filter-form input').each(function() {
                        if ($(this).val() && $(this).val() !== '') {
                            hasFilters = true;
                            return false;
                        }
                    });

                    var $filterBtn = $('.btn-filter span');
                    var $filterBtnContainer = $('.btn-filter');

                    if (hasFilters) {
                        $filterBtn.text('Edit Filter');
                        $filterBtnContainer.addClass('has-filters');
                    } else {
                        $filterBtn.text('Filter');
                        $filterBtnContainer.removeClass('has-filters');
                    }
                });

            });
        </script>
    @endpush