@extends('layouts.masterbeta')

@section('title', 'Click ERP - Client Management')

@push('styles')
    <style>
        .avatar-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.85rem; }
    </style>
@endpush

@section('breadcrumbs')
    <a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
    <i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
    <span class="fw-bold" style="font-size: 0.95rem;">Clients</span>
@endsection

@section('content')
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Client Management</h4>
            <p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage clients, payment modes, services etc.</p>
        </div>
        <div class="dropdown">
            <button class="btn btn-outline-secondary d-flex align-items-center dropdown-toggle" type="button" data-bs-toggle="dropdown" style="border-radius: 8px;">
                <i class="bi bi-download me-2"></i> Export
            </button>
            <ul class="dropdown-menu shadow-sm border-0">
                <li>
                    <a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="csv">
                        <i class="bi bi-filetype-csv me-2 text-success"></i> Export as CSV (Excel)
                    </a>
                </li>
                <li>
                    <a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="pdf">
                        <i class="bi bi-filetype-pdf me-2 text-danger"></i> Export as PDF
                    </a>
                </li>
            </ul>
        </div>
        <button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenClientModal">
            <i class="bi bi-plus-lg me-2"></i> Add New Client
        </button>

    </div>

    <!-- Data Table Card -->
    <div class="content-card">
        <!-- Filters -->
        <div class="p-3 border-bottom bg-light bg-opacity-50">
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control bg-white border-start-0 ps-0" id="searchClient" placeholder="Search clients, email, or contact...">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select bg-white" id="filterService">
                        <option value="">All Service Types</option>
                        <option value="sms">SMS</option>
                        <option value="ussd">USSD</option>
                        <option value="airtime">Airtime</option>
                        <option value="voice">Voice</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select bg-white" id="filterBilling">
                        <option value="">Payment Mode: All</option>
                        <option value="postpaid">Postpaid (Invoice)</option>
                        <option value="prepaid">Prepaid (Balance)</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-custom table-hover mb-0">
                <thead>
                    <tr>
                        <th>Client Details</th>
                        <th>Primary Contact</th>
                        <th>Services</th>
                        <th>Billing</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="clientTableBody">
                    <!-- Data will be injected here via AJAX -->
                </tbody>
            </table>
        </div>
        
        <!-- Pagination Container -->
        <div class="p-3 d-flex justify-content-between align-items-center" id="paginationContainer">
            <span class="text-secondary" style="font-size: 0.85rem;" id="paginationInfo">Showing 0 to 0 of 0 entries</span>
            <nav>
                <ul class="pagination pagination-sm mb-0" id="paginationLinks">
                    <!-- Pagination links injected here -->
                </ul>
            </nav>
        </div>
    </div>
@endsection

<!-- MODAL HTML REMAINS THE SAME AS BEFORE -->
@push('modals')
    @include('clients.partials.create')
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            let searchTimer;

            // Initialize the table on page load
            fetchClients();

            // Event Listeners for Search and Filters
            $('#searchClient').on('keyup', function() {
                clearTimeout(searchTimer);
                // Debounce the search so we don't spam the server on every keystroke
                searchTimer = setTimeout(() => fetchClients(1), 400); 
            });

            $('#filterService, #filterBilling').on('change', function() {
                fetchClients(1);
            });

            // Handle Pagination Clicks dynamically
            $(document).on('click', '.page-link-ajax', function(e) {
                e.preventDefault();
                let page = $(this).data('page');
                if (page) fetchClients(page);
            });

            // AJAX Fetch Function
            function fetchClients(page = 1) {
                const search = $('#searchClient').val();
                const service = $('#filterService').val();
                const billing = $('#filterBilling').val();

                // Show loading state
                $('#clientTableBody').html(`
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <div class="spinner-border text-primary" role="status" style="color: #5c4df0 !important;"></div>
                            <div class="mt-2 text-secondary" style="font-size: 0.85rem;">Loading clients...</div>
                        </td>
                    </tr>
                `);

                $.ajax({
                    url:  base_url + "/clients/data",
                    type: "GET",
                    data: { page: page, search: search, service: service, billing: billing },
                    success: function(response) {
                        renderTable(response.data);
                        renderPagination(response);
                    },
                    error: function() {
                        $('#clientTableBody').html('<tr><td colspan="6" class="text-center text-danger py-4">Failed to load data. Please try again.</td></tr>');
                    }
                });
            }
            // Handle Export Actions
            $('.btn-export').on('click', function(e) {
                e.preventDefault();
                
                // Get current filter values
                const search = $('#searchClient').val();
                const service = $('#filterService').val();
                const billing = $('#filterBilling').val();
                const format = $(this).data('format'); // 'csv' or 'pdf'
                
                // Build the query string
                const queryParams = $.param({
                    search: search,
                    service: service,
                    billing: billing,
                    format: format
                });

                // Redirect the browser to trigger the file download
                window.location.href = "{{ route('clients.export') }}?" + queryParams;
            });
            // Render Table Rows
            function renderTable(clients) {
                let html = '';

                if (clients.length === 0) {
                    $('#clientTableBody').html('<tr><td colspan="6" class="text-center text-secondary py-4">No clients found matching your criteria.</td></tr>');
                    return;
                }

                clients.forEach(client => {
                    // Extract initials for the avatar
                    let initials = client.name.substring(0, 2).toUpperCase();
                    
                    let servicesHtml = '<span class="text-secondary" style="font-size: 0.8rem;">N/A</span>';
                    if (client.services) {
                        try {
                            let servicesArray = JSON.parse(client.services);
                            
                            // 2. Map each service into a Bootstrap badge
                            if (Array.isArray(servicesArray) && servicesArray.length > 0) {
                                servicesHtml = servicesArray.map(service => 
                                    `<span class="badge bg-secondary bg-opacity-10 text-secondary border me-1 mb-1" style="font-size: 0.7rem;">${service}</span>`
                                ).join('');
                            }
                        } catch (e) {
                            console.error("Could not parse services for client: " + client.name);
                        }
                    }
                    // Status Badge Logic
                    let statusBadge = client.status === 'active' 
                        ? '<span class="badge bg-success bg-opacity-10 text-success px-2 py-1"><i class="bi bi-check-circle me-1"></i>Active</span>'
                        : '<span class="badge bg-warning bg-opacity-10 text-warning px-2 py-1"><i class="bi bi-clock me-1"></i>' + client.status + '</span>';

                    html += `
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-circle bg-primary bg-opacity-10 text-primary me-3">${initials}</div>
                                    <div>
                                        <div class="fw-bold text-dark">${client.name}</div>
                                        <div class="text-secondary" style="font-size: 0.8rem;"><i class="bi bi-geo-alt me-1"></i>${client.country || 'N/A'}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="fw-semibold">${client.contact_person || 'N/A'}</div>
                                <div class="text-secondary" style="font-size: 0.8rem;">${client.email || 'N/A'}</div>
                            </td>
                            <td style="max-width: 200px; white-space: normal;">
                                ${servicesHtml}
                            </td>
                            <td><span class="badge bg-info bg-opacity-10 text-info text-uppercase">${client.pay_mode || 'N/A'}</span></td>
                            <td>${statusBadge}</td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-light text-primary me-1 btn-edit-client" 
                                    data-id="${client.id}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                });

                $('#clientTableBody').html(html);
            }

            // Render Pagination Links
            function renderPagination(response) {
                // Update "Showing X to Y of Z entries"
                $('#paginationInfo').text(`Showing ${response.from || 0} to ${response.to || 0} of ${response.total} entries`);

                let paginationHtml = '';
                
                // Only show pagination if there is more than 1 page
                if (response.last_page > 1) {
                    // Previous Button
                    let prevDisabled = response.current_page === 1 ? 'disabled' : '';
                    paginationHtml += `<li class="page-item ${prevDisabled}"><a class="page-link page-link-ajax" href="#" data-page="${response.current_page - 1}">Previous</a></li>`;

                    // Page Numbers
                    for (let i = 1; i <= response.last_page; i++) {
                        let activeClass = response.current_page === i ? 'active' : '';
                        let style = response.current_page === i ? 'style="background-color: #5c4df0; border-color: #5c4df0;"' : 'class="page-link text-dark"';
                        
                        paginationHtml += `<li class="page-item ${activeClass}"><a class="page-link page-link-ajax" href="#" ${style} data-page="${i}">${i}</a></li>`;
                    }

                    // Next Button
                    let nextDisabled = response.current_page === response.last_page ? 'disabled' : '';
                    paginationHtml += `<li class="page-item ${nextDisabled}"><a class="page-link page-link-ajax" href="#" data-page="${response.current_page + 1}">Next</a></li>`;
                }

                $('#paginationLinks').html(paginationHtml);
            }
        });
    </script>
@endpush