@extends('layouts.app')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
    
    <!-- Contact Forms (Tabbed) -->
    <div class="md:col-span-1 lg:col-span-1">
        <div class="bg-white shadow sm:rounded-lg overflow-hidden">
            <!-- Tabs Header -->
            <div class="flex border-b border-gray-200 bg-gray-50">
                <button type="button" id="tabImport" class="flex-1 py-3 px-4 text-center text-sm font-medium text-brand border-b-2 border-brand bg-white" onclick="switchTab('import')">
                    Import Excel
                </button>
                <button type="button" id="tabSingle" class="flex-1 py-3 px-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700 bg-gray-50 border-b-0" onclick="switchTab('single')">
                    Add Single
                </button>
            </div>

            <!-- Import Excel Section -->
            <div id="sectionImport" class="px-4 py-5 sm:p-6 block">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">Import from Excel</h3>
                <p class="text-sm text-gray-500 mb-4">
                    Upload a .xlsx or .csv file. The first row must contain column headers <strong>name</strong> and <strong>email</strong>. 
                    Or you can <a href="{{ route('contacts.template') }}" class="text-brand hover:text-brand-hover font-semibold underline">Download Template</a>.
                </p>
                <form action="{{ route('contacts.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label for="group_name_import" class="block text-sm font-medium text-gray-700">Campaign Group Name</label>
                        <input type="text" name="group_name" id="group_name_import" placeholder="e.g. Promo July" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm" required>
                        @error('group_name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div class="mb-4">
                        <label for="file" class="block text-sm font-medium text-gray-700">Excel/CSV File</label>
                        <input type="file" name="file" id="file" accept=".xlsx, .csv" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm" required>
                        @error('file') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div class="mb-4">
                        <button type="submit" class="w-full bg-brand hover:bg-brand-hover text-white font-bold py-2 px-4 rounded">
                            Upload & Import
                        </button>
                    </div>
                </form>
            </div>

            <!-- Add Single Contact Section -->
            <div id="sectionSingle" class="px-4 py-5 sm:p-6 hidden">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Add Single Contact</h3>
                <form action="{{ route('contacts.store') }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="group_name_single" class="block text-sm font-medium text-gray-700">Campaign Group Name</label>
                        <input type="text" name="group_name" id="group_name_single" placeholder="e.g. Promo July" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm" required>
                        @error('group_name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div class="mb-4">
                        <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                        <input type="text" name="name" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm" required>
                        @error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div class="mb-4">
                        <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
                        <input type="email" name="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm" required>
                        @error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <button type="submit" class="w-full bg-brand hover:bg-brand-hover text-white font-bold py-2 px-4 rounded">
                        Save Contact
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Contact List -->
    <div class="md:col-span-2 lg:col-span-3">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
                <h3 class="text-lg leading-6 font-medium text-gray-900">All Contacts</h3>
                <div class="flex items-center space-x-2">
                    <!-- Filter by Status -->
                    <form action="{{ route('contacts.index') }}" method="GET" class="flex">
                        <select name="status" onchange="this.form.submit()" class="border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm">
                            <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>All Status</option>
                            <option value="subscribed" {{ request('status') == 'subscribed' ? 'selected' : '' }}>Subscribed</option>
                            <option value="unsubscribed" {{ request('status') == 'unsubscribed' ? 'selected' : '' }}>Unsubscribed</option>
                        </select>
                    </form>
                    <form action="{{ route('contacts.index') }}" method="GET" class="flex">
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name or email..." class="border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm">
                        <button type="submit" class="bg-gray-100 hover:bg-gray-200 border border-l-0 border-gray-300 rounded-r-md px-3 py-2 text-gray-600">
                            Search
                        </button>
                        @if(request('search'))
                            <a href="{{ route('contacts.index') }}" class="ml-2 text-sm text-brand flex items-center hover:underline">Clear</a>
                        @endif
                        <a href="{{ route('contacts.export', request()->query()) }}" class="ml-4 bg-green-600 hover:bg-green-700 border border-transparent rounded-md px-4 py-2 text-white text-sm font-medium flex items-center whitespace-nowrap shadow-sm">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path></svg>
                            Export Excel
                        </a>
                    </form>
                </div>
            </div>

            <form action="{{ route('contacts.bulkDestroy') }}" method="POST" id="bulkDeleteForm" onsubmit="event.preventDefault(); openDeleteModal('bulk');">
                @csrf
                @method('DELETE')
                
                <!-- Bulk Action Bar -->
                <div class="bg-gray-50 px-4 py-2 border-t border-b border-gray-200 flex items-center justify-between" id="bulkActionBar" style="display: none;">
                    <span class="text-sm text-gray-600"><span id="selectedCount">0</span> selected</span>
                    <button type="submit" class="text-sm bg-red-600 hover:bg-red-700 text-white py-1 px-3 rounded">
                        Delete Selected
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-10">
                                    <input type="checkbox" id="selectAll" class="rounded border-gray-300 text-brand focus:ring-brand">
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Groups</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Added On</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse ($contacts as $contact)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input type="checkbox" name="ids[]" value="{{ $contact->id }}" class="contact-checkbox rounded border-gray-300 text-brand focus:ring-brand">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $contact->name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $contact->email }}</td>
                                <td class="px-6 py-4 text-sm text-gray-500">
                                    <div class="flex flex-wrap gap-1">
                                        @forelse($contact->groups->take(1) as $group)
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                                {{ $group->name }}
                                            </span>
                                        @empty
                                            <span class="text-xs text-gray-400">No group</span>
                                        @endforelse
                                        @if($contact->groups->count() > 1)
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 cursor-help" title="{{ $contact->groups->skip(1)->pluck('name')->join(', ') }}">
                                                +{{ $contact->groups->count() - 1 }} more
                                            </span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    @if($contact->unsubscribed_at)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                            Unsubscribed
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            Subscribed
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $contact->created_at->format('M d, Y') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button type="button" onclick="openEditModal({{ $contact->id }}, '{{ addslashes($contact->name) }}', {{ json_encode($contact->groups->pluck('id')) }})" class="text-brand hover:text-brand-hover mr-3">Edit</button>
                                    <button type="button" onclick="openDeleteModal('single', {{ $contact->id }})" class="text-red-600 hover:text-red-900">Delete</button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500">
                                    {{ request('search') ? 'No contacts matched your search.' : 'No contacts found.' }}
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </form>
            
            <div class="px-4 py-3 border-t border-gray-200 sm:px-6">
                {{ $contacts->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>

<!-- Hidden Form for Single Delete -->
<form id="singleDeleteForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true" onclick="closeDeleteModal()"></div>
    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
    <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
            <svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Delete Contact</h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500" id="modal-desc">Are you sure you want to delete this contact? This action cannot be undone.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
        <button type="button" id="confirmDeleteBtn" class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">Delete</button>
        <button type="button" onclick="closeDeleteModal()" class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
      </div>
    </div>
  </div>
</div>

<!-- Edit Contact Modal -->
<div id="editModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="edit-modal-title" role="dialog" aria-modal="true">
  <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true" onclick="closeEditModal()"></div>
    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
    <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <form id="editForm" method="POST">
        @csrf
        @method('PUT')
        <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4" id="edit-modal-title">Edit Contact</h3>
            <div class="mb-4">
                <label for="edit_name" class="block text-sm font-medium text-gray-700">Name</label>
                <input type="text" name="name" id="edit_name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm" required>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Campaign Groups</label>
                <div class="max-h-48 overflow-y-auto border border-gray-300 rounded-md p-3 bg-gray-50">
                    @forelse($allGroups as $group)
                        <div class="flex items-center mb-2">
                            <input id="edit_group_{{ $group->id }}" name="groups[]" value="{{ $group->id }}" type="checkbox" class="h-4 w-4 text-brand focus:ring-brand border-gray-300 rounded edit-group-checkbox">
                            <label for="edit_group_{{ $group->id }}" class="ml-2 block text-sm text-gray-900">
                                {{ $group->name }}
                            </label>
                        </div>
                    @empty
                        <div class="text-sm text-gray-500">No groups available.</div>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
            <button type="submit" class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-brand border border-transparent rounded-md shadow-sm hover:bg-brand-hover focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">Save Changes</button>
            <button type="button" onclick="closeEditModal()" class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
    function switchTab(tab) {
        const tabImport = document.getElementById('tabImport');
        const tabSingle = document.getElementById('tabSingle');
        const sectionImport = document.getElementById('sectionImport');
        const sectionSingle = document.getElementById('sectionSingle');

        if (tab === 'import') {
            tabImport.classList.add('text-brand', 'border-brand', 'bg-white');
            tabImport.classList.remove('text-gray-500', 'hover:text-gray-700', 'bg-gray-50', 'border-transparent');
            tabImport.style.borderBottomWidth = '2px';
            
            tabSingle.classList.add('text-gray-500', 'hover:text-gray-700', 'bg-gray-50', 'border-transparent');
            tabSingle.classList.remove('text-brand', 'border-brand', 'bg-white');
            tabSingle.style.borderBottomWidth = '0px';

            sectionImport.classList.remove('hidden');
            sectionImport.classList.add('block');
            sectionSingle.classList.add('hidden');
            sectionSingle.classList.remove('block');
        } else {
            tabSingle.classList.add('text-brand', 'border-brand', 'bg-white');
            tabSingle.classList.remove('text-gray-500', 'hover:text-gray-700', 'bg-gray-50', 'border-transparent');
            tabSingle.style.borderBottomWidth = '2px';

            tabImport.classList.add('text-gray-500', 'hover:text-gray-700', 'bg-gray-50', 'border-transparent');
            tabImport.classList.remove('text-brand', 'border-brand', 'bg-white');
            tabImport.style.borderBottomWidth = '0px';

            sectionSingle.classList.remove('hidden');
            sectionSingle.classList.add('block');
            sectionImport.classList.add('hidden');
            sectionImport.classList.remove('block');
        }
    }

    // Modal Delete Logic
    let deleteMode = null;
    let deleteId = null;

    function openDeleteModal(mode, id = null) {
        deleteMode = mode;
        deleteId = id;
        
        const desc = document.getElementById('modal-desc');
        if (mode === 'single') {
            desc.textContent = 'Are you sure you want to delete this contact? This action cannot be undone.';
        } else {
            const count = document.querySelectorAll('.contact-checkbox:checked').length;
            desc.textContent = `Are you sure you want to delete ${count} selected contact(s)? This action cannot be undone.`;
        }
        
        document.getElementById('deleteModal').classList.remove('hidden');
    }

    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
    }

    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        if (deleteMode === 'single') {
            const form = document.getElementById('singleDeleteForm');
            form.action = `/contacts/${deleteId}`;
            form.submit();
        } else if (deleteMode === 'bulk') {
            document.getElementById('bulkDeleteForm').submit();
        }
    });

    // Edit Modal Logic
    function openEditModal(id, name, groupIds) {
        document.getElementById('edit_name').value = name;
        document.getElementById('editForm').action = '/contacts/' + id;
        
        // Reset all checkboxes
        document.querySelectorAll('.edit-group-checkbox').forEach(cb => {
            cb.checked = false;
        });
        
        // Check the ones the contact belongs to
        groupIds.forEach(groupId => {
            const cb = document.getElementById('edit_group_' + groupId);
            if (cb) cb.checked = true;
        });

        document.getElementById('editModal').classList.remove('hidden');
    }

    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
    }

    // Bulk Delete Checkbox Logic
    document.addEventListener('DOMContentLoaded', function() {
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.contact-checkbox');
        const bulkActionBar = document.getElementById('bulkActionBar');
        const selectedCountSpan = document.getElementById('selectedCount');

        function updateBulkActionBar() {
            const checkedCount = document.querySelectorAll('.contact-checkbox:checked').length;
            selectedCountSpan.textContent = checkedCount;
            if (checkedCount > 0) {
                bulkActionBar.style.display = 'flex';
            } else {
                bulkActionBar.style.display = 'none';
                selectAll.checked = false;
            }
        }

        if(selectAll) {
            selectAll.addEventListener('change', function() {
                checkboxes.forEach(cb => {
                    cb.checked = selectAll.checked;
                });
                updateBulkActionBar();
            });
        }

        checkboxes.forEach(cb => {
            cb.addEventListener('change', function() {
                if (!this.checked) {
                    selectAll.checked = false;
                } else if (document.querySelectorAll('.contact-checkbox:checked').length === checkboxes.length) {
                    selectAll.checked = true;
                }
                updateBulkActionBar();
            });
        });
    });
</script>
@endsection