@extends('layouts.master')

@section('title', 'Client Registry')

@section('content')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400&display=swap" rel="stylesheet">

<style>
:root {
    --sky: #0ea5e9;
    --sky-deep: #0369a1;
    --sky-light: #38bdf8;
    --sky-pale: #e0f2fe;
    --sky-ghost: rgba(14,165,233,0.08);
    --sky-border: rgba(14,165,233,0.22);
    --white: #ffffff;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'DM Mono', monospace;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.main-content {
    font-family: var(--font-body);
    background: linear-gradient(180deg, var(--white) 0%, var(--sky-pale) 100%);
}

.clx-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    animation: clxIn 0.45s var(--ease) both;
}

@keyframes clxIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.clx-bc {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    color: var(--sky-deep);
}

.clx-bc a {
    color: var(--sky-deep);
    text-decoration: none;
}

.clx-hero {
    background: linear-gradient(135deg, var(--sky-deep) 0%, var(--sky) 65%, var(--sky-light) 100%);
    border-radius: 22px;
    padding: 30px 36px;
    color: var(--white);
    box-shadow: 0 10px 32px rgba(14,165,233,0.28);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.clx-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.05;
}

.clx-hero p {
    margin: 6px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.94);
}

.clx-stat {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 14px;
    padding: 14px 20px;
    text-align: center;
    min-width: 140px;
}

.clx-stat .val {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
}

.clx-stat .lab {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.clx-card {
    background: var(--white);
    border: 1px solid var(--sky-border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 6px 20px rgba(14,165,233,0.12);
    margin-bottom: 18px;
}

.form-section {
    background: var(--white);
    border: 1px solid var(--sky-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px rgba(14,165,233,0.10);
}

.section-title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    color: var(--sky-deep);
    font-size: 20px;
    font-weight: 700;
    border-bottom: 1px solid var(--sky-border);
    padding-bottom: 10px;
}

.lawyer-search { position: relative; }

.lawyer-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--sky-border);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(14,165,233,0.18);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.lawyer-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--sky-border);
    color: var(--sky-deep);
}

.lawyer-item:hover { background: var(--sky-ghost); }
.lawyer-item:last-child { border-bottom: 0; }

.clx-title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    color: var(--sky-deep);
    font-size: 22px;
    font-weight: 700;
}

.notice {
    border: 1px solid var(--sky-border);
    background: var(--sky-ghost);
    color: var(--sky-deep);
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.notice ul { margin: 0; padding-left: 18px; }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.form-group { margin-bottom: 18px; }

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--sky-deep);
    font-size: 0.95rem;
}

.required::after {
    content: ' *';
    color: var(--sky);
}

input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sky-border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--white);
    color: var(--sky-deep);
    transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.14);
}

textarea { resize: vertical; min-height: 100px; }

.btn-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.clx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid var(--sky-border);
    background: var(--white);
    color: var(--sky-deep);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s var(--ease);
}

.clx-btn.primary {
    background: linear-gradient(135deg, var(--sky-deep), var(--sky));
    color: var(--white);
    border-color: var(--sky-deep);
}

.clx-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(14,165,233,0.22);
}

.search-input { width: 100%; margin-bottom: 14px; }

.table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--sky-border);
    background: var(--white);
}

#clientsTable { width: 100%; border-collapse: collapse; background: var(--white); }

#clientsTable th, #clientsTable td {
    padding: 14px 14px;
    text-align: left;
    border-color: var(--sky-border) !important;
    color: var(--sky-deep) !important;
    border-bottom: 1px solid var(--sky-border) !important;
}

#clientsTable th { background: var(--sky-ghost) !important; font-weight: 800; }
#clientsTable tr:hover td { background: var(--sky-ghost) !important; }

.muted { font-size: 0.875rem; color: rgba(3,105,161,0.75) !important; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

#clientsTable th:not(:last-child),
#clientsTable td:not(:last-child) {
    border-right: 1px solid var(--sky-border) !important;
}

.act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid var(--sky-border);
    background: var(--white);
    color: var(--sky-deep);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s var(--ease);
    font-size: 0.875rem;
}

.act:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(14,165,233,0.18);
    background: var(--sky-ghost);
}

.no-data {
    text-align: center;
    padding: 26px 16px;
    color: rgba(3,105,161,0.75);
    font-style: italic;
}

@media (max-width: 768px) {
    .clx-page { padding: 26px 14px 40px; }
    .clx-hero { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
    .clx-hero h1 { font-size: 32px; }
    .clx-stat { width: 100%; }
}
</style>

<div class="clx-page">
    <nav class="clx-bc">
        <a href="{{ route('modules.edit') }}">Edit Menu</a>
        <span>›</span>
        <a href="{{ route('modules.edit.clients') }}">Clients</a>
        <span>›</span>
        <span>Registry</span>
    </nav>

    <div class="clx-hero">
        <div>
            <h1>Client Registry</h1>
            <p>Add clients and manage the registry in one place.</p>
        </div>
        <div class="clx-stat">
            <div class="val">{{ count($clients ?? []) }}</div>
            <div class="lab">Total Clients</div>
        </div>
    </div>

    <div class="clx-card">
        <h2 class="clx-title">Add New Client</h2>

    @if(session('success'))
        <div class="notice">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="notice">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form id="clientForm" action="{{ route('clients.store') }}" method="POST" enctype="multipart/form-data" novalidate>
        @csrf
        <!-- Core Identifiers -->
        <div class="form-section">
            <h2 class="section-title">Core Identifiers</h2>
            <div class="form-row">
                <div class="form-group">
                    <label for="client_id" class="required">Client ID</label>
                    <input type="text" id="client_id" name="client_id" required>
                </div>
                <div class="form-group">
                    <label for="first_name" class="required">First Name</label>
                    <input type="text" id="first_name" name="first_name" required>
                </div>
                <div class="form-group">
                    <label for="last_name" class="required">Last Name</label>
                    <input type="text" id="last_name" name="last_name" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="national_id_passport">National ID / Passport Number</label>
                    <input type="text" id="national_id_passport" name="national_id_passport">
                </div>
                <div class="form-group">
                    <label for="date_of_birth">Date of Birth</label>
                    <input type="date" id="date_of_birth" name="date_of_birth">
                </div>
                <div class="form-group">
                    <label for="gender">Gender</label>
                    <select id="gender" name="gender">
                        <option value="">Select Gender</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="form-section">
            <h2 class="section-title">Contact Information</h2>
            <div class="form-row">
                <div class="form-group">
                    <label for="phone_primary">Phone Number (Primary)</label>
                    <input type="tel" id="phone_primary" name="phone_primary" placeholder="+263 123 456 789">
                </div>
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" placeholder="client@example.com">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="address_street">Street Address</label>
                    <input type="text" id="address_street" name="address_street" placeholder="123 Main Street">
                </div>
                <div class="form-group">
                    <label for="address_city">City</label>
                    <input type="text" id="address_city" name="address_city" placeholder="Harare">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="address_state">State / Province</label>
                    <input type="text" id="address_state" name="address_state" placeholder="Mashonaland East">
                </div>
                <div class="form-group">
                    <label for="address_country">Country</label>
                    <input type="text" id="address_country" name="address_country" placeholder="Zimbabwe">
                </div>
            </div>
        </div>

        <!-- Professional / Legal Context -->
        <div class="form-section">
            <h2 class="section-title">Professional / Legal Context</h2>
            <div class="form-row">
                <div class="form-group">
                    <label for="occupation_company"> Employer name</label>
                    <input type="text" id="occupation_company" name="occupation_company" placeholder="Software Engineer or ABC Corporation">
                </div>
                <div class="form-group">
                    <label for="position_role">Position / Role</label>
                    <input type="text" id="position_role" name="position_role" placeholder="Senior Developer or CEO">
                </div>
                <div class="form-group">
                    <label for="client_type">Client Type</label>
                    <select id="client_type" name="client_type">
                        <option value="">Select Client Type</option>
                        <option value="IND">IND – Individual clients</option>
                        <option value="CORP">CORP – Corporate clients</option>
                        <option value="GOVT">GOVT – Government clients</option>
                        <option value="NGO">NGO – Non-Governmental Organizations</option>
                        <option value="SME">SME – Small and Medium Enterprises</option>
                        <option value="FIN">FIN – Financial institutions / banks</option>
                        <option value="REAL">REAL – Real estate clients</option>
                        <option value="LEG">LEG – Legal entity clients (trusts, estates)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="client_category">Client Category</label>
                    <select id="client_category" name="client_category">
                        <option value="">Select Client Category</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->category_code }}">{{ $category->category_description }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <!-- Engagement Details -->
        <div class="form-section">
            <h2 class="section-title">Engagement Details</h2>
            <div class="form-row">
                <div class="form-group">
                    <label for="date_onboarding">Date of Onboarding</label>
                    <input type="date" id="date_onboarding" name="date_onboarding" value="{{ date('Y-m-d') }}">
                </div>
                <div class="form-group">
                    <label for="assigned_lawyer_case_manager_display">Assigned Lawyer / Case Manager</label>
                    <div class="lawyer-search">
                        <input type="text" id="assigned_lawyer_case_manager_display" name="assigned_lawyer_case_manager_display" placeholder="Search for lawyer..." autocomplete="off">
                        <input type="hidden" id="assigned_lawyer_case_manager" name="assigned_lawyer_case_manager" value="">
                        <div class="lawyer-dropdown" id="assigned_lawyer_dropdown"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="referred_lawyer_display">Referred Lawyer</label>
                    <div class="lawyer-search">
                        <input type="text" id="referred_lawyer_display" name="referred_lawyer_display" placeholder="Search for lawyer..." autocomplete="off">
                        <input type="hidden" id="referred_lawyer_hidden" name="referred_lawyer" value="">
                        <div class="lawyer-dropdown" id="referred_lawyer_dropdown"></div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="notes_remarks">Notes / Remarks</label>
                <textarea id="notes_remarks" name="notes_remarks" placeholder="Additional notes about the client..."></textarea>
            </div>
        </div>

        <div class="btn-row">
            <button type="submit" class="clx-btn primary">Save</button>
            <button type="button" class="clx-btn" onclick="document.getElementById('clientForm').reset(); document.getElementById('client_id').value = generateClientId();">Refresh</button>
            <button type="button" class="clx-btn" onclick="window.location.href='{{ route('modules.edit.clients') }}'">Back</button>
        </div>
    </form>

    <!-- Clients Table Section -->
    <div class="form-section">
        <h2 class="section-title">Clients List</h2>

        <input type="search" id="clientSearch" placeholder="Search clients..." class="search-input">

        <div class="table-container">
            <table id="clientsTable">
                <thead>
                    <tr>
                        <th>Client ID</th>
                        <th>Name</th>
                        <th>Contact</th>
                        <th>Client Type</th>
                        <th>Occupation</th>
                        <th>Assigned To</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="clientsTableBody">
                    @foreach($clients ?? [] as $client)
                        <tr>
                            <td>{{ $client->client_id ?? 'N/A' }}</td>
                            <td>
                                <div style="font-weight: 800;">{{ $client->first_name }} {{ $client->last_name }}</div>
                                <div class="muted">{{ $client->national_id ?? 'N/A' }}</div>
                            </td>
                            <td>
                                <div>{{ $client->phone_primary ?? 'N/A' }}</div>
                                <div class="muted">{{ $client->email ?? 'N/A' }}</div>
                            </td>
                            <td>{{ $client->client_type ?? 'N/A' }}</td>
                            <td>
                                <div>{{ $client->employer_name ?? 'N/A' }}</div>
                                <div class="muted">{{ $client->position_role ?? '' }}</div>
                            </td>
                            <td>{{ $client->assigned_lawyer ?? 'N/A' }}</td>
                            <td>
                                <div class="row-actions">
                                    <a href="{{ route('clients.show', $client->id) }}" class="act">View</a>
                                    <a href="{{ route('clients.edit', $client->id) }}" class="act">Edit</a>
                                    <form action="{{ route('clients.destroy', $client->id) }}" method="POST" style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="act" onclick="return confirm('Are you sure you want to delete this client?')">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div id="noClientsMessage" class="no-data">
            No clients added yet. Fill the form above and click "Add Client" to get started.
        </div>
    </div>
</div>

</div>

<script>
    // Generate next client ID
    function generateClientId() {
        // Generate a unique client ID with better uniqueness
        const timestamp = Date.now();
        const random = Math.floor(Math.random() * 1000);
        return 'CL' + String(timestamp).slice(-4) + String(random).padStart(3, '0');
    }

    // Initialize client ID on page load
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('client_id').value = generateClientId();
    });

    // Search functionality
    document.getElementById('clientSearch').addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const rows = document.querySelectorAll('#clientsTableBody tr');

        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            row.style.display = text.includes(searchTerm) ? '' : 'none';
        });
    });

    // Lawyer search functionality
    document.addEventListener('DOMContentLoaded', function() {
        const lawyerInputs = document.querySelectorAll('.lawyer-search input[type="text"]');
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

        lawyerInputs.forEach(input => {
            const hiddenInput = input.nextElementSibling;
            const dropdown = input.nextElementSibling.nextElementSibling;
            let timeout;

            input.addEventListener('input', function() {
                clearTimeout(timeout);
                const query = this.value.trim();

                // Clear hidden input if visible input is cleared
                if (query.length === 0) {
                    hiddenInput.value = '';
                    dropdown.style.display = 'none';
                    return;
                }

                if (query.length < 2) {
                    dropdown.style.display = 'none';
                    return;
                }

                timeout = setTimeout(() => {
                    fetch(`/modules/api/lawyers/search?q=${encodeURIComponent(query)}`, {
                        method: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        dropdown.innerHTML = '';

                        if (data.length > 0) {
                            data.forEach(lawyer => {
                                const item = document.createElement('div');
                                item.className = 'lawyer-item';
                                item.textContent = lawyer.full_name;
                                item.dataset.id = lawyer.lawyer_id;
                                item.addEventListener('click', function() {
                                    input.value = lawyer.full_name;
                                    hiddenInput.value = lawyer.lawyer_id;
                                    dropdown.style.display = 'none';
                                });
                                dropdown.appendChild(item);
                            });
                            dropdown.style.display = 'block';
                        } else {
                            dropdown.style.display = 'none';
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching lawyers:', error);
                        dropdown.style.display = 'none';
                    });
                }, 300);
            });

            // Hide dropdown when clicking outside
            document.addEventListener('click', function(e) {
                if (!input.contains(e.target) && !dropdown.contains(e.target)) {
                    dropdown.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection