@extends('layouts.admin_main')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <h1>Edit Client Images</h1>
    </div>

    <section class="content">
        <div class="container-fluid">
            <form method="POST" action="{{ route('client.images.update') }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row">
                    @for ($i = 0; $i < 6; $i++)
                        <div class="col-lg-4 col-md-6 mb-4 d-flex">
                            <div class="card flex-fill" style="display: flex; flex-direction: column; justify-content: space-between;">
                                <div class="card-body text-center" style="min-height: 250px;">
                                    @if(isset($clientImages[$i]))
                                        <img src="{{ asset('storage/' . $clientImages[$i]->image_path) }}" class="img-fluid mb-2" alt="Client Image" style="max-height: 150px; object-fit: contain;">
                                    @endif

                                    <div class="custom-file mb-2">
                                        <input type="file" class="custom-file-input" name="images[{{ $i }}]" id="image_{{ $i }}" accept="image/*">
                                        <label class="custom-file-label" for="image_{{ $i }}">Choose image</label>
                                    </div>

                                    @if(isset($clientImages[$i]))
                                        <input type="hidden" name="existing_images[{{ $i }}]" value="{{ $clientImages[$i]->image_path }}">
                                    @else
                                        <input type="hidden" name="existing_images[{{ $i }}]" value="">
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endfor
                </div>

                <button type="submit" class="btn btn-primary mt-3">Update Images</button>
            </form>
        </div>
    </section>
</div>

@section('scripts')
<script>
    document.querySelectorAll('.custom-file-input').forEach(input => {
        input.addEventListener('change', function() {
            const label = this.nextElementSibling;
            label.textContent = this.files.length > 1 ? `${this.files.length} files selected` : this.files[0].name;
        });
    });
</script>
@endsection
@endsection