@extends('admin.layouts.app')

@push('style-lib')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css" rel="stylesheet">
@endpush

@push('style')
<style>
.product-image-preview-box{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;white-space:nowrap;scroll-behavior:smooth}
.product-image-preview-box::-webkit-scrollbar{height:6px}
.product-image-preview-box::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:20px}
.product-image-preview-item{position:relative;min-width:90px;width:90px;height:90px;border-radius:10px;overflow:hidden;border:1px solid #ddd;background:#f8f8f8;flex-shrink:0}
.product-image-preview-item img{width:100%;height:100%;object-fit:cover}
.product-image-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;border-radius:50%;background:#dc3545;color:#fff;font-size:16px;font-weight:bold;line-height:20px;cursor:pointer;z-index:10;padding:0}
.note-editor.note-frame{border:1px solid #e5e5e5!important;border-radius:12px!important;box-shadow:none!important;overflow:visible!important}
.note-toolbar{background:#fff!important;border-bottom:1px solid #e5e5e5!important;padding:7px!important}
.note-editable{min-height:260px!important;font-size:15px!important;line-height:1.7!important;color:#333!important;padding:12px!important}
.note-editor .dropdown-menu,.note-dropdown-menu{z-index:999999!important}
.note-color .dropdown-menu,.note-color .note-dropdown-menu{min-width:344px!important;padding:8px!important;overflow:visible!important;max-height:none!important}
.note-color-palette .note-color-row{display:flex!important;height:22px!important}
.note-color-palette .note-color-btn{width:22px!important;height:22px!important;padding:0!important;margin:0!important;border:1px solid #ddd!important;display:block!important;opacity:1!important}
.note-modal{z-index:999999!important}
.note-modal-content{width:92vw!important;max-width:520px!important;margin:35px auto!important}
.note-modal-body{max-height:65vh!important;overflow-y:auto!important}
.note-link-text,.note-link-url{height:38px!important;border-radius:8px!important}
.note-editor.note-frame.fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:999998!important;background:#fff!important;border-radius:0!important;border:0!important;display:flex!important;flex-direction:column!important}
.note-editor.note-frame.fullscreen .note-toolbar{flex:0 0 auto!important;max-height:42vh!important;overflow-y:auto!important}
.note-editor.note-frame.fullscreen .note-editing-area{flex:1 1 auto!important;overflow:hidden!important;background:#fff!important}
.note-editor.note-frame.fullscreen .note-editable{height:100%!important;min-height:0!important;overflow-y:auto!important;background:#fff!important}
body.note-fullscreen{overflow:hidden!important}
@media(max-width:380px){.note-color .dropdown-menu,.note-color .note-dropdown-menu{min-width:310px!important}.note-color-palette .note-color-btn{width:20px!important;height:20px!important}}
</style>
@endpush

@section('panel')
<div class="card">
    <div class="card-body">

        <form action="{{ route('admin.products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">

                <div class="col-md-6 mb-3">
                    <label>ক্যাটাগরি</label>
                    <select name="category_id" id="category_id" class="form-control" required>
                        <option value="">ক্যাটাগরি নির্বাচন করুন</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" @selected(old('category_id', $product->category_id) == $category->id)>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6 mb-3" id="subCategoryBox" style="{{ $subCategories->count() ? '' : 'display:none;' }}">
                    <label>সাব ক্যাটাগরি</label>
                    <select name="sub_category_id" id="sub_category_id" class="form-control">
                        <option value="">সাব ক্যাটাগরি নির্বাচন করুন</option>
                        @foreach($subCategories as $subCategory)
                            <option value="{{ $subCategory->id }}" @selected(old('sub_category_id', $product->sub_category_id) == $subCategory->id)>
                                {{ $subCategory->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-12 mb-3">
                    <label>প্রোডাক্টের নাম</label>
                    <input type="text" name="name" class="form-control" required value="{{ old('name', $product->name) }}">
                </div>

                <div class="col-md-12 mb-4">
                    <label>প্রোডাক্টের বিস্তারিত বিবরণ</label>
                    <textarea name="description" id="product_description" class="form-control" rows="10">{{ old('description', $product->description) }}</textarea>
                </div>

                <div class="col-md-12 mb-3">
                    <label>বর্তমান ছবি</label>

                    @if($product->images->count())
                        <div class="product-image-preview-box mt-2">
                            @foreach($product->images as $image)
                                <div class="product-image-preview-item">
                                    <button type="submit"
                                            form="deleteImageForm{{ $image->id }}"
                                            class="product-image-remove"
                                            onclick="return confirm('এই ছবিটি ডিলিট করবেন?')">
                                        &times;
                                    </button>
                                    <img src="{{ $image->image_url }}" alt="Product Image">
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-muted">কোনো ছবি আপলোড করা হয়নি</div>
                    @endif
                </div>

                <div class="col-md-12 mb-3">
                    <label>আরও নতুন ছবি যোগ করুন</label>
                    <input type="file" name="images[]" id="productImages" class="form-control" multiple accept="image/*">
                    <small>একসাথে একাধিক ছবি নির্বাচন করতে পারবেন। ভুল ছবি হলে নিচের preview থেকে মাইনাস করতে পারবেন।</small>
                    <div id="imagePreviewBox" class="product-image-preview-box mt-3"></div>
                </div>

                <div class="col-md-4 mb-3">
                    <label>কাস্টমার মূল্য</label>
                    <input type="number" step="0.01" name="customer_price" class="form-control" required value="{{ old('customer_price', $product->customer_price) }}">
                </div>

                <div class="col-md-4 mb-3">
                    <label>রিসেলার মূল্য</label>
                    <input type="number" step="0.01" name="reseller_price" class="form-control" required value="{{ old('reseller_price', $product->reseller_price) }}">
                </div>

                <div class="col-md-4 mb-3">
                    <label>রিসেলার সর্বোচ্চ বিক্রয় মূল্য</label>
                    <input type="number" step="0.01" name="reseller_max_price" class="form-control" required value="{{ old('reseller_max_price', $product->reseller_max_price) }}">
                </div>

                <div class="col-md-4 mb-3">
                    <label>মজুদের পরিমাণ</label>
                    <input type="number" name="stock" class="form-control" required value="{{ old('stock', $product->stock) }}">
                </div>

                <div class="col-md-12 mb-2">
                    <label>
                        <input type="checkbox" name="has_discount" id="has_discount" value="1" @checked(old('has_discount', $product->has_discount))>
                        ডিসকাউন্ট আছে?
                    </label>
                </div>

                <div class="row w-100 mx-0" id="discountBox" style="{{ old('has_discount', $product->has_discount) ? '' : 'display:none;' }}">
                    <div class="col-md-6 mb-3">
                        <label>ডিসকাউন্ট %</label>
                        <input type="number" step="0.01" name="discount_percent" class="form-control" placeholder="৫ / ১০" value="{{ old('discount_percent', $product->discount_percent) }}">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>ডিসকাউন্ট কার জন্য</label>
                        <select name="discount_for" class="form-control">
                            <option value="">নির্বাচন করুন</option>
                            <option value="customer" @selected(old('discount_for', $product->discount_for) == 'customer')>কাস্টমার</option>
                            <option value="reseller" @selected(old('discount_for', $product->discount_for) == 'reseller')>রিসেলার</option>
                            <option value="both" @selected(old('discount_for', $product->discount_for) == 'both')>উভয়ের জন্য</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-12 mb-2">
                    <label>
                        <input type="checkbox" name="has_warranty" id="has_warranty" value="1" @checked(old('has_warranty', $product->has_warranty))>
                        ওয়ারেন্টি / গ্যারান্টি আছে?
                    </label>
                </div>

                <div class="col-md-12 mb-3" id="warrantyBox" style="{{ old('has_warranty', $product->has_warranty) ? '' : 'display:none;' }}">
                    <label>ওয়ারেন্টি / গ্যারান্টির সময়</label>
                    <input type="text" name="warranty_text" class="form-control" placeholder="যেমন: ৬ মাস / ১ বছর" value="{{ old('warranty_text', $product->warranty_text) }}">
                </div>

                <div class="col-md-12 mb-2">
                    <label>
                        <input type="checkbox" name="has_size" id="has_size" value="1" @checked(old('has_size', $product->has_size))>
                        সাইজ প্রযোজ্য?
                    </label>
                </div>

                <div class="col-md-12 mb-3" id="sizeBox" style="{{ old('has_size', $product->has_size) ? '' : 'display:none;' }}">
                    <label>সাইজসমূহ</label>

                    @php
                        $selectedSizes = old('sizes', $product->sizes ?? []);
                        $selectedSizes = is_array($selectedSizes) ? $selectedSizes : [];
                        $allSizes = array_unique(array_merge($sizes, $selectedSizes));
                    @endphp

                    <select name="sizes[]" class="form-control select2-tags" multiple>
                        @foreach($allSizes as $size)
                            <option value="{{ $size }}" @selected(in_array($size, $selectedSizes))>{{ $size }}</option>
                        @endforeach
                    </select>

                    <small>নতুন সাইজ লিখেও add করতে পারবেন</small>
                </div>

                <div class="col-md-12 mb-2">
                    <label>
                        <input type="checkbox" name="has_color" id="has_color" value="1" @checked(old('has_color', $product->has_color))>
                        কালার প্রযোজ্য?
                    </label>
                </div>

                <div class="col-md-12 mb-3" id="colorBox" style="{{ old('has_color', $product->has_color) ? '' : 'display:none;' }}">
                    <label>কালারসমূহ</label>

                    @php
                        $selectedColors = old('colors', $product->colors ?? []);
                        $selectedColors = is_array($selectedColors) ? $selectedColors : [];
                        $allColors = array_unique(array_merge($colors, $selectedColors));
                    @endphp

                    <select name="colors[]" class="form-control select2-tags" multiple>
                        @foreach($allColors as $color)
                            <option value="{{ $color }}" @selected(in_array($color, $selectedColors))>{{ $color }}</option>
                        @endforeach
                    </select>

                    <small>নতুন কালার লিখেও add করতে পারবেন</small>
                </div>

                <div class="col-md-12 mt-3">
                    <button type="submit" class="btn btn-primary">প্রোডাক্ট আপডেট করুন</button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-dark">ফিরে যান</a>
                </div>

            </div>
        </form>

        @foreach($product->images as $image)
            <form id="deleteImageForm{{ $image->id }}" action="{{ route('admin.products.images.delete', $image->id) }}" method="POST" style="display:none;">
                @csrf
            </form>
        @endforeach

    </div>
</div>
@endsection

@push('script-lib')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
@endpush

@push('script')
<script>
(function () {
    "use strict";

    let selectedProductImages = [];
    let imageSerial = 0;

    function toggleBoxes() {
        $('#discountBox').toggle($('#has_discount').is(':checked'));
        $('#warrantyBox').toggle($('#has_warranty').is(':checked'));
        $('#sizeBox').toggle($('#has_size').is(':checked'));
        $('#colorBox').toggle($('#has_color').is(':checked'));
    }

    function syncProductImageInput() {
        let input = document.getElementById('productImages');
        let dataTransfer = new DataTransfer();

        selectedProductImages.forEach(function (item) {
            dataTransfer.items.add(item.file);
        });

        input.files = dataTransfer.files;
    }

    $('#productImages').on('change', function (event) {
        let newFiles = Array.from(event.target.files);

        newFiles.forEach(function (file) {
            if (!file.type.startsWith('image/')) return;

            let imageId = 'product-image-' + imageSerial++;
            let imageUrl = URL.createObjectURL(file);

            selectedProductImages.push({
                id: imageId,
                file: file,
                url: imageUrl
            });

            $('#imagePreviewBox').append(`
                <div class="product-image-preview-item" id="${imageId}">
                    <button type="button" class="product-image-remove" data-id="${imageId}">&times;</button>
                    <img src="${imageUrl}" alt="Preview">
                </div>
            `);
        });

        syncProductImageInput();
    });

    $(document).on('click', '.product-image-remove[data-id]', function () {
        let imageId = $(this).data('id');

        let removedImage = selectedProductImages.find(function (item) {
            return item.id === imageId;
        });

        if (removedImage) {
            URL.revokeObjectURL(removedImage.url);
        }

        selectedProductImages = selectedProductImages.filter(function (item) {
            return item.id !== imageId;
        });

        $('#' + imageId).remove();

        syncProductImageInput();
    });

    $('#category_id').on('change', function () {
        let categoryId = $(this).val();
        let selectedSubCategoryId = "{{ old('sub_category_id', $product->sub_category_id) }}";

        $('#sub_category_id').html('<option value="">লোড হচ্ছে...</option>');
        $('#subCategoryBox').hide();

        if (!categoryId) {
            $('#sub_category_id').html('<option value="">সাব ক্যাটাগরি নির্বাচন করুন</option>');
            return;
        }

        $.get("{{ url('/admin/get-sub-categories') }}/" + categoryId, function (data) {
            if (data.length > 0) {
                let options = '<option value="">সাব ক্যাটাগরি নির্বাচন করুন</option>';

                data.forEach(function (item) {
                    let selected = selectedSubCategoryId == item.id ? 'selected' : '';
                    options += `<option value="${item.id}" ${selected}>${item.name}</option>`;
                });

                $('#sub_category_id').html(options);
                $('#subCategoryBox').show();
            } else {
                $('#sub_category_id').html('<option value="">এই ক্যাটাগরিতে কোনো সাব ক্যাটাগরি নেই</option>');
                $('#subCategoryBox').hide();
            }
        });
    });

    $('#has_discount, #has_warranty, #has_size, #has_color').on('change', toggleBoxes);

    if ($.fn.select2) {
        $('.select2-tags').select2({
            tags: true,
            width: '100%',
            placeholder: 'নির্বাচন করুন অথবা নতুন লিখুন',
            allowClear: true
        });
    }

    $('#product_description').summernote({
        placeholder: 'প্রোডাক্টের বিস্তারিত লিখুন...',
        height: 300,
        dialogsInBody: true,
        disableDragAndDrop: false,

        toolbar: [
            ['style', ['style']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['color', ['forecolor', 'backcolor']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],

        popover: {
            link: [
                ['link', ['linkDialogShow', 'unlink']]
            ]
        },

        fontNames: [
            'Hind Siliguri','Arial','Arial Black','Comic Sans MS','Courier New',
            'Georgia','Impact','Tahoma','Times New Roman','Trebuchet MS',
            'Verdana','SolaimanLipi','Siyam Rupali','Kalpurush','Nikosh','Bangla'
        ],

        fontNamesIgnoreCheck: [
            'Hind Siliguri','SolaimanLipi','Siyam Rupali','Kalpurush','Nikosh','Bangla'
        ],

        fontsize: [
            '8','9','10','11','12','14','16','18','20','22','24','28','32','36','48'
        ],

        callbacks: {
            onInit: function () {
                $('.note-editable').attr('spellcheck', 'false');
            },

            onImageUpload: function (files) {
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        $('#product_description').summernote('insertImage', e.target.result);
                    };

                    reader.readAsDataURL(files[i]);
                }
            }
        }
    });

    toggleBoxes();
})();
</script>
@endpush