@extends('Company.layout.master')
@section('title', 'Gallery Management')
@section('page_name', 'Gallery Management')

@section('content')

    @php
        $stats = [
            ['title' => 'Total Images', 'value' => $data->count(), 'icon' => 'bi-images', 'color' => 'primary'],
            ['title' => 'Albums', 'value' => '3', 'icon' => 'bi-folder', 'color' => 'success'],
            ['title' => 'New (Month)', 'value' => '12', 'icon' => 'bi-arrow-up-circle', 'color' => 'info'],
            ['title' => 'Storage', 'value' => number_format($totalSizeMB,2).' MB', 'icon' => 'bi-database', 'color' => 'warning'],
        ];

@endphp

<div class="container-fluid p-0">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-3 mb-4">
        @foreach($stats as $stat)
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-{{ $stat['color'] }} bg-opacity-10 p-3 me-3 text-{{ $stat['color'] }}">
                            <i class="bi {{ $stat['icon'] }} fs-4"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-0">{{ $stat['value'] }}</h5>
                            <small class="text-muted">{{ $stat['title'] }}</small>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0"><i class="bi bi-cloud-upload me-2"></i>Upload Image</h5>
                </div>
                <div class="card-body">
                    <form action="{{route('consultant.gallery.store')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Select Image</label>
                            <input type="file" class="form-control" name="image[]" multiple accept="image/*">
                            @error('image') <small class="text-danger">{{$message}}</small>  @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Caption / Title</label>
                            <input type="text" class="form-control" name="caption" placeholder="E.g. Office Party">
                            @error('caption') <small class="text-danger">{{$message}}</small>  @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Album</label>
                            <select class="form-select" name="album">
                                <option value="">Select Album...</option>
                                <option value="event">Events</option>
                                <option value="office">Office</option>
                                <option value="staff">Staff</option>
                            </select>
                            @error('album') <small class="text-danger">{{$message}}</small>  @enderror
                        </div>

                        <button type="submit"  class="btn btn-primary w-100">
                            Upload Now
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Recent Uploads</h5>
                <div class="btn-group">
                    <button class="btn btn-outline-secondary btn-sm active">All</button>
                    <button class="btn btn-outline-secondary btn-sm">Events</button>
                    <button class="btn btn-outline-secondary btn-sm">Office</button>
                </div>
            </div>

            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                @foreach($image as $img)
                    <div class="col">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="ratio ratio-4x3">
                                <img src="{{ asset('storage/'.$img->image_name) }}" class="card-img-top object-fit-cover" alt="{{ $img->caption }}" style="cursor: pointer;" onclick="openPreview('{{ asset('storage/'.$img->image_name) }}', '{{ $img->caption }}')">
                            </div>
                            <div class="card-body p-2">
                                <h6 class="card-title text-truncate mb-1">{{ $img->caption }}</h6>
                                <small class="text-muted d-block mb-2">
                                    <i class="bi bi-folder2-open"></i> {{ $img->album }} &bull; {{ $img->created_at->diffForHumans() }}
                                </small>
                            </div>
                            <div class="card-footer bg-white border-top-0 d-flex justify-content-between">
                                <button class="btn btn-sm btn-light text-primary" onclick="openPreview('{{ asset('storage/'.$img->image_name) }}', '{{ $img->caption }}')">
                                    <i class="bi bi-eye"></i> View
                                </button>
                                <div>
                                    <form action="{{route('consultant.gallery.destroy',$img->id)}}" method="post">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-light text-danger" onclick="return confirm('Dummy delete confirmation?');"><i class="bi bi-trash"></i></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-4 d-flex justify-content-center">
                {{ $image->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

    <div class="modal fade" id="previewModal" tabindex="-1">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="previewTitle">Image Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-0 text-center bg-light d-flex align-items-center justify-content-center">
                    <img src="" id="previewImageFull" class="img-fluid">
                </div>

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

@endsection

@push('scripts')
    <script>
        // Minimal JS for the preview modal
        function openPreview(src, title) {
            const modalEl = document.getElementById('previewModal');
            const imgEl = document.getElementById('previewImageFull');
            const titleEl = document.getElementById('previewTitle');

            imgEl.src = src;
            titleEl.textContent = title;

            const modal = new bootstrap.Modal(modalEl);
            modal.show();
        }
    </script>
@endpush