@extends('layout.master')
@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
        }
        .product-container {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 10px;
            width: 60%;
            margin: auto;
        }
        .form-group {
            margin-bottom: 10px;
        }
        label {
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }

        .preview-container img {
        max-width: 100px;
        margin: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .preview-container {
        display: flex;
        flex-wrap: wrap;
    }
    .remove-btn {
        display: block;
        text-align: center;
        cursor: pointer;
        color: red;
        font-size: 14px;
    }
    </style>
<div class="main-content app-content">
    <div class="container-fluid">

    
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Product Detail</h2>
                <ol class="breadcrumb mb-0 w-auto">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Show</li>
                </ol>
            </div>
            <div class="d-flex">
            </div>
        </div>
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="row card custom-card">
            <div class="card-body">
               
            <form action="{{ route('product.update', $product['id']) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
            
                <div class="form-group">
                    <label>Product Name:</label>
                    <input type="text" name="product_name" value="{{ $product['product_name'] }}" required>
                </div>
            
                <div class="form-group">
                    <label>Product Detail:</label>
                    <textarea name="product_detail" required>{{ $product['product_detail'] }}</textarea>
                </div>
                
                <div class="form-group">
                    <label>Sale Price:</label>
                    <input type="number" name="sale_price" value="{{ $product['sale_price'] }}" required>
                </div>
                
                <div class="form-group">
                    <label>Price:</label>
                    <input type="number" name="price" value="{{ $product['price'] }}" required>
                </div>
                
                <div class="form-group">
                    <label>Available Quantity:</label>
                    <input type="number" name="available_quantity" value="{{ $product['available_quantity'] }}" required>
                </div>
                
                <div class="form-group">
                    <label>Marketplace ID:</label>
                    <input type="text" name="marketplace_id" value="{{ $product['marketplace_id'] }}" required>
                </div>
                
                <div class="form-group">
                    <label>Format:</label>
                    <input type="text" name="format" value="{{ $product['format'] }}" required>
                </div>
                
                <div class="form-group">
                    <label>Listing Duration:</label>
                    <input type="text" name="listing_duration" value="{{ $product['listing_duration'] }}" required>
                </div>
                
                <h3>Supplier Information</h3>
                <div class="form-group">
                    <label>Company Name:</label>
                    <input type="text" name="supplier[company_name]" value="{{ $product['supplier']['company_name'] ?? "No Supplier" }}" required>
                </div>
                
                <div class="form-group">
                    <label>Contact Name:</label>
                    <input type="text" name="supplier[contact_name]" value="{{ $product['supplier']['contact_name'] ?? "No Supplier" }}" required>
                </div>
                
                <div class="form-group">
                    <label>Email:</label>
                    <input type="email" name="supplier[email]" value="{{ $product['supplier']['email'] ?? "No Supplier" }}" required>
                </div>
                
                <div class="form-group">
                    <label>Phone:</label>
                    <input type="text" name="supplier[phone]" value="{{ $product['supplier']['phone'] ?? "No Supplier" }}" required>
                </div>
                
                <div class="mb-3">
                        <label for="files" class="form-label">Task Files</label>
                        <input type="file" class="form-control" id="files" name="files[]"multiple />
                        <div class="preview-container"  id="preview-container"></div>
                    </div>


                <h3>Product Images</h3>
                <div class="product-images">
                    @foreach($product['images'] as $image)
                        <img src="{{ $image['image_url'] }}" alt="Product Image" width="100">
                    @endforeach
                </div>
                



                <button type="submit">Update Product</button>
            </form>



            </div>
        </div>

    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        const previewContainer = $("#preview-container");
        const imagesInput = $("#files");

        // Preview Images
        imagesInput.on("change", function () {
            previewContainer.empty(); // Clear previous previews
            const files = this.files;

            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();

                reader.onload = function (event) {
                    const imagePreview = `
                        <div class="preview-wrapper" data-index="${index}">
                            <img src="${event.target.result}" alt="Image Preview">
                            <span class="remove-btn" data-index="${index}">Remove</span>
                        </div>
                    `;
                    previewContainer.append(imagePreview);
                };

                reader.readAsDataURL(file);
            });
        });

        // Remove Image from Preview
        previewContainer.on("click", ".remove-btn", function () {
            const index = $(this).data("index");
            const previewWrapper = $(`.preview-wrapper[data-index="${index}"]`);
            previewWrapper.remove();

            // Remove the file from the input
            const files = Array.from(imagesInput[0].files);
            files.splice(index, 1);

            // Create a new FileList object
            const dataTransfer = new DataTransfer();
            files.forEach((file) => dataTransfer.items.add(file));
            imagesInput[0].files = dataTransfer.files;
        });
    });
   
</script>


@endsection