@extends('layout.app')

@section('content')
<div class="app-content main-content">
    <div class="side-app main-container">
        <!--Page header-->
        <div class="page-header d-xl-flex d-block">
            <div class="page-leftheader">
                <div class="page-title">Edit <span class="font-weight-normal text-muted ms-2">Bundle</span></div>
            </div>
        </div>
        <!--End Page header-->
        <div class="container mt-5">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom-0">
                            <h4 class="card-title">Edit Bundle Form</h4>
                        </div>
                        <div class="card-body">
                            @include('includes.alerts')
                            <form action="{{ route('bundles.update', $bundle->id) }}" method="post" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <div class="">
                                    <div class="form-group">
                                        <label for="title" class="form-label">Title</label>
                                        <input type="text" name="title" class="form-control" id="title"
                                            placeholder="Enter Title" required maxlength="255"
                                            value="{{ old('title', $bundle->title) }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="description" class="form-label">Description</label>
                                        <textarea name="description" class="form-control" id="description" rows="3">{{ old('description', $bundle->description) }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="price" class="form-label">Price</label>
                                        <input type="number" name="price" class="form-control" id="price"
                                            placeholder="Enter Price" required step="0.01" min="0"
                                            value="{{ old('price', $bundle->price) }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="price_before" class="form-label">Price Before (Optional)</label>
                                        <input type="number" name="price_before" class="form-control" id="price_before"
                                            placeholder="Enter Price Before" step="0.01" min="0"
                                            value="{{ old('price_before', $bundle->price_before) }}">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">Current Images</label>
                                        <div class="row" id="current-images">
                                            @foreach ($bundle->images as $img)
                                            <div class="col-md-3 mb-2 image-container" id="image-{{ $img->id }}">
                                                <img src="{{ \Storage::url($img->image) }}" class="img-thumbnail" style="max-height: 100px;">
                                                <button type="button" class="btn btn-sm btn-danger mt-1" onclick="removeImage({{ $img->id }})">
                                                    <i class="feather feather-trash-2"></i> Remove
                                                </button>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="images" class="form-label">Add New Images</label>
                                        <input type="file" name="images[]" class="form-control" id="images" multiple accept="image/*">
                                    </div>
                                    <div id="deleted-images-container"></div>
                                    <div class="form-group">
                                        <label class="form-label">Bundle Items</label>
                                        <div id="items-container">
                                            @foreach ($bundle->items as $idx => $item)
                                            <div class="item-row row mb-2">
                                                <div class="col-md-6">
                                                    <select name="items[{{ $idx }}][product_id]" class="form-control" required>
                                                        <option value="">Select Product</option>
                                                        @foreach ($products as $product)
                                                        <option value="{{ $product->id }}" {{ $item->product_id == $product->id ? 'selected' : '' }}>{{ $product->title }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <input type="number" name="items[{{ $idx }}][quantity]" class="form-control"
                                                        placeholder="Quantity" required min="1" value="{{ $item->quantity }}">
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" class="btn btn-danger" onclick="removeItem(this)">
                                                        <i class="feather feather-trash-2"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                        <button type="button" class="btn btn-secondary mt-2" onclick="addItem()">
                                            Add Item
                                        </button>
                                    </div>
                                </div>
                                <button class="btn btn-primary btn-block" type="submit">Update</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Row -->
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    let itemIndex = {{ $bundle->items->count() }};
    let deletedImages = [];
    const products = @json($products);

    function addItem() {
        const container = document.getElementById('items-container');
        let options = '<option value="">Select Product</option>';
        products.forEach(function(product) {
            options += '<option value="' + product.id + '">' + product.title + '</option>';
        });

        const html = `
            <div class="item-row row mb-2">
                <div class="col-md-6">
                    <select name="items[${itemIndex}][product_id]" class="form-control" required>
                        ${options}
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="number" name="items[${itemIndex}][quantity]" class="form-control"
                        placeholder="Quantity" required min="1" value="1">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger" onclick="removeItem(this)">
                        <i class="feather feather-trash-2"></i>
                    </button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
        itemIndex++;
    }

    function removeItem(btn) {
        const rows = document.querySelectorAll('.item-row');
        if (rows.length > 1) {
            btn.closest('.item-row').remove();
        } else {
            Swal.fire({
                title: 'Cannot Remove',
                text: 'At least one item is required.',
                icon: 'warning'
            });
        }
    }

    function removeImage(imageId) {
        Swal.fire({
            title: 'Remove this image?',
            text: "The image will be deleted when you submit the form.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, remove it!',
            cancelButtonText: 'cancellation'
        }).then((result) => {
            if (result.isConfirmed) {
                deletedImages.push(imageId);
                document.getElementById('image-' + imageId).style.display = 'none';
                updateDeletedImagesInput();
            }
        });
    }

    function updateDeletedImagesInput() {
        let container = document.getElementById('deleted-images-container');
        container.innerHTML = '';
        deletedImages.forEach(function(id) {
            let input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'delete_images[]';
            input.value = id;
            container.appendChild(input);
        });
    }
</script>
@endsection