<?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" />

    <title>Add Bank Account</title>

    <!-- SWEET ALERT -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </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;}.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;}.error-text{color:#ef4444;font-size:12px;margin-top:6px;margin-left:4px;display:block;}.error-border{border-color:#ef4444!important;}@media(max-width:640px){.ts-control{height:52px!important;min-height:52px!important;}.fi input,.si select{height:52px;}}</style>

</head>

<body class="bg-gray-100 min-h-screen">

    <!-- HEADER -->
    <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">
                    Bank Details
                </h1>
            </div>

            <a href="lockora_bank_account.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>

    <!-- FORM -->
    <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 class="mb-8">

                <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">
                    User Details
                </h2>

            </div>

            <!-- FORM -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

                <!-- BANK NAME -->
                <div class="fi">

                    <input type="text" id="bank_name" placeholder=" " />

                    <label>
                        Bank Name
                    </label>

                </div>

                <!-- ACCOUNT HOLDER -->
                <div class="fi">

                    <input type="text" id="account_holder_name" placeholder=" " />

                    <label>
                        Account Holder Name
                    </label>

                </div>

                <!-- ACCOUNT NUMBER -->
                <div class="fi">

                    <input
                        type="text"
                        id="account_number"
                        maxlength="18"
                        oninput="validateAccountNumber(this)"
                        placeholder=" " />

                    <label>
                        Account Number
                    </label>

                </div>

                <!-- IFSC -->
                <div class="fi">

                    <input type="text" id="ifsc_code" placeholder=" " />

                    <label>
                        IFSC Code
                    </label>

                </div>

                <!-- BRANCH -->
                <div class="fi">

                    <input type="text" id="branch_name" placeholder=" " />

                    <label>
                        Branch Name
                    </label>

                </div>

                <!-- ACCOUNT TYPE -->
                <div class="si">

                    <select id="account_type">

                        <option value="">
                            Account Type
                        </option>

                        <option>
                            Savings
                        </option>

                        <option>
                            Current
                        </option>

                        <option>
                            OD Account
                        </option>

                    </select>

                </div>

                <!-- MOBILE -->
                <div class="fi">

                    <input
                        type="text"
                        id="registered_mobile"
                        maxlength="10"
                        placeholder=" " />

                    <label>
                        Registered Mobile Number
                    </label>

                </div>

                <!-- EMAIL -->
                <div class="fi">

                    <input type="email" id="bank_email" placeholder=" " />

                    <label>
                        Email Linked With Bank
                    </label>

                </div>

                <!-- UPI -->
                <div class="fi">

                    <input type="text" id="upi_id" placeholder=" " />

                    <label>
                        UPI ID
                    </label>

                </div>

                <!-- PURPOSE -->
                <div class="si">

                    <select id="account_purpose">

                        <option value="">
                            Account Purpose
                        </option>

                        <option>
                            Salary
                        </option>

                        <option>
                            Vendor Payments
                        </option>

                        <option>
                            Client Receipts
                        </option>

                        <option>
                            Tax Payments
                        </option>

                        <option>
                            Main Operational Account
                        </option>

                    </select>

                </div>

                <!-- DEFAULT -->
                <div class="si">

                    <select id="default_account">

                        <option value="">
                            Default Account?
                        </option>

                        <option>
                            Yes
                        </option>

                        <option>
                            No
                        </option>

                    </select>

                </div>

                <!-- STATUS -->
                <div class="si">

                    <select id="status">

                        <option value="">
                            Status
                        </option>

                        <option>
                            Active
                        </option>

                        <option>
                            Inactive
                        </option>

                        <option>
                            Closed
                        </option>

                    </select>

                </div>

                <!-- INTERNET -->
                <div class="si">

                    <select id="internet_banking">

                        <option value="">
                            Internet Banking Enabled
                        </option>

                        <option>
                            Yes
                        </option>

                        <option>
                            No
                        </option>

                    </select>

                </div>

                <!-- CORPORATE -->
                <div class="si">

                    <select id="corporate_banking">

                        <option value="">
                            Corporate Banking Enabled
                        </option>

                        <option>
                            Yes
                        </option>

                        <option>
                            No
                        </option>

                    </select>

                </div>

                <!-- NOTES -->
                <div class="fi md:col-span-3">

                    <input type="text" id="notes" placeholder=" " />

                    <label>
                        Notes / Remarks
                    </label>

                </div>

            </div>

            <!-- BUTTON -->
            <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>

    </div>

    <script>

        const searchableSelects = [
            '#account_type',
            '#account_purpose',
            '#default_account',
            '#status',
            '#internet_banking',
            '#corporate_banking'
        ];

        searchableSelects.forEach(id => {

            if(document.querySelector(id)){

                new TomSelect(id, {
                    create:false,
                    allowEmptyOption:true,
                    placeholder:'Search...',
                    closeAfterSelect:true
                });

            }

        });

        /* SUBMIT FORM */

        function submitForm(){

            clearErrors();

            let isValid = true;

            const bankName =
                document.getElementById('bank_name');

            const accountHolder =
                document.getElementById('account_holder_name');

            const accountNumber =
                document.getElementById('account_number');

            const ifsc =
                document.getElementById('ifsc_code');

            const branch =
                document.getElementById('branch_name');

            const accountType =
                document.getElementById('account_type');

            const mobile =
                document.getElementById('registered_mobile');

            const email =
                document.getElementById('bank_email');

            const purpose =
                document.getElementById('account_purpose');

            const defaultAccount =
                document.getElementById('default_account');

            const status =
                document.getElementById('status');

            const internetBanking =
                document.getElementById('internet_banking');

            const corporateBanking =
                document.getElementById('corporate_banking');

            const emailRegex =
                /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Za-z]{2,}$/;

            const mobileRegex =
                /^[0-9]{10}$/;

            const ifscRegex =
                /^[A-Z]{4}0[A-Z0-9]{6}$/;

            /* VALIDATIONS */

            if(bankName.value.trim() === ''){
                showError(bankName,'Bank name is required');
                isValid = false;
            }

            if(accountHolder.value.trim() === ''){
                showError(accountHolder,'Account holder name is required');
                isValid = false;
            }

            if(accountNumber.value.trim() === ''){
                showError(accountNumber,'Account number is required');
                isValid = false;
            }

            if(ifsc.value.trim() === ''){
                showError(ifsc,'IFSC code is required');
                isValid = false;
            }
            else if(!ifscRegex.test(ifsc.value.toUpperCase())){
                showError(ifsc,'Enter valid IFSC code');
                isValid = false;
            }

            if(branch.value.trim() === ''){
                showError(branch,'Branch name is required');
                isValid = false;
            }

            if(accountType.value === ''){
                showError(accountType,'Please select account type');
                isValid = false;
            }

            if(mobile.value.trim() === ''){
                showError(mobile,'Mobile number is required');
                isValid = false;
            }
            else if(!mobileRegex.test(mobile.value)){
                showError(mobile,'Enter valid 10 digit mobile number');
                isValid = false;
            }

            if(email.value.trim() === ''){
                showError(email,'Email is required');
                isValid = false;
            }
            else if(!emailRegex.test(email.value)){
                showError(email,'Enter valid email address');
                isValid = false;
            }

            if(purpose.value === ''){
                showError(purpose,'Please select account purpose');
                isValid = false;
            }

            if(defaultAccount.value === ''){
                showError(defaultAccount,'Please select default account');
                isValid = false;
            }

            if(status.value === ''){
                showError(status,'Please select status');
                isValid = false;
            }

            if(internetBanking.value === ''){
                showError(internetBanking,'Please select internet banking');
                isValid = false;
            }

            if(corporateBanking.value === ''){
                showError(corporateBanking,'Please select corporate banking');
                isValid = false;
            }

            if(!isValid){
                return;
            }

            /* SUCCESS ALERT */

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

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

            });
        }

        /* SHOW ERROR */

        function showError(input,message){

            input.classList.add('error-border');

            const error =
                document.createElement('span');

            error.className =
                'error-text';

            error.innerText =
                message;

            input.parentElement.appendChild(error);
        }

        /* CLEAR ERRORS */

        function clearErrors(){

            document.querySelectorAll('.error-text')
                .forEach(el => el.remove());

            document.querySelectorAll('.error-border')
                .forEach(el => el.classList.remove('error-border'));
        }

        /* MOBILE VALIDATION */

        function validateMobile(input){

            input.value =
                input.value.replace(/[^0-9]/g, '');

            if(input.value.length > 10){

                input.value =
                    input.value.slice(0,10);
            }
        }

        /* ACCOUNT NUMBER */

        function validateAccountNumber(input){

            input.value =
                input.value.replace(/[^0-9]/g, '');
        }

        /* IFSC UPPERCASE */

        document.getElementById('ifsc_code')
            .addEventListener('input', function(){

                this.value =
                    this.value.toUpperCase();
            });

        /* MOBILE */

        document.getElementById('registered_mobile')
            .addEventListener('input', function(){

                validateMobile(this);
            });

    </script>

</body>

</html>

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