@extends('layouts.admin.index')


@section('content')

        <div class="container">
            <div class="row">
              <div class="col-sm-12">
                <div class="home-tab">

                  <div class="tab-content tab-content-basic">
                    <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
                        <div class="container-fluid">

                            <div class="image-box mb-4 rounded border border-secondary">
                            <img src="{{ asset('img/customerslideadmin.png') }}" alt="Image" class="img-fluid" style="width: 100%; height: auto;">

                        </div>

                            <div class="alert alert-info mt-4">
                                <strong>Info:</strong>
                                <ul style="margin-top:10px; font-size: 15px;">
                                    <li><strong>Upload Images Customer Slider</strong>: Only upload .jpg and .png only.</li>
                                    <li><strong>Recommended size </strong>: 2000 x 1414 px.</li>
                                    <li><strong>File Size</strong>: Please ensure the image file size is <strong>below 5MB</strong>.
                                </ul>
                                After you submit, the images customer will be displayed on the slider.
                            </div>
                            <!-- Page Heading -->
                            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                                <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
                            </div>
                            <!-- Content Row -->
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">Data Products</h6>
                                </div>
                                <div class="card-body">
                                    <div class="container">
                                        {{-- Success message --}}
                                                @if(session('success'))
                                                    <div class="alert alert-success">
                                                        {{ session('success') }}
                                                    </div>
                                                @endif

                                                {{-- Error messages --}}
                                                @if ($errors->any())
                                                    <div class="alert alert-danger">
                                                        <ul class="mb-0">
                                                            @foreach ($errors->all() as $error)
                                                                <li>{{ $error }}</li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endif

                                                {{-- Upload Form --}}
                                                <form action="{{ route('admin.image.customers') }}" method="POST" enctype="multipart/form-data">
                                                    @csrf

                                                    <div class="form-group">
                                                        <label for="imageCustomer">Choose Image</label>
                                                        <input type="file" name="imageCustomer" id="imageCustomer" class="form-control" accept="image/*" required>
                                                    </div>

                                                    <button type="submit" class="btn btn-primary mt-2">Upload</button>
                                                </form>
                                        <h2 class="mt-4">Existing Images</h2>
                                    <div class="row">
                            @forelse($imageCustomers as $image)
                                <div class="col-md-3 mb-4">
                                    <div class="card">
                                        <img src="{{ $image->imageCustomer }}" alt="Customer Image" class="card-img-top rectangle-image">

                                        <div class="card-body text-center">
                                            <form action="{{ route('admin.image.customers.delete', $image ->id) }}" method="POST" style="display:inline;">
                                                @csrf
                                                <button type="submit" class="btn btn-danger">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <p>No images found.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>

              </div>
            </div>
          </div>
@endsection