@extends('admin.layouts.app')
<title>Admin Portal Dashboard</title>

@section('content')
    <div class="p-6 bg-gray-100 min-h-screen">


        <!-- Filters -->
        <div class="bg-white p-4 rounded-lg shadow-lg mb-6">
            <div class="mb-4 mt-2 text-md text-teal-800 bg-teal-50 p-2 rounded w-max flex items-center gap-2">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg"><path d="M13 7.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-3 3.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v4.25h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75V12h-.75a.75.75 0 0 1-.75-.75Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></svg>
                <span>Leads are assigned to agents after 15 minutes of creation. Currently, all leads are from sign-up drop-off.</span>
            </div>
            <form method="GET">

                <div class="flex gap-4 flex-1">
                    <div class="w-1/4">
                        <label class="block text-sm font-medium text-gray-600 mb-1">From Date</label>
                        <input type="date" name="from_date" value="{{ request('from_date') }}"
                            class="w-full rounded-md border-gray-300 focus:ring-teal-500 focus:border-teal-500 border px-1.5 py-1">
                    </div>

                    <div class="w-1/4">
                        <label class="block text-sm font-medium text-gray-600 mb-1">To Date</label>
                        <input type="date" name="to_date" value="{{ request('to_date') }}"
                            class="w-full rounded-md border-gray-300 focus:ring-teal-500 focus:border-teal-500 border px-1.5 py-1">
                    </div>
                    {{-- <div class="w-1/4">
                        <label class="block text-sm font-medium text-gray-600 mb-1">Follow-Up Count</label>
                        <select name="min_follow_up"
                            class="w-full rounded-md border-gray-300 focus:ring-teal-500 focus:border-teal-500 border px-1.5 py-1">
                            <option value="">All</option>
                            <option value="0" {{ request('min_follow_up') === '0' ? 'selected' : '' }}>0</option>
                            <option value="1" {{ request('min_follow_up') === '1' ? 'selected' : '' }}>1</option>
                            <option value="2" {{ request('min_follow_up') === '2' ? 'selected' : '' }}>2</option>
                            <option value="3" {{ request('min_follow_up') === '3' ? 'selected' : '' }}>3+</option>
                        </select>
                    </div> --}}

                    <div class="w-1/4">
                        <label class="block text-sm font-medium text-gray-600 mb-1">Sort By Date</label>
                        <select name="sort_direction"
                            class="w-full rounded-md border-gray-300 focus:ring-teal-500 focus:border-teal-500 border px-2 py-1">
                            <option value="desc" {{ request('sort_direction') === 'desc' ? 'selected' : '' }}>Newest First
                            </option>
                            <option value="asc" {{ request('sort_direction') === 'asc' ? 'selected' : '' }}>Oldest First
                            </option>
                        </select>

                    </div>

                    <div class="w-1/4">
                        <label class="block text-sm font-medium text-gray-600 mb-1">Status</label>
                        <select name="status"
                            class="w-full rounded-md border-gray-300 focus:ring-teal-500 focus:border-teal-500 border px-1.5 py-1">
                            <option value="">All</option>
                            <option value="New" {{ request('status') == 'New' ? 'selected' : '' }}>New Lead</option>
                            <option value="Called" {{ request('status') == 'Called' ? 'selected' : '' }}>Contacted
                            </option>
                            {{-- <option value="Payment" {{ request('status') == 'Payment' ? 'selected' : '' }}>Payment Link
                                Sent
                            </option> --}}
                            {{-- <option value="Closed" {{ request('status') == 'Closed' ? 'selected' : '' }}>Converted</option>
                            <option value="Closed" {{ request('status') == 'Closed' ? 'selected' : '' }}>Closed</option> --}}
                        </select>
                    </div>
                </div>

                <div class="flex items-end gap-2 mt-5">
                    <!-- Filter Button -->
                    <button type="submit"
                        class="flex items-center gap-2 px-5 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition">
                        <!-- Magnifying glass icon -->
                        <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
                            stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"
                            xmlns="http://www.w3.org/2000/svg">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.3-4.3"></path>
                        </svg> Filter
                    </button>

                    <!-- Reset Button -->
                    <a href="{{ route('admin.leads-kpi') }}"
                        class="flex items-center gap-2 px-5 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
                        <!-- Refresh icon -->
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 16 16"
                            class="h-4 w-4" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M13.901 2.599c-1.463-1.597-3.565-2.599-5.901-2.599-4.418 0-8 3.582-8 8h1.5c0-3.59 2.91-6.5 6.5-6.5 1.922 0 3.649 0.835 4.839 2.161l-2.339 2.339h5.5v-5.5l-2.099 2.099z">
                            </path>
                            <path
                                d="M14.5 8c0 3.59-2.91 6.5-6.5 6.5-1.922 0-3.649-0.835-4.839-2.161l2.339-2.339h-5.5v5.5l2.099-2.099c1.463 1.597 3.565 2.599 5.901 2.599 4.418 0 8-3.582 8-8h-1.5z">
                            </path>
                        </svg>
                        Reset
                    </a>

                    <!-- Download CSV Button -->
                    <a href="{{ request()->fullUrlWithQuery(['download' => 'csv']) }}"
                        class="flex items-center gap-2 px-5 py-2 bg-amber-500 text-white rounded-md hover:bg-amber-600 transition">
                        <!-- Download icon -->
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512"
                            class="h-5 w-5" xmlns="http://www.w3.org/2000/svg">
                            <path d="M416 199.5h-91.4V64H187.4v135.5H96l160 158.1 160-158.1zM96 402.8V448h320v-45.2H96z">
                            </path>
                        </svg>
                        Download CSV
                    </a>
                </div>


            </form>

        </div>

        <div class="bg-white p-4 rounded-lg shadow-lg mb-4">
            <h3 class="text-sm font-semibold text-gray-700 mb-2">Column Visibility</h3>

            <div class="flex flex-wrap gap-4 text-sm">
                @php
                    $columns = [
                        'lead_no' => 'Lead No',
                        'customer' => 'Customer',
                        'status' => 'Status',
                        'mobile' => 'Mobile',
                        'product' => 'Product',
                        'drop_off' => 'Drop Off',
                        'agent' => 'Agent',
                        'follow_up' => 'Follow Up',
                        'date_created' => 'Date Created',
                        'viewed' => 'Viewed',
                    ];
                @endphp

                @foreach ($columns as $key => $label)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" class="column-toggle" data-column="{{ $key }}" @if($key != 'viewed') checked @endif>
                        <span>{{ $label }}</span>
                    </label>
                @endforeach
            </div>
        </div>


        <!-- Table -->
        <div class="bg-white rounded-lg shadow-lg overflow-x-auto">
            <table class="min-w-full border-collapse">
                <thead class="bg-gray-50 sticky top-0">
                    <tr>
                        <th data-column="lead_no" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Lead No
                        </th>
                        <th data-column="customer" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Customer
                        </th>
                        <th data-column="status" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Status</th>
                        <th data-column="mobile" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Mobile</th>
                        <th data-column="product" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Product
                        </th>
                        <th data-column="drop_off" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Drop Off
                        </th>
                        <th data-column="agent" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Agent</th>
                        <th data-column="follow_up" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Follow Up</th>
                        <th data-column="date_created" class="px-4 py-3 text-left text-sm font-semibold text-gray-600">
                            Date Created</th>
                        <th data-column="viewed" class="hidden px-4 py-3 text-left text-sm font-semibold text-gray-600">Viewed
                        </th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-100">
                    @forelse($leads as $lead)
                        <tr class="hover:bg-gray-50 align-top">
                            <td data-column="lead_no" class="px-4 py-3 text-sm text-gray-800">
                                {{ $lead->lead_no }}
                            </td>

                            <td data-column="customer" class="px-4 py-3 text-sm text-gray-800">
                                {{ $lead->customer_name }}
                            </td>

                            <td data-column="status" class="px-4 py-3">
                                <span
                                    class="px-2 py-1 text-xs rounded-full
                                {{ $lead->status == 'New' ? 'bg-blue-100 text-blue-700' : '' }}
                                {{ $lead->status == 'Called' ? 'bg-yellow-100 text-yellow-700' : '' }}
                                {{ $lead->status == 'Closed' ? 'bg-green-100 text-green-700' : '' }}
                            ">
                                    {{ $lead->status }}
                                </span>
                            </td>

                            <td data-column="mobile" class="px-4 py-3 text-sm text-gray-800">
                                {{ $lead->mobile_number }}
                            </td>

                            <td data-column="product" class="px-4 py-3 text-sm text-gray-800">
                                {{ $lead->product ?? '' }}
                            </td>

                            <td data-column="drop_off" class="px-4 py-3 text-sm text-gray-800">
                                {{ $lead->drop_off ?? '' }}
                            </td>

                            <td data-column="agent" class="px-4 py-3 text-sm text-gray-800 ">
                                {{ $lead->agent_name ?? '' }}
                            </td>

                            <td data-column="follow_up" class="px-4 py-3 text-sm text-gray-800">
                                @forelse ($lead->comments ?? [] as $key => $comment)
                                    <div class="mb-2 bg-teal-50 p-2 rounded">
                                        <span class="font-semibold">
                                            @if($key == 0)
                                                1st Follow-Up:
                                            @elseif($key == 1)
                                                2nd Follow-Up:
                                            @elseif($key == 2)
                                                3rd Follow-Up:
                                            @endif
                                             {{ $comment->outcome ?? $comment->comment }}</span><br>
                                        <span class="text-xs text-gray-500">
                                            {{ \Carbon\Carbon::parse($comment->created_at)->setTimezone('Asia/Karachi')->format('d M Y h:i a') }}
                                        </span>
                                    </div>
                                @empty
                                    <span class="text-gray-500">No Follow-Ups</span>
                                @endforelse
                            </td>

                            <td data-column="date_created" class="px-4 py-3 text-sm text-gray-600">
                                {{ \Carbon\Carbon::parse($lead->lead_assigned_at)->setTimezone('Asia/Karachi')->format('d M Y h:i a') }}
                            </td>

                            <td data-column="viewed" class="px-4 py-3 hidden">
                                <span class="px-2 py-1 text-gray-600 text-sm rounded-full">
                                    {{ \Carbon\Carbon::parse($lead->lead_opened_at)->setTimezone('Asia/Karachi')->format('d M Y h:i a') ?? 'Not Viewed' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-6 text-center text-gray-500">
                                No records found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 shadow-lg bg-white rounded-b-lg mt-4">
            {{ $leads->links() }}
        </div>

    </div>
    <script>
        document.querySelectorAll('.column-toggle').forEach(toggle => {
            toggle.addEventListener('change', function() {
                const column = this.dataset.column;
                const cells = document.querySelectorAll(`[data-column="${column}"]`);

                cells.forEach(cell => {
                    cell.classList.toggle('hidden', !this.checked);
                });
            });
        });
    </script>
@endsection