<?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 Payment Mode</title>

    <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;
        }

        .ts-dropdown .option{
            padding:14px 16px !important;
            font-size:14px !important;
            cursor:pointer;
        }

        .ts-dropdown .active{
            background:#f3e8ff !important;
            color:#7c3aed !important;
        }

        .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;
        }

        .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{
                min-height:52px !important;
                height:52px !important;
            }

            .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">
                    Add Payment Mode
                </h1>

            </div>

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

            </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">
                    Payment Mode Details
                </h2>

            </div>

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

                <!-- PAYMENT MODE -->
                <div>

                    <div class="si">

                        <select id="paymentMode">

<option value="">
    Select Payment Mode
</option>

<option value="Cash">
    Cash
</option>

<option value="UPI">
    UPI
</option>

<option value="Bank Transfer">
    Bank Transfer
</option>

<option value="Cheque">
    Cheque
</option>

                        </select>

                    </div>

                </div>
                
<!-- DESCRIPTION -->
<div>

    <input
        type="text"
        id="description"
        placeholder="Description"
        class="w-full h-14 border border-gray-300 rounded-2xl px-4 text-[15px] outline-none focus:border-violet-500 focus:ring-4 focus:ring-violet-100 transition">

</div>

            </div>

            <!-- BUTTON -->
            <div class="flex justify-end mt-8 pt-6 border-t border-gray-100">

                <button
                    type="button"
                    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 Payment Mode

                    <i class="ri-check-line"></i>

                </button>

            </div>

        </div>

    </div>

<script>

new TomSelect('#paymentMode', {

    create:false,

    allowEmptyOption:true,

    placeholder:'Select Payment Mode',

    closeAfterSelect:true

});

</script>

</body>

</html>

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