@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<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;
    }

    #images[data-files]::after {
        content: attr(data-files);
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: gray;
        font-size: 13px;
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between mb-3">
    <!-- Heading -->
    <div class="col-auto">
        <h5 class="mb-0"> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('product_info') }}">
                    <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>
                </a>
            </button>Add Product</h5>
    </div>
    <!-- Button -->
    <div class="col-auto">
        <a href="View_table"> <button class="btn buttons-collection btn-primary" type="button" aria-haspopup="dialog"
                aria-expanded="false">
                <span class="d-flex align-items-center gap-2">
                    <span class="d-sm-inline-block">View Products</span>
                </span>
            </button></a>
    </div>
</div>
<div class="card p-5">
    <div class="form-section">
        <h5>Create Product</h5>
        <form id="productForm" method="POST" action="{{ route('create_product_form') }}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="productName">Product Name</label>
                    <input type="text" class="form-control" id="product_name" name="product_name" value="{{ old('product_name') }}" placeholder="Enter Product Name">
                    @error('product_name') <div class="text-danger">{{ $message }}</div> @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') }}" 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>
                    <!-- Preview container -->
                    <div id="preview" 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') }}" placeholder="Enter Quantity">
                    @error('quantity') <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="number" class="form-control" id="mrp" name="mrp" value="{{ old('mrp') }}" placeholder="0.00">
                    @error('mrp') <div class="text-danger">{{ $message }}</div> @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label" for="secondPrice">Second Price</label>
                    <input type="number" class="form-control" id="second_price" name="second_price" value="{{ old('second_price') }}" placeholder="0.00">
                    @error('second_price') <div class="text-danger">{{ $message }}</div> @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label" for="finalPrice">Final Price</label>
                    <input type="number" class="form-control" id="final_price" name="final_price" value="{{ old('final_price') }}" placeholder="0.00">
                    @error('final_price') <div class="text-danger">{{ $message }}</div> @enderror
                </div>
            </div>
            <div class="text-editor-container">
                <div class="header">Description</div>
                <div id="editor">
                    {!! old('description' ) !!}
                </div>
                <input type="hidden" name="description" id="descriptionInput">
            </div>
    </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="#product_submit">Submit</button>
        <button type="reset" class="btn btn-label-secondary">Discard</button>
    </div>
    </form>
</div>
<!-- //  submit modal -->
<div class="modal fade" id="product_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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
    const quill = new Quill('#editor', {
        theme: 'snow'
    });
    let selectedFiles = [];
    const input = document.getElementById('images');
    const preview = document.getElementById('preview');
    input.addEventListener('change', function(event) {
        let files = Array.from(event.target.files);
        files = files.filter(file => file.type.startsWith("image/"));
        selectedFiles = [...selectedFiles, ...files];
        renderPreview();
        rebuildInputFiles();
    });
    function renderPreview() {
        preview.innerHTML = "";
        selectedFiles.forEach((file, idx) => {
            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.innerHTML = "×";
                removeBtn.classList.add("remove-btn");
                removeBtn.onclick = function() {
                    selectedFiles.splice(idx, 1);
                    renderPreview();
                    rebuildInputFiles();
                };
                box.appendChild(img);
                box.appendChild(removeBtn);
                preview.appendChild(box);
            };
            reader.readAsDataURL(file);
        });
    }
    function rebuildInputFiles() {
        const dt = new DataTransfer();
        selectedFiles.forEach(file => dt.items.add(file));
        input.files = dt.files;
    }

    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('descriptionInput').value = quill.root.innerHTML;
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('productForm').submit();
    });
</script>
@endsection