@extends('Admin.layout')

@section('content')

<style>
    textarea.form-control {

        height: 90px;

        resize: none;

    }

    .upload-container {

        border: 2px dashed #cbd5e1;

        border-radius: 12px;

        background: #fdfdfd;

        min-height: 250px;

        padding: 15px;

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        align-content: flex-start;

    }

    .image-preview-wrapper {

        position: relative;

        width: 100px;

        height: 100px;

        border-radius: 8px;

        border: 1px solid #e2e8f0;

    }

    .image-preview-wrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 7px;

    }

    .remove-img-btn {

        position: absolute;

        top: -5px;

        right: -5px;

        background: #ff4d4d;

        color: white;

        border: none;

        border-radius: 50%;

        width: 20px;

        height: 20px;

        font-size: 12px;

        cursor: pointer;

        z-index: 10;

    }

    .add-image-box {

        width: 100px;

        height: 100px;

        border: 2px dashed #0056b3;

        border-radius: 8px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        color: #0056b3;

        transition: 0.3s;

        background: #f0f7ff;

    }

    .add-image-box:hover {

        background: #e0eeff;

    }

    .unit-flex-container {

        display: flex;

        flex-direction: column;

        width: 100%;

    }

    .unit-input-row {

        display: flex;

        gap: 15px;

        margin-bottom: 15px;

        width: 100%;

    }

    .col-val {

        flex: 1.2;

    }

    .col-unit {

        flex: 1.2;

    }

    .col-mrp {

        flex: 1.2;

    }

    .col-price {

        flex: 1.2;

    }

    .col-stock {

        flex: 1;

    }

    .col-display {

        flex: 1.2;

    }

    .col-action {

        flex: 1;

        display: flex;

        flex-direction: column;

    }

    .col-action .btn-remove {

        margin-top: auto;

    }

    .unit-input-row:has(.text-danger) .col-action {

        justify-content: center;

    }

    .unit-input-row:has(.text-danger) .col-action .btn-remove {

        margin-top: -10px;

    }

    /* --- Buttons --- */

    .btn-remove {

        background-color: #ff4d4d;

        color: white;

        border: none;

        border-radius: 6px;

        height: 42px;

        width: 100%;

    }

    .btn-add-more {

        background-color: #0056b3;

        color: white;

        padding: 8px 20px;

        border-radius: 6px;

        border: none;

        font-weight: 500;

    }

    .btn-create {

        background-color: #0056b3;

        padding: 10px 50px;

        border: none;

    }

    .btn-discard {

        background-color: #e5e7eb;

        color: #374151;

        padding: 10px 50px;

        text-decoration: none;

        border-radius: 6px;

    }

    /* Full Responsiveness */

    @media (max-width: 992px) {

        .unit-input-row {

            flex-direction: column;

            gap: 8px;

            border-bottom: 1px solid #eee;

            padding-bottom: 15px;

        }

        .col-action {

            width: 100%;

        }

    }
</style>

<div class="container-xxl container-p-y">

    <!-- <h4 class="mb-4 fw-bold">Add Product</h4> -->

    <div class="d-flex align-items-center mb-3">

        <a href="{{ route('products') }}">

            <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">

                <g filter="url(#filter0_d_62_37664)">

                    <rect x="10" y="1" width="44" height="44" rx="10" fill="white"

                        shape-rendering="crispEdges" />

                    <path d="M34 18L29 23L34 28" stroke="#292460" stroke-width="2" stroke-linecap="round"

                        stroke-linejoin="round" />

                </g>

                <defs>

                    <filter id="filter0_d_62_37664" x="0" y="0" width="64" height="64"

                        filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

                        <feFlood flood-opacity="0" result="BackgroundImageFix" />

                        <feColorMatrix in="SourceAlpha" type="matrix"

                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />

                        <feMorphology radius="2" operator="erode" in="SourceAlpha"

                            result="effect1_dropShadow_62_37664" />

                        <feOffset dy="9" />

                        <feGaussianBlur stdDeviation="6" />

                        <feComposite in2="hardAlpha" operator="out" />

                        <feColorMatrix type="matrix"

                            values="0 0 0 0 0.399674 0 0 0 0 0.197743 0 0 0 0 0.558333 0 0 0 0.12 0" />

                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_62_37664" />

                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_62_37664" result="shape" />

                    </filter>

                </defs>

            </svg>

        </a>

        <h4 class="mb-4 fw-bold"> Add Products</h4>

    </div>

    <div class="card p-4 shadow-sm border-0">

        <form action="{{ route('add_product_form') }}" id="productForm" method="POST" enctype="multipart/form-data">

            @csrf

            <div class="row g-4">

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

                    <div class="row">

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

                            <label class="form-label">Select Category</label>

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

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

                                @foreach ($datatable as $data)

                                <option value="{{ $data->id }}"

                                    {{ old('category_id') == $data->id ? 'selected' : '' }}>

                                    {{ $data->category_name }}

                                </option>

                                @endforeach

                            </select>

                            @error('category_id')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

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

                            <label class="form-label">Product Name</label>

                            <input type="text" name="product_name" value="{{ old('product_name') }}"

                                class="form-control" placeholder="Enter Product Name">

                            @error('product_name')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-6 mb-3">

                            <label class="form-label">Tax (percentage %)</label>

                            <input type="text" name="tax" value="{{ old('tax') }}" class="form-control"

                                placeholder="Enter tax percentage"

                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

                            @error('tax')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        {{-- <div class="col-6 mb-3">

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

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

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

                                    @foreach ($types as $type)

                                        <option value="{{ $type->id }}"

                        {{ old('type') == $type->id ? 'selected' : '' }}>

                        {{ $type->type }}

                        </option>

                        @endforeach

                        </select>

                        @error('type')

                        <small class="text-danger">{{ $message }}</small>

                        @enderror

                    </div> --}}

                    <div class="col-6 mb-3">

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

                        @foreach ($types as $type)

                        <div class="form-check">

                            <input class="form-check-input"

                                type="checkbox"

                                name="type[]"

                                value="{{ $type->id }}"

                                id="type{{ $type->id }}"

                                {{ (collect(old('type'))->contains($type->id)) ? 'checked' : '' }}>

                            <label class="form-check-label" for="type{{ $type->id }}">

                                {{ $type->type }}

                            </label>

                        </div>

                        @endforeach

                        @error('type')

                        <small class="text-danger">{{ $message }}</small>

                        @enderror

                    </div>

                    <div class="col-12">

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

                        <textarea name="description" class="form-control" placeholder="Enter message">{{ old('description') }}</textarea>

                        @error('description')

                        <small class="text-danger">{{ $message }}</small>

                        @enderror

                    </div>

                </div>

            </div>

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

                <label class="form-label">Product Images</label>

                @php

                $oldImages = old('old_images', isset($product) ? json_decode($product->product_image) : []);

                $newImagesBase64 = old('product_image', session('temp_images', []));

                $newFilenames = old('new_images_filenames', session('temp_filenames', []));

                @endphp

                <div class="upload-container" id="image-gallery">

                    {{-- OLD IMAGES --}}

                    @foreach ($oldImages as $oldImage)

                    <div class="image-preview-wrapper old-image" data-old="{{ $oldImage }}">

                        <img src="{{ asset('storage/' . $oldImage) }}"

                            style="width:70px;height:70px;object-fit:cover;margin:2px;">

                        <button type="button" class="remove-img-btn">✕</button>

                        <input type="hidden" name="old_images[]" value="{{ $oldImage }}">

                    </div>

                    @endforeach

                    {{-- NEW IMAGES --}}

                    @foreach ($newImagesBase64 as $i => $base64)

                    <div class="image-preview-wrapper new-image" data-index="{{ $i }}">

                        <img src="{{ $base64 }}"

                            style="width:70px;height:70px;object-fit:cover;margin:2px;">

                        <button type="button" class="remove-img-btn">✕</button>

                        <input type="hidden" name="product_image[]" value="{{ $base64 }}">

                        <input type="hidden" name="new_images_filenames[]"

                            value="{{ $newFilenames[$i] ?? '' }}">

                    </div>

                    @endforeach

                    {{-- ADD IMAGE BOX --}}

                    <div class="add-image-box" onclick="document.getElementById('file-input').click()">

                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"

                            xmlns="http://www.w3.org/2000/svg">

                            <path

                                d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"

                                stroke="#2F2B3D" stroke-opacity="0.9" stroke-width="1.5" stroke-linecap="round"

                                stroke-linejoin="round" />

                            <path d="M8 12H16" stroke="#2F2B3D" stroke-opacity="0.9" stroke-width="1.5"

                                stroke-linecap="round" stroke-linejoin="round" />

                            <path d="M12 16V8" stroke="#2F2B3D" stroke-opacity="0.9" stroke-width="1.5"

                                stroke-linecap="round" stroke-linejoin="round" />

                        </svg>

                        <span style="font-size:11px;">Add New</span>

                    </div>

                </div>

                @error('product_image')

                <small class="text-danger d-block mt-1">{{ $message }}</small>

                @enderror

                <input type="file" id="file-input" name="images[]" multiple hidden accept="image/*">

                <small class="text-muted d-block mt-2 text-center">(Max file size: 5 MB, PNG Jpg only)</small>

            </div>

            <hr class="my-5">

            <div class="unit-flex-container">

                <div id="unit-repeater-wrapper">

                    @php

                    $units = old('units', [[]]);

                    @endphp

                    @foreach ($units as $i => $unit)

                    <div class="unit-input-row">

                        <div class="col-val">

                            <label class="form-label">Unit Value</label>

                            <input type="text" name="units[{{ $i }}][value]"

                                class="form-control" value="{{ old("units.$i.value") }}"

                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" placeholder="0.00">

                            @error("units.$i.value")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-unit">

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

                            <select name="units[{{ $i }}][unit]" class="form-select">

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

                                <option value="gm" {{ old("units.$i.unit") == 'gm' ? 'selected' : '' }}>gm

                                </option>

                                <option value="kg" {{ old("units.$i.unit") == 'kg' ? 'selected' : '' }}>kg

                                </option>
                                <option value="piece" {{ old("units.$i.unit") == 'piece' ? 'selected' : '' }}>Piece

                                </option>

                                <option value="box" {{ old("units.$i.unit") == 'Box' ? 'selected' : '' }}>Box

                                </option>
                            </select>

                            @error("units.$i.unit")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-mrp">

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

                            <input type="text" name="units[{{ $i }}][mrp]"

                                class="form-control" value="{{ old("units.$i.mrp") }}"

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

                                placeholder="₹0.00">

                            @error("units.$i.mrp")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-price">

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

                            <input type="text" name="units[{{ $i }}][price]"

                                class="form-control" placeholder="₹0.00"

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

                                value="{{ old("units.$i.price") }}">

                            @error("units.$i.price")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-stock">

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

                            <input type="text" name="units[{{ $i }}][stock]"

                                class="form-control" placeholder="0"

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

                                value="{{ old("units.$i.stock") }}">

                            @error("units.$i.stock")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        {{-- <div class="col-display">

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

                                        <select name="units[{{ $i }}][display]" class="form-select">

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

                        <option value="1" {{ old("units.$i.display") == '1' ? 'selected' : '' }}>

                            Yes</option>

                        <option value="0" {{ old("units.$i.display") == '0' ? 'selected' : '' }}>

                            No</option>

                        </select>

                        @error("units.$i.display")

                        <small class="text-danger">{{ $message }}</small>

                        @enderror

                    </div> --}}

                    <div class="col-action">

                        <button type="button" class="btn-remove remove-row">✕ Remove</button>

                    </div>

                </div>

                @endforeach

            </div>

    </div>

    <div class="text-end mt-2">

        <button type="button" class="btn-add-more" id="add-row-btn">＋ Add More</button>

    </div>

    <div class="text-center border-top pt-4 mt-5">

        <button type="submit" id="submit_btn"

            class="btn btn-create btn-primary text-white me-2">Create</button>

        {{-- <button type="reset" class="btn btn-label-secondary px-5"

                            onclick="window.location.href='{{ route('products') }}'">

        Discard

        </button> --}}

        <button type="button" class="btn btn-label-secondary px-5"

            onclick="location.reload();">

            Discard

        </button>

    </div>

    </form>

</div>

</div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        //    1. IMAGE UPLOAD + PREVIEW (SAFE)

        const fileInput = document.getElementById('file-input');

        const gallery = document.getElementById('image-gallery');

        let selectedFiles = [];

        fileInput.addEventListener('change', function() {

            Array.from(this.files).forEach(file => {

                const reader = new FileReader();

                reader.onload = function(e) {

                    const base64 = e.target.result;

                    selectedFiles.push({

                        file,

                        base64

                    });

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

                    wrapper.className = 'image-preview-wrapper new-image';

                    wrapper.dataset.index = selectedFiles.length - 1;

                    wrapper.innerHTML = `

                    <img src="${base64}" >

                    <button type="button" class="remove-img-btn">✕</button>

                    <input type="hidden" name="product_image[]" value="${base64}">

                    <input type="hidden" name="new_images_filenames[]" value="${file.name}">

                `;

                    const addBox = gallery.querySelector('.add-image-box');

                    gallery.insertBefore(wrapper, addBox);

                };

                reader.readAsDataURL(file);

            });

        });

        gallery.addEventListener('click', function(e) {

            if (e.target.classList.contains('remove-img-btn')) {

                const wrapper = e.target.closest('.image-preview-wrapper');

                if (wrapper.classList.contains('old-image')) {

                    wrapper.remove();

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

                    input.type = 'hidden';

                    input.name = 'delete_old_images[]';

                    input.value = wrapper.dataset.old;

                    document.getElementById('productForm').appendChild(input);

                } else if (wrapper.classList.contains('new-image')) {

                    const index = wrapper.dataset.index;

                    selectedFiles.splice(index, 1);

                    wrapper.remove();

                }

            }

        });

        //    2. VARIANT REPEATER

        const wrapper = document.getElementById('unit-repeater-wrapper');

        const addBtn = document.getElementById('add-row-btn');

        addBtn.addEventListener('click', function() {

            let index = wrapper.querySelectorAll('.unit-input-row').length;

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

            row.className = 'unit-input-row';

            row.innerHTML = `

            <div class="col-val">

                <label class="form-label">Unit Value</label>

                <input type="text"

                    name="units[${index}][value]"

                    class="form-control"

                    placeholder="0.00"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>

            <div class="col-unit">

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

                <select name="units[${index}][unit]" class="form-select">

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

                    <option value="gm">gm</option>

                    <option value="kg">kg</option>

                </select>

            </div>

            <div class="col-mrp">

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

                <input type="text"

                    name="units[${index}][mrp]"

                    class="form-control"

                    placeholder="₹0.00"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>

            <div class="col-price">

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

                <input type="text"

                    name="units[${index}][price]"

                    class="form-control"

                    placeholder="₹0.00"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>

            <div class="col-stock">

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

                <input type="number"

                    name="units[${index}][stock]"

                    class="form-control"

                    placeholder="0"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>

            <div class="col-display">

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

                <select name="units[${index}][display]" class="form-select">

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

                    <option value="1">Yes</option>

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

                </select>

            </div>

            <div class="col-action">

                <button type="button" class="btn-remove remove-row">✕ Remove</button>

            </div>

        `;

            wrapper.appendChild(row);

        });

        wrapper.addEventListener('click', function(e) {

            if (e.target.classList.contains('remove-row') && wrapper.children.length > 1) {

                e.target.closest('.unit-input-row').remove();

            }

        });

        //    3. PREVENT DOUBLE SUBMIT (BEST PRACTICE)

        const form = document.getElementById('productForm');

        const submitBtn = document.getElementById('submit_btn');

        form.addEventListener('submit', function() {

            submitBtn.disabled = true;

            submitBtn.innerText = 'Processing...';

            submitBtn.classList.add('opacity-75');

        });

    });
</script>

@endsection