@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />

<!--  //image preview -->
<style>
    .preview-box {
        position: relative;
        display: inline-block;
    }

    .preview-box img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
    }

    .remove-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        background: gray;
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 18px;
        font-size: 14px;
        cursor: pointer;
    }
</style>
@section('content')
<div
    class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-1 row-gap-4" onclick="window.history.back()">
    <div class="d-flex flex-column justify-content-center">
        <h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <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 icons-tabler-outline icon-tabler-chevron-left">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </button>View Product</h5>
    </div>

</div>
<div class="card p-5">
    <div class="form-section">
        <h5>View Product</h5>
        <form id="updateForm" method="POST" action="{{ route('update_product_form') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $products->id }}">

            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="name"> Product Name</label>
                    <input type="text" class="form-control" id="product_name" name="product_name" value="{{ old('product_name', $products->product_name) }}">
                    @error('name')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="productName">Key Word</label>
                    <input type="text" class="form-control" id="key_serach" name="key_search" value="{{ old('key_search', $products->key_search) }}" placeholder="Enter Product Name">
                    @error('key_search') <div class="text-danger">{{ $message }}</div> @enderror
                </div>


                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="productImages">Images</label>
                    <input type="file" name="images[]" class="form-control" id="images" multiple>

                    <!-- Existing images -->
                    <div id="existingPreview" class="mt-3 d-flex flex-wrap gap-2">
                        @if(!empty($products->images) && is_array($products->images))
                        @foreach($products->images as $img)
                        <div class="preview-box existing-img">

                            <a href="{{ asset($img) }}" target="_blank">
                                <img src="{{ asset($img) }}" />
                            </a>

                            <span class="remove-btn" onclick="removeExistingImage(this,'{{ $img }}')">×</span>

                            <input type="hidden" name="keep_images[]" value="{{ $img }}">
                        </div>
                        @endforeach
                        @endif
                    </div>



                    <!-- New image previews -->
                    <div id="newPreview" class="mt-3 d-flex flex-wrap gap-2"></div>

                    @error('images') <div class="text-danger">{{ $message }}</div> @enderror
                    @error('images.*') <div class="text-danger">{{ $message }}</div> @enderror
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="quantity">Quantity</label>
                    <input type="text" class="form-control" id="quantity" name="quantity" value="{{ old('quantity', $products->quantity) }}" placeholder="Enter Quantity">
                    @error('name') <div class="text-danger">{{ $message }}</div> @enderror
                </div>

            </div>
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <label class="form-label" for="mrp">MRP</label>
                    <input type="text" class="form-control" name="mrp" id="mrp" value="{{ old('mrp', $products->mrp) }}">
                    @error('mrp')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label" for="second price">Second Price</label>
                    <input type="text" class="form-control" name="second_price" id="second_price" value="{{ old('second_price', $products->second_price) }}">
                    @error('second_price')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label" for="final price">Final Price</label>
                    <input type="text" class="form-control" name="final_price" id="final_price" value="{{ old('final_price', $products->final_price) }}">
                    @error('final_price')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>
            <div class="text-editor-container">
                <div class="header">Description</div>

                <div id="editor">
                    {!! old('description', $products->description) !!}
                </div>

                <input type="hidden" name="description" id="description">
            </div>


            <div class="form-actions d-flex justify-content-center mt-4">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                    data-bs-target="#update_submit">Update</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>

</div>
<!-- submit -->
<div class="modal fade" id="update_submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    const quill = new Quill('#editor', {
        theme: 'snow'
    });

    let selectedFiles = [];

    document.getElementById('images').addEventListener('change', function(event) {
        const files = Array.from(event.target.files);

        files.forEach(file => selectedFiles.push(file));

        renderNewPreview();
        updateInputFiles();
    });

    function renderNewPreview() {
        const previewContainer = document.getElementById('newPreview');
        previewContainer.innerHTML = "";

        selectedFiles.forEach(file => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const box = document.createElement('div');
                box.classList.add('preview-box');

                const img = document.createElement('img');
                img.src = e.target.result;

                const removeBtn = document.createElement('span');
                removeBtn.classList.add('remove-btn');
                removeBtn.innerText = '×';
                removeBtn.onclick = function() {
                    selectedFiles = selectedFiles.filter(f => f !== file);

                    renderNewPreview();
                    updateInputFiles();
                };

                box.appendChild(img);
                box.appendChild(removeBtn);
                previewContainer.appendChild(box);
            };
            reader.readAsDataURL(file);
        });
    }

    function updateInputFiles() {
        const dataTransfer = new DataTransfer();
        selectedFiles.forEach(file => dataTransfer.items.add(file));
        document.getElementById('images').files = dataTransfer.files;
    }

    function removeExistingImage(el, imgPath) {
        const box = el.parentElement;
        box.remove();

        const hiddenInput = document.querySelector(`input[name="keep_images[]"][value="${imgPath}"]`);
        if (hiddenInput) hiddenInput.remove();
    }


    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('description').value = quill.root.innerHTML;

        const btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('updateForm').submit();
    });
</script>


@endsection