@extends('layouts.app')

@section('content')
<div class="container py-5">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-5">
        <h1 class="fw-bold text-dark">
            <i class="bi bi-people-fill text-primary"></i> Manage Your Contacts
        </h1>
        <div class="d-flex gap-3">
            <a href="{{ route('contacts.create') }}" class="btn btn-primary btn-lg shadow-sm d-flex align-items-center gap-2">
                <i class="bi bi-person-plus"></i> Add New Contact
            </a>
            <button class="btn btn-outline-secondary btn-lg shadow-sm d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#importModal">
                <i class="bi bi-upload"></i> Import Contacts
            </button>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="search-bar mb-4">
        <div class="input-group shadow-sm">
            <input type="text" id="search-input" class="form-control form-control-lg rounded-start" 
                placeholder="Search contacts by name, phone, or email..." oninput="filterContacts()">
            <button class="btn btn-primary rounded-end">
                <i class="bi bi-search"></i> Search
            </button>
        </div>
    </div>

    @if($contacts->isEmpty())
    <!-- No Contacts Found -->
    <div class="text-center py-5">
        <img src="https://via.placeholder.com/200" alt="No contacts" class="img-fluid mb-4">
        <h3 class="text-muted">No Contacts Found</h3>
        <p class="text-secondary mb-4">Start by adding a new contact to your CRM.</p>
        <a href="{{ route('contacts.create') }}" class="btn btn-success btn-lg shadow-sm">
            <i class="bi bi-plus-circle"></i> Add New Contact
        </a>
    </div>
    @else
    <!-- Contacts Table -->
    <div class="card shadow-sm rounded-lg border-0">
        <div class="card-header bg-gradient text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0 text-black">Contact List</h5>
            <span class="badge bg-light text-dark">Total Contacts: {{ $contacts->total() }}</span>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="text-black">Name</th>
                        <th class="text-black">Status</th>
                        <th class="text-black">Stage</th>
                        <th class="text-black">Phone</th>
                        <th class="text-black">Email</th>
                        <th class="text-black text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($contacts as $contact)
                    <tr>
                        <td class="fw-semibold text-dark">{{ $contact->first_name ?? $contact->name }} {{ $contact->last_name ?? '' }}</td>
                        <td><span class="badge bg-info text-dark">{{ $contact->status }}</span></td>
                        <td><span class="badge bg-warning text-dark">{{ $contact->stage }}</span></td>
                        <td>{{ $contact->phone1 ?? $contact->phones->pluck('phone')->first() ?? 'N/A' }}</td>
                        <td>{{ $contact->email1 ?? $contact->emails->pluck('email')->first() ?? 'N/A' }}</td>
                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-2">
                                <a href="{{ route('contacts.show', $contact->id) }}" class="btn btn-outline-info btn-sm d-flex align-items-center gap-1">
                                    <i class="bi bi-eye"></i> View
                                </a>
                                <a href="{{ route('contacts.edit', $contact->id) }}" class="btn btn-outline-primary btn-sm d-flex align-items-center gap-1">
                                    <i class="bi bi-pencil-square"></i> Edit
                                </a>
                                <button type="button" class="btn btn-outline-danger btn-sm d-flex align-items-center gap-1" 
                                        data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $contact->id }}">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="mt-4 d-flex justify-content-center">
        {{ $contacts->links('pagination::bootstrap-5') }}
    </div>
    @endif
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form action="{{ route('contacts.import') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content rounded-lg">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="importModalLabel">Import Contacts</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted">Upload a CSV file to bulk import contacts.</p>
                    <input type="file" name="contacts_file" class="form-control" required>
                    <small class="text-secondary mt-2 d-block">Ensure the CSV file matches the required format.</small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Import Contacts</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Delete Modals -->
@foreach($contacts as $contact)
<div class="modal fade" id="deleteModal-{{ $contact->id }}" tabindex="-1" aria-labelledby="deleteModalLabel-{{ $contact->id }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-lg">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel-{{ $contact->id }}">Delete Contact</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted">Are you sure you want to delete <strong>{{ $contact->first_name }} {{ $contact->last_name }}</strong>? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="{{ route('contacts.destroy', $contact->id) }}">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endforeach

<script>
    function filterContacts() {
        const input = document.getElementById('search-input').value.toLowerCase();
        const table = document.getElementById('contacts-table');
        const rows = table.getElementsByTagName('tr');

        for (let i = 1; i < rows.length; i++) {
            const cells = rows[i].getElementsByTagName('td');
            let match = false;

            for (let j = 0; j < cells.length - 1; j++) {
                if (cells[j].innerText.toLowerCase().includes(input)) {
                    match = true;
                    break;
                }
            }

            rows[i].style.display = match ? '' : 'none';
        }
    }
</script>

<style>
    /* General Styling */
    .fw-bold {
        font-weight: bold;
    }

    .text-black {
        color: #000 !important;
    }

    .btn-primary {
        background: linear-gradient(45deg, #007bff, #0056b3);
        border: none;
    }

    .btn-primary:hover {
        background: linear-gradient(45deg, #0056b3, #007bff);
    }

    .btn-outline-secondary:hover {
        background: #f8f9fa;
        color: #6c757d;
    }

    .btn {
        font-size: 0.875rem;
        font-weight: 500;
    }

    .card {
        border-radius: 1rem;
    }

    .search-bar .input-group {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .table {
        border-spacing: 0;
    }

    .table-hover tbody tr:hover {
        background: #f8f9fa;
    }

    .badge {
        border-radius: 0.5rem;
    }
</style>
@endsection