<?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 Items & Services</title>

    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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;}
        }

        /* SweetAlert custom */
        .swal-custom-popup{border-radius:24px !important;padding:2rem 2rem 1.5rem !important;}
        .swal-custom-confirm{border-radius:12px !important;padding:0.6rem 2rem !important;font-weight:600 !important;}

    </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 Items & Services</h1>
            </div>

            <a href="items_and_services.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">Items & Services Details</h2>
            </div>

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

                <!-- Name -->
                <div>
                    <input type="text"
                        placeholder="Name"
                        class="w-full h-14 rounded-2xl border border-slate-300 bg-white px-5 text-sm text-slate-700 placeholder:text-slate-400 outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition">
                </div>
                
                <!-- Item Type -->
                <div>
                    <div class="si">
                        <select id="paymentMode">
                            <option value="">Search Items & Services</option>
                            <option value="Service">Service</option>
                            <option value="Item">Item</option>
                            <option value="Software License">Software License</option>
                            <option value="Hosting">Hosting</option>
                        </select>
                    </div>
                </div>

                <!-- Price -->
                <div>
                    <input type="text"
                        placeholder="Price"
                        class="w-full h-14 rounded-2xl border border-slate-300 bg-white px-5 text-sm text-slate-700 placeholder:text-slate-400 outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition">
                </div>
                
                <!-- Date -->
                <div>
                    <input type="date"
                        placeholder="Date"
                        class="w-full h-14 rounded-2xl border border-slate-300 bg-white px-5 text-sm text-slate-700 placeholder:text-slate-400 outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition">
                </div>


            </div>

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

                <button
                    type="button"
                    onclick="handleSave()"
                    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 Items & Services
                    <i class="ri-check-line"></i>
                </button>

            </div>

        </div>

    </div>

    <script>

        new TomSelect('#paymentMode', {
            create: false,
            allowEmptyOption: true,
            placeholder: 'Search Items & Services',
            closeAfterSelect: true
        });

        function handleSave() {
            Swal.fire({
                icon: 'success',
                title: 'Saved!',
                text: 'Item / Service has been saved successfully.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#8b5cf6',
                customClass: {
                    popup:         'swal-custom-popup',
                    confirmButton: 'swal-custom-confirm'
                },
                timer: 3000,
                timerProgressBar: true,
                willClose: () => { window.location.href = 'items_and_services.php'; }
            }).then(() => {
                window.location.href = 'items_and_services.php';
            });
        }

    </script>

</body>

</html>

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