<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Remix Icon CDN -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" rel="stylesheet"/>
    <!-- Tom Select CSS (for searchable dropdowns) -->
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Tom Select JS -->
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

    <style>.ts-wrapper{width:100%;position:relative;}.ts-control{min-height:56px!important;height:56px!important;border:1px solid #d1d5db!important;border-radius:16px!important;padding:0 16px!important;background:#fff!important;box-shadow:none!important;display:flex!important;align-items:center!important;overflow:hidden!important;}.ts-control input{font-size:14px!important;}.ts-wrapper.focus .ts-control{border-color:#8b5cf6!important;box-shadow:0 0 0 4px rgba(139,92,246,0.10)!important;}.ts-dropdown{margin-top:8px!important;border-radius:16px!important;border:1px solid #e5e7eb!important;overflow:hidden!important;background:#fff!important;box-shadow:0 10px 30px rgba(0,0,0,0.10)!important;z-index:9999!important;}.ts-dropdown-content{max-height:220px!important;overflow-y:auto!important;overflow-x:hidden!important;scroll-behavior:smooth;}.ts-dropdown-content::-webkit-scrollbar{width:6px;}.ts-dropdown-content::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:20px;}.ts-dropdown .option{padding:14px 16px!important;font-size:14px!important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff!important;color:#7c3aed!important;}.fi{position:relative;}.fi input{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi input:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;}.fi input:focus + label,.fi input:not(:placeholder-shown) + label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}@media(max-width:640px){.ts-control{height:52px!important;min-height:52px!important;}.fi input,.si select{height:52px;}}textarea{width:100%;border-radius:16px;border:1px solid #d1d5db;padding:12px 16px;outline:none;font-size:0.95rem;transition:0.2s;resize:vertical;}textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}</style>
</head>
<body class="bg-gray-100 min-h-screen">

    <!-- ========== HEADER SECTION (unchanged style) ========== -->
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">
        <div class="flex items-start justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">
                    Add Credit
                </h1>
            </div>
            
            <a href="lockora_credit_note.php">
            <button
                class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">
                <i class="ri-arrow-left-line"></i>
                Back
            </button>
            </a>
            
        </div>
    </div>

    <!-- ========== MAIN FORM CARD ========== -->
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 pb-6 sm:pb-10">
        <div class="w-full bg-white rounded-3xl shadow-xl border border-gray-100 p-4 sm:p-6 md:p-8 lg:p-12">
            <div id="formContent">

                <div class="mb-8">
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">
                        Credit Details
                    </h2>
                </div>

                <div class="credit-section">

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">

                        <!-- Date -->
                        <div class="fi">
                            <input type="date" id="creditDate" placeholder=" " value="2026-05-25" />
                            <label>Date</label>
                        </div>

                        <div class="si">
                            <select id="clientName" class="credit-select">
                                <option value="">Select Client</option>
                                <option>ABC Corporation</option>
                                <option>Tech Innovators Ltd</option>
                                <option>Global Solutions Inc</option>
                                <option>Creative Design Studio</option>
                            </select>
                        </div>

                        <!-- Invoice Number -->
                        <div class="si">
                            <select id="invoiceNumber" class="credit-select">
                                <option value="">Select Invoice</option>
                                <option>INV-101</option>
                                <option>INV-102</option>
                                <option>INV-205</option>
                                <option>INV-309</option>
                            </select>
                        </div>

                        <!-- Project Name -->
                        <div class="fi">
                            <input type="text" id="projectName" placeholder=" " value="CRM System" />
                            <label>Project Name</label>
                        </div>

                        <!-- Credit Amount -->
                        <div class="fi">
                            <input type="number" id="creditAmount" placeholder=" " value="5000" step="any" />
                            <label>Credit Amount</label>
                        </div>
                    </div>

                    <!-- Reason (textarea) -->
                    <div class="mt-5">
                        <label class="text-sm font-medium text-gray-700 mb-2 block">Reason</label>
                        <textarea id="creditReason" rows="4" placeholder="Enter reason for credit note..."></textarea>
                    </div>
                </div>

                <!-- BUTTON (original position, untouched style) -->
                <div class="flex justify-end mt-8 pt-6 border-t border-gray-100">
                    <button
                        onclick="submitForm()"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">
                        Save
                        <i class="ri-check-line"></i>
                    </button>
                </div>
            </div>

            <!-- SUCCESS MESSAGE (unchanged) -->
            <div id="successMsg" class="hidden text-center py-10">
                <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-4">
                    <i class="ri-check-line text-3xl text-violet-600"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-900 mb-2">
                    Credit Note Created!
                </h2>
            </div>

        </div>
    </div>

<script>
    const searchableSelects = [
        '#clientName',
        '#invoiceNumber'
    ];

    searchableSelects.forEach(id => {
        if (document.querySelector(id)) {
            new TomSelect(id, {
                create: false,
                allowEmptyOption: true,
                placeholder: 'Search...',
                closeAfterSelect: true,
                render: {
                    no_results: function () {
                        return '<div class="p-3 text-sm text-gray-400">No results found</div>';
                    }
                }
            });
        }
    });

    function submitForm() {

    const creditDate =
        document.getElementById('creditDate')?.value || '';

    const clientName =
        (document.getElementById('clientName')?.tomselect?.getValue()
        || document.getElementById('clientName')?.value) || '';

    const invoiceNumber =
        (document.getElementById('invoiceNumber')?.tomselect?.getValue()
        || document.getElementById('invoiceNumber')?.value) || '';

    const projectName =
        document.getElementById('projectName')?.value || '';

    const creditAmount =
        document.getElementById('creditAmount')?.value || '';

    const creditReason =
        document.getElementById('creditReason')?.value || '';

    Swal.fire({
        icon: 'success',
        title: 'Success!',
        text: 'Credit Note Created Successfully',
        confirmButtonColor: '#8b5cf6'
    }).then(() => {

        window.location.href = 'credit_note.php';

    });
}

    function resetForm() {

        document.querySelectorAll('input').forEach(el => {
            if (el.type !== 'submit' && el.type !== 'button') {
                el.value = '';
            }
        });

        const textarea = document.getElementById('creditReason');
        if (textarea) textarea.value = '';

        document.querySelectorAll('select').forEach(el => {
            el.selectedIndex = 0;

            if (el.tomselect) {
                el.tomselect.clear();
                el.tomselect.refreshOptions(false);
            }
        });

        document.getElementById('formContent').classList.remove('hidden');
        document.getElementById('successMsg').classList.add('hidden');
    }
</script>


</body>
</html>

<?php include 'footer.php'; ?>