@extends('layouts.masterbeta')

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

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    /* Custom styling to make Select2 match Bootstrap 5 form controls */
    .select2-container .select2-selection--multiple {
        min-height: 38px;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #5c4df0;
        border: none;
        color: white;
        border-radius: 4px;
        padding: 2px 8px;
        margin-top: 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: white;
        margin-right: 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ffcccc;
        background: transparent;
    }
    /* Fix for validation red border */
    .is-invalid + .select2-container .select2-selection {
        border-color: #dc3545;
    }
    .avatar-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.85rem; }
    /* Ensure all Select2 containers expand to fill their grid column width */
    .select2-container {
        width: 100% !important;
    }
    .select2-selection--multiple {
        min-height: 38px !important;
    }
    </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, contact person, services etc.</p>
        </div>
        <div class="dropdown">
           
            <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 & Export Header -->
        <div class="p-3 border-bottom bg-light bg-opacity-50">
            <div class="row g-3 align-items-center">
                <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-2">
                    <select class="form-select bg-white" id="filterService">
                        <option value="">All Service Types</option>
                        <option value="a2p">A2P</option>
                        <option value="ussd">USSD</option>
                        <option value="airtime">Airtime</option>
                        <option value="voice">Voice</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <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 class="col-md-2">
                    <select class="form-select bg-white" id="filterStatus">
                        <option value="">Status: All</option>
                        <option value="Live">Live</option>
                        <option value="Prospective">Prospective</option>
                        <option value="Cancelled">Cancelled</option>
                        <option value="Inactive">Inactive</option>
                    </select>
                </div>
                <!-- Moved Export Button Here -->
                <div class="col-md-2 text-end">
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle w-100 bg-white" type="button" data-bs-toggle="dropdown">
                            <i class="bi bi-download me-1"></i> Export
                        </button>
                        <ul class="dropdown-menu shadow-sm border-0 w-100">
                            <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 CSV
                                </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 PDF
                                </a>
                            </li>
                        </ul>
                    </div>
                </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>Account Manager</th>
                        <th>Services</th>
                        <th>Billing</th>
                        <th>Date Added</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

@push('modals')
    @include('clients.partials.create')
    @include('clients.partials.edit-modal')
@endpush

@push('scripts')

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ asset('public/assets/js/client-index.js') }}"></script>
@endpush