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

<div class=" p-4 md:p-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">

        <div>
            <h1 class="text-3xl font-bold text-slate-900">
                Add Product
            </h1>
        </div>

<a href="lockora_product.php"
    class="self-start inline-flex items-center gap-2 bg-white px-3 py-2 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-300">

    <i class="ri-arrow-left-line"></i>
    Back

</a>

    </div>

    <!-- Main Card -->
    <div class="bg-white rounded-2xl shadow-md p-4 sm:p-6 md:p-8">

        <!-- Section Title -->
        <h2 class="text-2xl font-bold text-slate-900 mb-6">
            Product Details
        </h2>

    <form id="productForm" autocomplete="off">

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

<div class="relative">

    <input
        type="text"
        id="product_name"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        for="product_name"
        class="absolute left-3 bg-white px-1 text-gray-500 transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Product Name
        <span class="text-red-500">*</span>

    </label>

</div>

<div class="relative">

    <input
        type="number"
        id="mrp"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        for="mrp"
        class="absolute left-3 bg-white px-1 text-gray-500 transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        MRP
        <span class="text-red-500">*</span>

    </label>

</div>

<div class="relative">

    <input
        type="number"
        id="selling_price"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        for="selling_price"
        class="absolute left-3 bg-white px-1 text-gray-500 transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Selling Price
        <span class="text-red-500">*</span>

    </label>

</div>

<div class="relative">

    <input
        type="number"
        id="stock"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        for="stock"
        class="absolute left-3 bg-white px-1 text-gray-500 transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Stock Quantity
        <span class="text-red-500">*</span>

    </label>

</div>
<div class="relative">

    <input
        type="text"
        id="serial_number"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        for="serial_number"
        class="absolute left-3 bg-white px-1 text-gray-500 transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Serial Number
        <span class="text-red-500">*</span>

    </label>

</div>

<div class="relative">

    <select id="status"
        class="w-full h-12 px-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

        <option value="">Select Status</option>
        <option value="in_stock">In Stock</option>
        <option value="out_of_stock">Out Of Stock</option>

    </select>

    <label
        class="absolute -top-2 left-3 bg-white px-1 text-xs text-gray-500">

        Status
        <span class="text-red-500">*</span>

    </label>

</div>
            </div>

            <!-- Product Images -->
            <div class="mt-6">

                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Product Images <span class="text-red-500">*</span>
                </label>

                <input
                    type="file"
                    id="productImages"
                    multiple
                    accept="image/*"
                    class="block w-full text-sm text-gray-600 border border-gray-300 rounded-xl p-3
                    file:mr-4 file:py-2 file:px-4 file:border-0 file:rounded-lg
                    file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100">

                <!-- Preview -->
                <div id="imagePreview"
                    class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 mt-4">
                </div>

            </div>

<!-- Description -->
<div class="mt-6 relative">

    <textarea
        id="description"
        rows="4"
        placeholder=" "
        class="peer w-full rounded-xl border border-gray-300 p-4 pt-6 text-sm focus:outline-none focus:border-blue-500"></textarea>

    <label
        for="description"
        class="absolute left-3 bg-white px-1 text-gray-500 text-sm transition-all duration-200
        peer-placeholder-shown:top-4
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Product Description
        <span class="text-red-500">*</span>

    </label>

</div>

<!-- Product Specifications -->
<div class="mt-8">

    <div class="flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between mb-4">

        <h2 class="text-2xl font-bold text-slate-900">
            Product Specifications
        </h2>

        <button type="button"
            onclick="addSpecification()"
            class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300">

            <i class="ri-add-line"></i>
            Add Specification

        </button>

    </div>

    <div id="specificationContainer">

        <div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-3 specification-row">

            <!-- Specification Name -->
<!-- Specification Name -->
<div class="relative flex-1">

    <input
        type="text"
        name="spec_name[]"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        class="absolute left-3 bg-white px-1 text-gray-500 text-sm transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Specification Name
        <span class="text-red-500">*</span>

    </label>

</div>

<!-- Specification Value -->
<div class="relative flex-1">

    <input
        type="text"
        name="spec_value[]"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        class="absolute left-3 bg-white px-1 text-gray-500 text-sm transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Specification Value
        <span class="text-red-500">*</span>

    </label>

</div>

            <!-- Delete Button -->
            <button type="button"
                onclick="removeSpecification(this)"
                class="w-12 h-12 rounded-xl bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition shrink-0">

                <i class="ri-delete-bin-line"></i>

            </button>

        </div>

    </div>

</div>

            <!-- Divider -->
            <div class="border-t border-gray-200 mt-6 pt-6">

                <div class="flex flex-col sm:flex-row justify-end gap-3">

                    <a href="lockora_product.php"
                        class="px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-300">

                        Cancel

                    </a>

                        <button
                            type="submit"
                            class="px-7 py-3 rounded-xl  bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-md hover:bg-blue-600 hover:shadow-lg transition-all duration-300">
                        
                            Save
                            <i class="ri-check-line ml-1"></i>
                        
                        </button>

                </div>

            </div>

        </form>

    </div>

</div>

<script>

function addSpecification() {

    const html = `
    
    <div class="flex flex-col md:flex-row gap-3 specification-row mt-3">

<!-- Specification Name -->
<div class="relative flex-1">

    <input
        type="text"
        name="spec_name[]"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        class="absolute left-3 bg-white px-1 text-gray-500 text-sm transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Specification Name
        <span class="text-red-500">*</span>

    </label>

</div>

<!-- Specification Value -->
<div class="relative flex-1">

    <input
        type="text"
        name="spec_value[]"
        placeholder=" "
        class="peer w-full h-12 px-4 pt-4 rounded-xl border border-gray-300 text-sm focus:outline-none focus:border-blue-500">

    <label
        class="absolute left-3 bg-white px-1 text-gray-500 text-sm transition-all duration-200
        peer-placeholder-shown:top-3.5
        peer-placeholder-shown:text-sm
        peer-focus:-top-2
        peer-focus:text-xs
        peer-focus:text-blue-600
        peer-[&:not(:placeholder-shown)]:-top-2
        peer-[&:not(:placeholder-shown)]:text-xs">

        Specification Value
        <span class="text-red-500">*</span>

    </label>

</div>

        <button type="button"
            onclick="removeSpecification(this)"
            class="w-12 h-12 rounded-xl bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition shrink-0">

            <i class="ri-delete-bin-line"></i>

        </button>

    </div>`;

    document.getElementById("specificationContainer")
        .insertAdjacentHTML("beforeend", html);
}

function removeSpecification(button) {
    button.closest(".specification-row").remove();
}


</script>

<script>
document.getElementById('productImages').addEventListener('change', function() {

    const preview = document.getElementById('imagePreview');
    preview.innerHTML = '';

    [...this.files].forEach((file, index) => {

        if (!file.type.startsWith('image/')) return;

        const reader = new FileReader();

        reader.onload = function(e) {

            const div = document.createElement('div');

            div.innerHTML = `
                <div class="relative rounded-xl overflow-hidden border border-gray-200 bg-white shadow-sm">



                    <button type="button"
                        onclick="this.closest('.relative').remove()"
                        class="absolute top-2 right-2 w-7 h-7 rounded-full bg-red-500 text-white flex items-center justify-center">
                        <i class="ri-close-line"></i>
                    </button>

                    <img src="${e.target.result}"
                        class="w-full h-32 object-cover">
                </div>
            `;

            preview.appendChild(div);
        }

        reader.readAsDataURL(file);

    });

});

</script>



<script>
document.getElementById("productForm").addEventListener("submit", function(e) {

    e.preventDefault();

    let productName = document.getElementById("product_name").value.trim();
    let mrp = document.getElementById("mrp").value.trim();
    let sellingPrice = document.getElementById("selling_price").value.trim();
    let stock = document.getElementById("stock").value.trim();
    let status = document.getElementById("status").value;
    let description = document.getElementById("description").value.trim();
    let images = document.getElementById("productImages").files;
    let serialNumber = document.getElementById("serial_number").value.trim();

    if(productName === "") {
Swal.fire({
    icon: "warning",
    title: "Product Name Required",
    text: "Please enter product name",
    width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
});
        return;
    }

    if(mrp === "") {
        Swal.fire({
            icon: "warning",
            title: "MRP Required",
            text: "Please enter MRP",
            width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
        });
        return;
    }

    if(sellingPrice === "") {
        Swal.fire({
            icon: "warning",
            title: "Selling Price Required",
            text: "Please enter selling price",
            width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
        });
        return;
    }

    if(stock === "") {
        Swal.fire({
            icon: "warning",
            title: "Stock Required",
            text: "Please enter stock quantity",
            width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
        });
        return;
    }
    
    if(serialNumber === "") {
    Swal.fire({
        icon: "warning",
        title: "Serial Number Required",
        text: "Please enter serial number",
        width: "350px",
        padding: "15px",
        customClass: {
            popup: 'rounded-2xl',
            title: 'text-sm font-semibold',
            htmlContainer: 'text-sm',
            confirmButton: 'px-4 py-2 text-sm'
        },
        confirmButtonColor: "#2563eb"
    });
    return;
}

    if(status === "") {
        Swal.fire({
            icon: "warning",
            title: "Status Required",
            text: "Please select status",
            width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
        });
        return;
    }

    if(images.length === 0) {
        Swal.fire({
            icon: "warning",
            title: "Image Required",
            text: "Please upload at least one product image",
            width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
        });
        return;
    }

    if(description === "") {
        Swal.fire({
            icon: "warning",
            title: "Description Required",
            text: "Please enter product description",
            width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
        });
        return;
    }
    
    // Specification Validation
const specNames = document.querySelectorAll('input[name="spec_name[]"]');
const specValues = document.querySelectorAll('input[name="spec_value[]"]');

for (let i = 0; i < specNames.length; i++) {

    if (specNames[i].value.trim() === "") {

        Swal.fire({
            icon: "warning",
            title: "Specification Name Required",
            text: "Please enter specification name",
            width: "350px",
            padding: "15px",
            customClass: {
                popup: 'rounded-2xl',
                title: 'text-sm font-semibold',
                htmlContainer: 'text-sm',
                confirmButton: 'px-4 py-2 text-sm'
            },
            confirmButtonColor: "#2563eb"
        });

        specNames[i].focus();
        return;
    }

    if (specValues[i].value.trim() === "") {

        Swal.fire({
            icon: "warning",
            title: "Specification Value Required",
            text: "Please enter specification value",
            width: "350px",
            padding: "15px",
            customClass: {
                popup: 'rounded-2xl',
                title: 'text-sm font-semibold',
                htmlContainer: 'text-sm',
                confirmButton: 'px-4 py-2 text-sm'
            },
            confirmButtonColor: "#2563eb"
        });

        specValues[i].focus();
        return;
    }
}

    Swal.fire({
        icon: "success",
        title: "Product Saved",
        text: "Product added successfully",
        confirmButtonColor: "#2563eb",
        width: "350px",
    padding: "15px",
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-sm font-semibold',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2 text-sm'
    },
    confirmButtonColor: "#2563eb"
    }).then(() => {
        // this.submit(); // Uncomment when saving to database
    });

});
</script>


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