@extends('backEnd.layouts.master') 
@section('title','Product Edit') 

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

<style>
    .card { border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; border: none; margin-bottom: 25px; }
    .section-title { background: #f8f9fa; padding: 12px; border-left: 4px solid #727cf5; margin-bottom: 20px; font-weight: bold; border-radius: 0 5px 5px 0; }
    .form-label { font-weight: 600; color: #444; font-size: 0.9rem; }
    
    /* Image Preview Style */
    .image-preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .preview-box { width: 100px; height: 100px; border: 2px dashed #ddd; border-radius: 8px; overflow: hidden; position: relative; background: #f9f9f9; }
    .preview-box img { width: 100%; height: 100%; object-fit: cover; }
    .old-img-wrapper { position: relative; display: inline-block; }
    .remove-image { position: absolute; top: -5px; right: -5px; padding: 2px 6px; border-radius: 50%; font-size: 10px; }
    
    .attr-container { display: flex; flex-wrap: wrap; gap: 10px; padding: 15px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; }
</style>
@endsection 

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12 mt-3">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="page-title">Edit Product: {{ $edit_data->name }}</h4>
                <a href="{{route('products.index')}}" class="btn btn-primary rounded-pill px-4 shadow-sm">
                    <i class="fa fa-list me-1"></i> Manage Products
                </a>
            </div>
        </div>
    </div>

    <form action="{{route('products.update')}}" method="POST" id="editForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" value="{{$edit_data->id}}" name="id" />
        <input type="hidden" name="deleted_images" id="deleted_images">

        <div class="row">
            {{-- Left Side --}}
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">General Information</div>
                        <div class="mb-3">
                            <label class="form-label">Product Name *</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ $edit_data->name }}" required />
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Categories *</label>
                                <select class="form-control select2" name="category_ids[]" id="category_id" multiple="multiple" required>
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}" {{ in_array($category->id, $selected_categories) ? 'selected' : '' }}>
                                            {{$category->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label">Sub Categories</label>
                                <select class="form-control select2" id="subcategory_id" name="subcategory_ids[]" multiple="multiple">
                                    {{-- AJAX এর মাধ্যমে লোড হবে --}}
                                </select>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label">Child Categories</label>
                                <select class="form-control select2" id="childcategory_id" name="childcategory_ids[]" multiple="multiple">
                                    {{-- AJAX এর মাধ্যমে লোড হবে --}}
                                </select>
                            </div>
                        </div>  

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Brand</label>
                                <select class="form-control select2" name="brand_id">
                                    <option value="">Select Brand</option>
                                    @foreach($brands as $value)
                                        <option value="{{$value->id}}" {{ $edit_data->brand_id == $value->id ? 'selected' : '' }}>{{$value->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Product Unit</label>
                                <input type="text" name="pro_unit" class="form-control" value="{{ $edit_data->pro_unit }}" />
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Video URL</label>
                            <input type="text" name="pro_video" class="form-control" value="{{ $edit_data->pro_video }}" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Full Description *</label>
                            <textarea name="description" id="summernote" class="form-control">{{ $edit_data->description }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Images Section --}}
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">Product Images</div>
                        
                        <div class="row mb-4">
                            @foreach ($edit_data->images as $image)
                            <div class="col-md-3 mb-3 old-img-wrapper control-group">
                                <div class="preview-box shadow-sm">
                                    <img src="{{ asset($image->image) }}">
                                    <button type="button" class="btn btn-danger remove-image" data-image-id="{{ $image->id }}">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                                <input type="text" name="old_title[{{$image->id}}]" class="form-control form-control-sm mt-1" value="{{ $image->title }}" placeholder="Title">
                            </div>
                            @endforeach
                        </div>

                        <div id="image-wrapper">
                            <div class="image-group mb-3 p-3 border rounded shadow-sm bg-light">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <label class="small fw-bold">Upload New Image</label>
                                        <input type="file" name="image[]" class="form-control img-input" />
                                    </div>
                                    <div class="col-md-5">
                                        <label class="small fw-bold">Image Title</label>
                                        <input type="text" name="title[]" class="form-control" placeholder="Alt Title" />
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                        <button type="button" class="btn btn-success btn-increment mt-4"><i class="fa fa-plus"></i></button>
                                    </div>
                                </div>
                                <div class="image-preview-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right Side --}}
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">Pricing & Inventory</div>
                        <div class="mb-3">
                            <label class="form-label">Purchase Price *</label>
                            <input type="number" name="purchase_price" class="form-control" value="{{ $edit_data->purchase_price }}" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Old Price</label>
                            <input type="number" name="old_price" class="form-control" value="{{ $edit_data->old_price }}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">New Price *</label>
                            <input type="number" name="new_price" class="form-control" value="{{ $edit_data->new_price }}" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Stock Quantity *</label>
                            <input type="number" name="stock" class="form-control" value="{{ $edit_data->stock }}" required />
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="section-title">Product Variants</div>
                        
                        <div class="mb-4">
                            <label class="form-label d-block">Available Sizes</label>
                            <div class="attr-container">
                                @foreach($totalsizes as $size)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="proSize[]" value="{{ $size->id }}" id="size{{ $size->id }}"
                                    {{ in_array($size->id, $selectsizes->pluck('size_id')->toArray()) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="size{{ $size->id }}">{{ $size->sizeName }}</label>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!--<div class="mb-3">-->
                        <!--    <label class="form-label d-block">Available Colors</label>-->
                        <!--    <div class="attr-container">-->
                        <!--        @foreach($totalcolors as $color)-->
                        <!--        <div class="form-check form-check-inline">-->
                        <!--            <input class="form-check-input" type="checkbox" name="proColor[]" value="{{ $color->id }}" id="color{{ $color->id }}"-->
                        <!--            {{ in_array($color->id, $selectcolors->pluck('color_id')->toArray()) ? 'checked' : '' }}>-->
                        <!--            <label class="form-check-label" for="color{{ $color->id }}">{{ $color->colorName }}</label>-->
                        <!--        </div>-->
                        <!--        @endforeach-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="section-title">Status & Visibility</div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="status" value="1" {{ $edit_data->status == 1 ? 'checked' : '' }} id="statusSwitch" style="width: 40px; height: 20px;">
                            <label class="form-check-label ms-2" for="statusSwitch">Active Status</label>
                        </div>
                        <div class="form-check form-switch mb-4">
                            <input class="form-check-input" type="checkbox" name="topsale" value="1" {{ $edit_data->topsale == 1 ? 'checked' : '' }} id="hotDealSwitch" style="width: 40px; height: 20px;">
                            {{-- <label class="form-check-label ms-2" for="hotDealSwitch">Hot Deals</label> --}}
                            <label class="form-check-label ms-2" for="hotDealSwitch">Sale</label>
                        </div>


                        
                        
                        <div class="form-check form-switch mb-4">
                            <input class="form-check-input" type="checkbox" name="demand" value="1" id="demand" style="width: 40px; height: 20px;" {{ $edit_data->demand == 1 ? 'checked' : '' }}>
                            {{-- <label class="form-check-label ms-2" for="hotDealSwitch">Hot Deals</label> --}}
                            <label class="form-check-label ms-2" for="demand">Demand</label>
                        </div>
                        <div class="form-check form-switch mb-4">
                            <input class="form-check-input" type="checkbox" name="tavaas" value="1" id="tavaas" style="width: 40px; height: 20px;" {{ $edit_data->tavaas == 1 ? 'checked' : '' }}>
                            {{-- <label class="form-check-label ms-2" for="hotDealSwitch">Hot Deals</label> --}}
                            <label class="form-check-label ms-2" for="tavaas">Tavaas</label>
                        </div>
                        <button type="submit" class="btn btn-success w-100 py-2 fw-bold shadow-sm rounded-pill">
                            <i class="fa fa-sync me-1"></i> UPDATE PRODUCT
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

{{-- Hidden Clone Template --}}
<div id="image-template" class="d-none">
    <div class="image-group mb-3 p-3 border rounded shadow-sm bg-light">
        <div class="row align-items-center">
            <div class="col-md-6">
                <input type="file" name="image[]" class="form-control img-input" />
            </div>
            <div class="col-md-5">
                <input type="text" name="title[]" class="form-control" placeholder="Image Title" />
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger btn-remove"><i class="fa fa-trash"></i></button>
            </div>
        </div>
        <div class="image-preview-container"></div>
    </div>
</div>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
$(document).ready(function() {
    $('.select2').select2({ width: '100%' });
    
    $('#summernote').summernote({
        height: 250,
        placeholder: 'Update description...'
    });

    // 1. New Image Addition
    $(document).on('click', '.btn-increment', function() {
        $('#image-wrapper').append($('#image-template').html());
    });

    $(document).on('click', '.btn-remove', function() {
        $(this).closest('.image-group').remove();
    });

    // 2. New Image Preview
    $(document).on('change', '.img-input', function() {
        let container = $(this).closest('.image-group').find('.image-preview-container');
        container.empty();
        if (this.files && this.files[0]) {
            let reader = new FileReader();
            reader.onload = function(e) {
                container.append(`<div class="preview-box mt-2 shadow-sm"><img src="${e.target.result}"></div>`);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });

    // 3. Remove Existing Image Logic
    let deletedImages = [];
    $(document).on('click', '.remove-image', function() {
        let imageId = $(this).data('image-id');
        deletedImages.push(imageId);
        $('#deleted_images').val(deletedImages.join(','));
        $(this).closest('.control-group').fadeOut();
    });

    // 4. Ajax Category
$(document).ready(function () {
    $('.select2').select2({ width: '100%' });

    // ডাটাবেজ থেকে আসা সেভ করা আইডিগুলো
    let pre_selected_subs = {!! json_encode($selected_subcategories) !!} || [];
    let pre_selected_childs = {!! json_encode($selected_childcategories) !!} || [];

    // ট্র্যাকিং করার জন্য ফ্ল্যাগ (এডিট পেজ ওপেন হওয়ার সময়)
    let isInitialLoadSub = true;
    let isInitialLoadChild = true;

    // ১. ফাংশন: সাব-ক্যাটাগরি লোড করা
    function loadSubCategories(category_ids) {
        // ড্রপডাউন খালি করার আগেই বর্তমান সিলেকশনটি ধরে রাখা (খুবই গুরুত্বপূর্ণ)
        let current_selected_subs = (isInitialLoadSub) ? pre_selected_subs : ($('#subcategory_id').val() || []);

        if (category_ids && category_ids.length > 0) {
            $.ajax({
                type: "GET",
                url: "{{ url('ajax-product-subcategory') }}",
                data: { category_ids: category_ids },
                success: function (res) {
                    $('#subcategory_id').empty();
                    let new_sub_ids = Object.keys(res);
                    
                    $.each(res, function (key, value) {
                        $('#subcategory_id').append('<option value="' + key + '">' + value + '</option>');
                    });

                    // ফিল্টার: আগে যা সিলেক্ট করা ছিল, তার মধ্যে যে আইডিগুলো এখনও বৈধ শুধু সেগুলোই রাখব
                    let valid_selections = current_selected_subs.filter(id => new_sub_ids.includes(id.toString()));
                    
                    $('#subcategory_id').val(valid_selections).trigger('change');
                    isInitialLoadSub = false; 
                }
            });
        } else {
            $('#subcategory_id').empty().trigger('change');
            $('#childcategory_id').empty().trigger('change.select2');
            isInitialLoadSub = false;
        }
    }

    // ২. ফাংশন: চাইল্ড-ক্যাটাগরি লোড করা
    function loadChildCategories(subcategory_ids) {
        // খালি করার আগেই বর্তমানে সিলেক্ট করা চাইল্ড আইডিগুলো ধরে রাখা
        let current_selected_childs = (isInitialLoadChild) ? pre_selected_childs : ($('#childcategory_id').val() || []);

        if (subcategory_ids && subcategory_ids.length > 0) {
            $.ajax({
                type: "GET",
                url: "{{ url('ajax-product-childcategory') }}",
                data: { subcategory_ids: subcategory_ids },
                success: function (res) {
                    $('#childcategory_id').empty();
                    let new_child_ids = Object.keys(res);
                    
                    $.each(res, function (key, value) {
                        $('#childcategory_id').append('<option value="' + key + '">' + value + '</option>');
                    });

                    // ফিল্টার: সাব রিমুভ করলে যেন শুধুমাত্র ওই সাবের চাইল্ডগুলো যায়, বাকিগুলো যেন থাকে
                    let valid_child_selections = current_selected_childs.filter(id => new_child_ids.includes(id.toString()));
                    
                    $('#childcategory_id').val(valid_child_selections).trigger('change.select2');
                    isInitialLoadChild = false;
                }
            });
        } else {
            $('#childcategory_id').empty().trigger('change.select2');
            isInitialLoadChild = false;
        }
    }

    // ৩. ইভেন্ট লিসেনার
    $('#category_id').on('change', function () {
        loadSubCategories($(this).val());
    });

    $('#subcategory_id').on('change', function () {
        loadChildCategories($(this).val());
    });

    // ৪. পেজ লোড হওয়ার সময় প্রথমবার রান করা
    let initial_cats = $('#category_id').val();
    if (initial_cats && initial_cats.length > 0) {
        loadSubCategories(initial_cats);
    }
});   
    



});
</script>
@endsection