@extends('backend.layout.layout')
@section ('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Upload Product Images
                        <a href="{{ url('products') }}" class="btn btn-primary float-end">Back</a>
                    </h4>
                </div>
                <div class="card-body">

                    @if (session('status'))
                        <div class="alert alert-success">{{session('status')}}</div>
                    @endif

                    <h5>Product Name: {{ $product->name }}</h5>
                    <hr>

                    @if ($errors->any())
                    <ul class="alert alert-warning">
                        @foreach ($errors->all() as $error)
                            <li>{{$error}}</li>
                        @endforeach
                    </ul>
                    @endif

                    <form action="{{ url('products/'.$product->id.'/upload') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                            <label>Upload Images (Max:20 images only)</label>
                            <input type="file" name="images[]" multiple class="form-control" />
                        </div>
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary">Upload</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        <div class="col-md-12 mt-4">
            @foreach ($productImages as $prodImg)
                <img src="{{ asset($prodImg->image) }}" class="border p-2 m-3" style="width: 100px; height: 100px;" alt="Img" />
                <a href="{{ url('product-image/'.$prodImg->id.'/delete') }}" >Delete</a>
            @endforeach
        </div>
    </div>

    <div class="row">
    <table class="table table-bordered table-striped">        
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
                <th>Images</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $item)
            <tr>
                <td>{{$item->id}}</td>
                <td>{{$item->name}}</td>
                <td>{{$item->description}}</td>
                <td>
                    <a href="{{ url('products/'.$item->id.'/upload') }}" class="btn btn-info">Add / View Images</a>
                </td>
                <td>
                    // Your edit & delete button comes here.
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
</div>
@endsection