@extends('Admin.layout')

@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.products')  }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Edit Products
        </h5>
    </div>
</div>

<div class="card p-5">
    <h5>Edit Products</h5>
    <form class="mb-3" action="{{route('admin.products')}}" class="form-label" class="form">

        <div class="row g-5">
            <h6>Basic information</h6>
            <div class="col-lg-4 mb-3">
                <label for="restaurant_id" class="form-label">Product ID</label>
                <input type="text" class="form-control bg-light" name="product_id" id="product_id" value="PRD001" readonly>
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Product Name</label>
                <input
                    type="text"
                    class="form-control"
                    name="product_name"
                    value="Diamond Halo Ring">

            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">SKU</label>
                <input
                    type="text"
                    class="form-control"
                    name="sku"
                    value="SKU001">

            </div>
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Category</label>
                        <select class="form-select" id="category" name="category">
                            <option value="" disabled>Select Category</option>
                            <option value="rings" selected>Rings</option>
                            <option value="necklaces">Necklaces</option>
                            <option value="earrings">Earrings</option>
                            <option value="bracelets">Bracelets</option>
                            <option value="bangles">Bangles</option>
                            <option value="mens-jewelry">Men's Jewelry</option>
                        </select>
                    </div>
                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select">
                            <option>Select</option>
                            <option selected>Active</option>
                            <option>Inactive</option>
                        </select>
                    </div>


                </div>
            </div>

            <div class="col-lg-6 mb-3">
                <label class="form-label">Short Description</label>
                <textarea class="form-control" rows="4">Elegant 18K gold diamond halo ring designed for timeless everyday elegance.</textarea>
            </div>
            <div class="col-lg-12 mb-3">
                <label class="form-label">Description</label>
                <textarea class="form-control" rows="4">This elegant diamond halo ring is crafted in premium 18K gold and designed to add timeless sophistication to every occasion. The central diamond is surrounded by brilliant accent stones that create a classic halo effect.</textarea>
            </div>


            <h6>Product Image</h6>


            {{-- MAIN IMAGE --}}
            <div class="col-lg-4">

                <label class="form-label fw-semibold">
                    Main Product Image
                    <span class="text-danger">*</span>
                </label>

                <input type="file"
                    class="d-none"
                    id="mainImage"
                    name="main_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    onchange="previewMainImage(event)">

                <label for="mainImage"
                    class="border border-2 rounded-3 d-flex flex-column justify-content-center align-items-center text-center p-4"
                    style="min-height: 250px; cursor:pointer;">

                    <div id="mainImageUploadContent">

                        <i class="fa-solid fa-cloud-arrow-up fs-2 text-primary mb-3"></i>

                        <div class="fw-semibold">
                            Upload Main Image
                        </div>

                        <small class="text-muted">
                            JPG, PNG, WEBP
                        </small>

                    </div>
                    <img id="mainImagePreview"
                        src=""
                        class="img-fluid rounded-3 d-none"
                        style="max-height:220px; object-fit:contain;">

                </label>

            </div>
            {{-- GALLERY --}}
            <div class="col-lg-8">

                <label class="form-label fw-semibold">
                    Gallery Images
                </label>

                <input type="file"
                    class="d-none"
                    id="galleryImages"
                    name="gallery_images[]"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    multiple
                    onchange="previewGalleryImages(event)">
                <label for="galleryImages"
                    class="border border-2 rounded-3 d-flex justify-content-center align-items-center text-center p-4 mb-3"
                    style="min-height:120px; cursor:pointer;">

                    <div>

                        <i class="fa-solid fa-images fs-2 text-primary mb-2"></i>

                        <div class="fw-semibold">
                            Upload Gallery Images
                        </div>

                        <small class="text-muted">
                            You can select multiple images
                        </small>

                    </div>

                </label>


                <div class="row g-3"
                    id="galleryPreview">
                </div>

            </div>


            <h5>Pricing</h5>

            <div class="col-lg-6 mb-3">
                <label for="mrp"
                    class="form-label fw-semibold">
                    MRP
                    <span class="text-danger">*</span>
                </label>
                <div class="input-group">

                    <span class="input-group-text">
                        ₹
                    </span>

                    <input type="number"
                        class="form-control"
                        id="mrp"
                        name="mrp"
                        min="0"
                        step="0.01"
                        value="25000">

                </div>

            </div>

            <div class="col-md-6">

                <label for="selling_price"
                    class="form-label fw-semibold">
                    Selling Price
                    <span class="text-danger">*</span>
                </label>

                <div class="input-group">

                    <span class="input-group-text">
                        ₹
                    </span>

                    <input type="number"
                        class="form-control"
                        id="selling_price"
                        name="selling_price"
                        min="0"
                        step="0.01"
                        value="22999">

                </div>
            </div>

            <div class="col-md-6">

                <label for="discount"
                    class="form-label fw-semibold">
                    Discount
                </label>

                <div class="input-group">

                    <input type="text"
                        class="form-control"
                        id="discount"
                        name="discount"
                        value="2">

                    <span class="input-group-text">
                        %
                    </span>

                </div>

            </div>

            <div class="col-md-6">

                <label for="gst"
                    class="form-label fw-semibold">
                    GST
                </label>

                <select class="form-select"
                    id="gst"
                    name="gst">

                    <option value="0">
                        0%
                    </option>

                    <option value="3" selected>
                        3%
                    </option>

                    <option value="5">
                        5%
                    </option>

                    <option value="12">
                        12%
                    </option>
                    <option value="18">
                        18%
                    </option>

                </select>

            </div>


            <h5>Jewelry Details</h5>

            <div class="col-md-6">

                <label class="form-label">
                    Metal Type
                </label>

                <select name="metal_type"
                    class="form-select">

                    <option value="" disabled>
                        Select Metal
                    </option>

                    <option value="gold" selected>
                        Gold
                    </option>

                    <option value="rose_gold">
                        Rose Gold
                    </option>

                    <option value="white_gold">
                        White Gold
                    </option>
                    <option value="silver">
                        Silver
                    </option>

                    <option value="platinum">
                        Platinum
                    </option>

                </select>

            </div>

            {{-- PURITY --}}
            <div class="col-md-6">

                <label class="form-label">
                    Purity
                </label>

                <select name="purity"
                    class="form-select">

                    <option value="" disabled>
                        Select Purity
                    </option>

                    <option value="18k" selected>
                        18K
                    </option>

                    <option value="22k">
                        22K
                    </option>
                    <option value="24k">
                        24K
                    </option>

                    <option value="925">
                        925
                    </option>

                </select>

            </div>

            <div class="col-md-6">

                <label class="form-label">
                    Metal Weight
                </label>

                <div class="input-group">

                    <input type="number"
                        name="metal_weight"
                        class="form-control"
                        placeholder="Enter weight"
                        min="0"
                        step="0.01"
                        value="3.26">

                    <span class="input-group-text">
                        g
                    </span>

                </div>

            </div>

            <div class="col-md-6">

                <label class="form-label">
                    Stone Type
                </label>

                <select name="stone_type"
                    id="stoneType"
                    class="form-select">

                    <option value="none">
                        None
                    </option>

                    <option value="diamond" selected>
                        Diamond
                    </option>

                    <option value="ruby">
                        Ruby
                    </option>


                    <option value="emerald">
                        Emerald
                    </option>

                    <option value="sapphire">
                        Sapphire
                    </option>

                    <option value="pearl">
                        Pearl
                    </option>

                    <option value="other">
                        Other
                    </option>

                </select>

            </div>


            <h5>Stone Details</h5>


            <div class="col-md-4">

                <label class="form-label">
                    Stone Weight
                </label>

                <div class="input-group">

                    <input type="number"
                        name="stone_weight"
                        class="form-control"
                        value="0.2"
                        min="0"
                        step="0.01">

                    <span class="input-group-text">
                        ct
                    </span>

                </div>

            </div>
            <div class="col-md-4">

                <label class="form-label">
                    Stone Count
                </label>

                <input type="number"
                    name="stone_count"
                    class="form-control"
                    value="3"
                    min="0">

            </div>
            <div class="col-md-4">

                <label class="form-label">
                    Color
                </label>

                <input type="text"
                    name="stone_color"
                    class="form-control"
                    value="G">

            </div>

            <div class="col-md-4">

                <label class="form-label">
                    Clarity
                </label>

                <select name="stone_clarity"
                    class="form-select">

                    <option value="" disabled>
                        Select Clarity
                    </option>

                    <option value="fl">
                        FL
                    </option>

                    <option value="if" selected>
                        IF
                    </option>

                    <option value="vvs1">
                        VVS1
                    </option>

                    <option value="vvs2">
                        VVS2
                    </option>

                    <option value="vs1">
                        VS1
                    </option>

                    <option value="vs2">
                        VS2
                    </option>
                    <option value="si1">
                        SI1
                    </option>

                    <option value="si2">
                        SI2
                    </option>

                </select>

            </div>

            <div class="col-md-8">

                <label class="form-label">
                    Certification
                </label>

                <input type="text"
                    name="certification"
                    class="form-control"
                    value="BIS">

            </div>

            <h5>Variants</h5>
            <div class="col-lg-12">

                <label for="variantType" class="form-label">
                    Variant Type
                </label>

                <select name="variant_type"
                    id="variantType"
                    class="form-select">

                    <option value="">
                        No Variant
                    </option>

                    <option value="ring_size" selected>
                        Ring Size
                    </option>

                    <option value="bracelet_size">
                        Bracelet Size
                    </option>

                    <option value="necklace_length">
                        Necklace Length
                    </option>

                </select>


                {{-- RING SIZES --}}
                <div class="mt-4 mb-3"
                    id="ringSizes">

                    <label class="form-label fw-semibold">
                        Available Ring Sizes
                    </label>

                    <div class="d-flex flex-wrap gap-2">

                        @foreach(['6','7','8','9','10','11','12'] as $size)

                        <input type="checkbox"
                            class="btn-check"
                            name="variants[]"
                            value="{{ $size }}"
                            id="ring{{ $size }}"
                            autocomplete="off"
                            {{ in_array($size, ['8', '7', '11']) ? 'checked' : '' }}>

                        <label class="btn btn-outline-primary"
                            for="ring{{ $size }}">
                            {{ $size }}
                        </label>

                        @endforeach

                    </div>


                    {{-- BRACELET SIZES --}}
                    <div class="mt-4 d-none"
                        id="braceletSizes">

                        <label class="form-label fw-semibold">
                            Available Bracelet Sizes
                        </label>

                        <div class="d-flex flex-wrap gap-2">

                            @foreach(['6.5"','7"','7.5"','8"'] as $size)

                            <input type="checkbox"
                                class="btn-check"
                                name="variants[]"
                                value="{{ $size }}"
                                id="bracelet{{ $loop->index }}"
                                autocomplete="off">

                            <label class="btn btn-outline-primary"
                                for="bracelet{{ $loop->index }}">
                                {{ $size }}
                            </label>

                            @endforeach

                        </div>

                    </div>


                    {{-- NECKLACE LENGTHS --}}
                    <div class="mt-4 d-none"
                        id="necklaceLengths">

                        <label class="form-label fw-semibold">
                            Available Necklace Lengths
                        </label>

                        <div class="d-flex flex-wrap gap-2">

                            @foreach(['16"','18"','20"','22"'] as $length)

                            <input type="checkbox"
                                class="btn-check"
                                name="variants[]"
                                value="{{ $length }}"
                                id="necklace{{ $loop->index }}"
                                autocomplete="off">

                            <label class="btn btn-outline-primary"
                                for="necklace{{ $loop->index }}">
                                {{ $length }}
                            </label>

                            @endforeach

                        </div>

                    </div>

                </div>

                <h5>Frontend Display</h5>


                {{-- PRODUCT FLAGS --}}
                <div class="col-lg-12">

                    <div class="row g-4">

                        {{-- NEW ARRIVAL --}}
                        <div class="col-lg-4">

                            <div class="form-check">

                                <input class="form-check-input"
                                    type="checkbox"
                                    name="new_arrival"
                                    value="1"
                                    id="newArrival">

                                <label class="form-check-label"
                                    for="newArrival">

                                    <strong>
                                        New Arrival
                                    </strong>

                                    <small class="text-muted d-block">
                                        Show in New Arrivals section
                                    </small>

                                </label>

                            </div>

                        </div>


                        {{-- BEST SELLER --}}
                        <div class="col-lg-4">

                            <div class="form-check">

                                <input class="form-check-input"
                                    type="checkbox"
                                    name="best_seller"
                                    value="1"
                                    id="bestSeller" checked>

                                <label class="form-check-label"
                                    for="bestSeller">

                                    <strong>
                                        Best Seller
                                    </strong>

                                    <small class="text-muted d-block">
                                        Show in Best Sellers section
                                    </small>

                                </label>

                            </div>

                        </div>

                    </div>

                </div>


            </div>


            <div class="d-flex flex-column flex-lg-row justify-content-center gap-3 my-5">

                <button type='reset' class="btn bg-light">Discard</button>
                <button type="submit" class="btn btn-primary" id='finalSubmit'>
                    Save
                </button>
            </div>

    </form>

</div>




<script>
    /* ============================================================
       MAIN IMAGE PREVIEW
    ============================================================ */

    function previewMainImage(event) {

        const input = event.target;
        const preview = document.getElementById('mainImagePreview');
        const uploadContent = document.getElementById('mainImageUploadContent');

        if (input.files && input.files[0]) {

            const file = input.files[0];

            if (!file.type.startsWith('image/')) {

                alert('Please select a valid image file.');

                input.value = '';

                return;
            }

            if (file.size > 5 * 1024 * 1024) {

                alert('Image size must be less than 5 MB.');

                input.value = '';

                return;
            }

            const reader = new FileReader();

            reader.onload = function(e) {

                preview.src = e.target.result;
                preview.classList.remove('d-none');

                uploadContent.classList.add('d-none');

            };

            reader.readAsDataURL(file);

        }

    }


    /* ============================================================
       GALLERY IMAGE PREVIEW
    ============================================================ */


    function previewGalleryImages(event) {

        const files = event.target.files;

        const previewContainer =
            document.getElementById('galleryPreview');

        // Maximum 4 images
        if (files.length > 4) {

            alert('You can select a maximum of 4 images.');

            event.target.value = '';

            previewContainer.innerHTML = '';

            return;
        }

        previewContainer.innerHTML = '';

        Array.from(files).forEach(function(file) {

            if (!file.type.startsWith('image/')) {

                return;
            }

            if (file.size > 5 * 1024 * 1024) {

                alert(file.name + ' is larger than 5 MB.');

                return;
            }

            const reader = new FileReader();

            reader.onload = function(e) {

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

                col.className = 'col-6 col-md-3';

                col.innerHTML = `
                <div class="border rounded-3 p-2">

                    <img src="${e.target.result}"
                         class="img-fluid rounded-3 w-100"
                         style="height:120px; object-fit:cover;">

                </div>
            `;

                previewContainer.appendChild(col);

            };

            reader.readAsDataURL(file);

        });

    }


    // =========================================================
    // STONE DETAILS
    // =========================================================

    document.getElementById('stoneType').addEventListener('change', function() {

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

        if (this.value !== 'none') {

            stoneDetails.classList.remove('d-none');

        } else {

            stoneDetails.classList.add('d-none');

        }

    });

    // =========================================================
    // PRODUCT VARIANTS
    // =========================================================

    document.getElementById('variantType').addEventListener('change', function() {

        const ringSizes = document.getElementById('ringSizes');
        const braceletSizes = document.getElementById('braceletSizes');
        const necklaceLengths = document.getElementById('necklaceLengths');

        // Hide everything first
        ringSizes.classList.add('d-none');
        braceletSizes.classList.add('d-none');
        necklaceLengths.classList.add('d-none');


        // Show selected variant
        if (this.value === 'ring_size') {

            ringSizes.classList.remove('d-none');

        } else if (this.value === 'bracelet_size') {

            braceletSizes.classList.remove('d-none');

        } else if (this.value === 'necklace_length') {

            necklaceLengths.classList.remove('d-none');

        }

    });
</script>



@endsection