<!-- ========================================== -->
<!-- 1. ADD SHORT CODE MODAL                    -->
<!-- ========================================== -->
<div class="modal fade" id="addShortcodeModal" tabindex="-1" aria-labelledby="addShortcodeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="shortcodeForm" action="{{ route('shortcodes.store') }}" method="POST">
                @csrf
                <input type="hidden" name="client_id" value="{{ $showclient->id }}">
                
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="addShortcodeModalLabel"><i class="bi bi-code-square text-primary me-2"></i>Add New Short Code</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Code Type</label>
                        <select name="code_type" class="form-select" required>
                            <option value="sms">SMS</option>
                            <option value="ussd">USSD</option>
                            <option value="voice">Voice</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Short Code / Number</label>
                        <input type="text" name="shortcode" class="form-control" placeholder="e.g. 1234 or *123#" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Network</label>
                        <input type="text" name="network" class="form-control" placeholder="e.g. MTN, Vodafone, AirtelTigo">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Expiry Date</label>
                        <input type="date" name="expiry_date" class="form-control">
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4">Save Short Code</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- ========================================== -->
<!-- 2. ADD PAYMENT MODAL                       -->
<!-- ========================================== -->
<div class="modal fade" id="addPaymentModal" tabindex="-1" aria-labelledby="addPaymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="paymentForm" action="{{ route('client-payments.store') }}" method="POST">
                @csrf
                <input type="hidden" name="client_id" value="{{ $showclient->id }}">
                
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="addPaymentModalLabel"><i class="bi bi-wallet2 text-primary me-2"></i>Record New Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Invoice / Reference Number</label>
                        <input type="text" name="invoice_number" class="form-control" placeholder="e.g. INV-2026-001" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Amount</label>
                        <input type="number" step="0.01" name="invoice_amount" class="form-control" placeholder="0.00" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Invoice Date</label>
                        <input type="date" name="invoice_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Status</label>
                        <select name="invoice_status" class="form-select" required>
                            <option value="paid">Paid</option>
                            <option value="pending">Pending</option>
                            <option value="partial">Partial</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4">Record Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- ========================================== -->
<!-- 3. UPLOAD DOCUMENT MODAL                   -->
<!-- ========================================== -->
<div class="modal fade" id="uploadDocumentModal" tabindex="-1" aria-labelledby="uploadDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="documentForm" action="{{ route('client-files.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="client_id" value="{{ $showclient->id }}">
                
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="uploadDocumentModalLabel"><i class="bi bi-file-earmark-arrow-up text-primary me-2"></i>Upload Client Document</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Document Name / Title</label>
                        <input type="text" name="name" class="form-control" placeholder="e.g. Signed Service Agreement" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Select File</label>
                        <input type="file" name="file" class="form-control" required>
                        <div class="form-text text-muted">Accepted formats: PDF, DOC, DOCX, JPG, PNG (Max size depends on server config).</div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4">Upload Document</button>
                </div>
            </form>
        </div>
    </div>
</div>