@extends('layouts.app')

@section('title', 'DEWA Gram Udhyog • Contact List')

@section('content')
<div class="space-y-6">

    <!-- Header Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-xl font-bold text-slate-900">Manage Consumer Contact List</h1>
            <p class="text-xs text-slate-500">Verified WhatsApp marketing opt-in contact list for DEWA Gram Udhyog Pvt Ltd (Bhiwani 127021 HR)</p>
        </div>
        <div class="flex items-center gap-2">
            <button onclick="document.getElementById('csv-modal').classList.remove('hidden')" class="bg-[#008069] hover:bg-[#075E54] text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center gap-1.5 shadow">
                <i class="fa-solid fa-file-arrow-up"></i> Upload CSV Spreadsheet
            </button>
        </div>
    </div>

    <!-- Filter Tabs & Search -->
    <div class="bg-white rounded-2xl p-4 shadow-sm border border-slate-200 space-y-4">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <!-- Tabs -->
            <div class="flex space-x-1 border-b md:border-b-0 border-slate-100 pb-2 md:pb-0 text-xs font-semibold">
                <a href="{{ route('consumer.contacts') }}" class="px-3 py-1.5 rounded-lg {{ !request('tab') ? 'bg-emerald-50 text-[#008069] font-bold' : 'text-slate-500 hover:bg-slate-50' }}">
                    All Contacts ({{ $contacts->total() }})
                </a>
                <a href="{{ route('consumer.contacts', ['tab' => 'opted_in']) }}" class="px-3 py-1.5 rounded-lg {{ request('tab') === 'opted_in' ? 'bg-emerald-50 text-[#008069] font-bold' : 'text-slate-500 hover:bg-slate-50' }}">
                    Opted-In (Verified)
                </a>
                <a href="{{ route('consumer.contacts', ['tab' => 'pending']) }}" class="px-3 py-1.5 rounded-lg {{ request('tab') === 'pending' ? 'bg-emerald-50 text-[#008069] font-bold' : 'text-slate-500 hover:bg-slate-50' }}">
                    Pending Review
                </a>
                <a href="{{ route('consumer.contacts', ['tab' => 'suppressed']) }}" class="px-3 py-1.5 rounded-lg {{ request('tab') === 'suppressed' ? 'bg-emerald-50 text-[#008069] font-bold' : 'text-slate-500 hover:bg-slate-50' }}">
                    Suppressed / STOP
                </a>
            </div>

            <!-- Search Form -->
            <form method="GET" action="{{ route('consumer.contacts') }}" class="flex items-center gap-2">
                @if(request('tab'))
                    <input type="hidden" name="tab" value="{{ request('tab') }}">
                @endif
                <div class="relative w-full sm:w-64">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name or phone..." class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-8 pr-3 py-1.5 text-xs focus:ring-1 focus:ring-[#008069]">
                    <i class="fa-solid fa-magnifying-glass absolute left-2.5 top-2.5 text-slate-400 text-xs"></i>
                </div>
                <button type="submit" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-1.5 rounded-xl text-xs font-semibold">Search</button>
            </form>
        </div>
    </div>

    <!-- Contacts Table -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-600">
                <thead class="bg-slate-50 text-slate-400 uppercase font-bold text-[10px] tracking-wider border-b border-slate-100">
                    <tr>
                        <th class="py-3 px-4">Customer Name</th>
                        <th class="py-3 px-4">Mobile Number</th>
                        <th class="py-3 px-4">Location (District, State, PIN)</th>
                        <th class="py-3 px-4">Consent Status</th>
                        <th class="py-3 px-4">Opt-in Source</th>
                        <th class="py-3 px-4">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($contacts as $contact)
                    <tr class="hover:bg-slate-50/70 transition">
                        <td class="py-3.5 px-4 font-bold text-slate-900 flex items-center gap-2">
                            <div class="w-7 h-7 rounded-full bg-emerald-100 text-emerald-800 flex items-center justify-center font-bold text-xs">
                                {{ substr($contact->customer_name, 0, 1) }}
                            </div>
                            <span>{{ $contact->customer_name }}</span>
                        </td>
                        <td class="py-3.5 px-4 font-mono font-medium text-slate-800">
                            {{ $contact->e164_phone }}
                        </td>
                        <td class="py-3.5 px-4 text-slate-600">
                            @if($contact->district || $contact->state)
                                <i class="fa-solid fa-location-dot text-slate-400 mr-1"></i>
                                {{ $contact->district }}{{ $contact->state ? ', ' . $contact->state : '' }}{{ $contact->pin_code ? ' - ' . $contact->pin_code : '' }}
                            @else
                                <span class="text-slate-400">Not Specified</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4">
                            @if($contact->opt_in_status === 'OPTED_IN')
                                <span class="bg-emerald-100 text-emerald-800 px-2.5 py-0.5 rounded-full text-[10px] font-bold inline-flex items-center gap-1 border border-emerald-200">
                                    <i class="fa-solid fa-circle-check text-emerald-600"></i> OPTED-IN
                                </span>
                            @elseif($contact->opt_in_status === 'OPTED_OUT')
                                <span class="bg-red-100 text-red-800 px-2.5 py-0.5 rounded-full text-[10px] font-bold inline-flex items-center gap-1 border border-red-200">
                                    <i class="fa-solid fa-circle-xmark text-red-600"></i> SUPPRESSED
                                </span>
                            @else
                                <span class="bg-amber-100 text-amber-800 px-2.5 py-0.5 rounded-full text-[10px] font-bold inline-flex items-center gap-1 border border-amber-200">
                                    <i class="fa-solid fa-clock text-amber-600"></i> PENDING
                                </span>
                            @endif
                        </td>
                        <td class="py-3.5 px-4 text-slate-500">
                            {{ $contact->consent_source }} ({{ $contact->consent_date ?? '2026-10-16' }})
                        </td>
                        <td class="py-3.5 px-4">
                            <button onclick="viewContactDetails({{ json_encode($contact) }})" class="text-[#008069] hover:underline font-bold text-xs">
                                Details & Consent
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-8 text-center text-slate-400">
                            No contacts matching current filter. Upload your consumer contacts spreadsheet.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-slate-100">
            {{ $contacts->links() }}
        </div>
    </div>

</div>

<!-- CSV Upload Modal -->
<div id="csv-modal" class="hidden fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-xl w-full p-6 shadow-2xl border border-slate-200">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <h3 class="font-bold text-base text-slate-900">Import Consumer Contacts (CSV Spreadsheet)</h3>
            <button onclick="document.getElementById('csv-modal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
        </div>

        <form action="{{ route('consumer.contacts.upload-csv') }}" method="POST" class="mt-4 space-y-4">
            @csrf
            <p class="text-xs text-slate-500">
                Official spreadsheet schema requires verifiable opt-in consent for bulk WhatsApp marketing under Meta policies.
            </p>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">CSV File Content or Rows:</label>
                <textarea name="csv_content" rows="7" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 text-xs font-mono text-slate-800 focus:ring-2 focus:ring-[#008069]">country_code,mobile_number,customer_name,district,state,pin_code,whatsapp_opt_in,consent_source,consent_date,customer_notes
91,9355321162,Mrs Bimla,Bhiwani,Haryana,127021,true,DEWA Customer Care,2026-10-16,Priority Gram Udhyog customer
91,9315321162,Mr. Dinesh Kumar,Bhiwani,Haryana,127021,true,Direct WhatsApp,2026-10-16,Verified customer
91,6000072002,Vikash Verma,Bhiwani,Haryana,127021,true,Customer Portal,2026-10-16,Opted-in consumer
91,9812405817,Ajay Kumar,Bhiwani,Haryana,127021,true,Customer Care,2026-10-16,Bulk consumer inquiries
91,7600910000,Sudhir Malik,Bhiwani,Haryana,127021,true,Direct Web Form,2026-10-16,Consent confirmed</textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2">
                <button type="button" onclick="document.getElementById('csv-modal').classList.add('hidden')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100">Cancel</button>
                <button type="submit" class="bg-[#008069] hover:bg-[#075E54] text-white px-4 py-2 rounded-xl text-xs font-bold shadow">Validate & Import</button>
            </div>
        </form>
    </div>
</div>

<!-- Contact Consent Record Details Modal -->
<div id="details-modal" class="hidden fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl border border-slate-200">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <h3 class="font-bold text-base text-slate-900">Contact Consent Record</h3>
            <button onclick="document.getElementById('details-modal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
        </div>

        <div class="mt-4 space-y-3 text-xs" id="contact-details-content">
            <!-- Rendered dynamically -->
        </div>

        <div class="mt-5 pt-3 border-t border-slate-100 flex justify-end">
            <button onclick="document.getElementById('details-modal').classList.add('hidden')" class="bg-slate-100 hover:bg-slate-200 px-4 py-2 rounded-xl text-xs font-bold text-slate-700">Close</button>
        </div>
    </div>
</div>

<script>
    function viewContactDetails(contact) {
        const content = document.getElementById('contact-details-content');
        content.innerHTML = `
            <div class="bg-slate-50 p-3 rounded-xl border border-slate-200 space-y-2">
                <div><strong class="text-slate-500">Customer Name:</strong> <span class="font-bold text-slate-900">${contact.customer_name}</span></div>
                <div><strong class="text-slate-500">Mobile Number:</strong> <span class="font-mono text-slate-900">${contact.e164_phone}</span></div>
                <div><strong class="text-slate-500">Address / Location:</strong> <span class="text-slate-800">${contact.district || ''}, ${contact.state || ''} ${contact.pin_code || ''}</span></div>
            </div>
            <div class="bg-emerald-50 p-3 rounded-xl border border-emerald-200 space-y-2">
                <div><strong class="text-emerald-800">Consent Opt-in Status:</strong> <span class="font-bold text-emerald-900">${contact.opt_in_status}</span></div>
                <div><strong class="text-emerald-800">Consent Source:</strong> <span class="text-emerald-900">${contact.consent_source}</span></div>
                <div><strong class="text-emerald-800">Consent Recorded On:</strong> <span class="text-emerald-900">${contact.consent_date || '2026-10-16'}</span></div>
                <div><strong class="text-emerald-800">Eligibility Status:</strong> <span class="text-emerald-900 font-bold">${contact.is_approved_by_admin ? 'APPROVED FOR BROADCAST' : 'PENDING ADMIN APPROVAL'}</span></div>
            </div>
        `;
        document.getElementById('details-modal').classList.remove('hidden');
    }
</script>
@endsection