@extends('layouts.admin')

@section('admin_content')
<div x-data="photoManager()" x-init="init()">

    <div class="page-header">
        <h1 class="page-title">Photo Gallery</h1>
        <button class="btn btn-primary" @click="openAddModal()">
            <i class="fas fa-plus"></i> Add Photo
        </button>
    </div>

    <!-- Filter Bar -->
    <div class="filter-bar">
        <div class="form-group">
            <label class="form-label">Show</label>
            <select class="form-select" style="width:80px" x-model="per_page" @change="fetchItems(1)">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label">Search</label>
            <input type="text" class="form-control" placeholder="Search photos..." x-model="filters.search">
        </div>
        <div class="form-group">
            <label class="form-label">Category</label>
            <select class="form-select" x-model="filters.category_id">
                <option value="">All Categories</option>
                <template x-for="cat in categories" :key="cat.id">
                    <option :value="cat.id" x-text="cat.name"></option>
                </template>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label">Status</label>
            <select class="form-select" x-model="filters.status">
                <option value="">All</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
        </div>
        <div class="form-group align-self-end">
            <button class="btn btn-outline-secondary" @click="fetchItems(1)">
                <i class="fas fa-filter"></i> Filter
            </button>
        </div>
    </div>

    <!-- Photo Grid -->
    <div class="panel">
        <div class="panel-body">

            <!-- Loading -->
            <div x-show="loading" class="text-center py-5">
                <div class="spinner-border text-primary"></div>
            </div>

            <!-- Empty -->
            <div x-show="!loading && items.length === 0" class="text-center py-5 text-muted">
                No photos found.
            </div>

            <!-- Grid -->
            <div class="row g-3" x-show="!loading && items.length > 0">
                <template x-for="item in items" :key="item.id">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-6">
                        <div class="photo-grid-card position-relative rounded-3 overflow-hidden"
                            style="aspect-ratio:1; background:#f0f0f0;">
                            <img :src="item.path_url" class="w-100 h-100"
                                style="object-fit:cover;">
                            <!-- Overlay -->
                            <div class="photo-overlay position-absolute inset-0 d-flex flex-column justify-content-between p-2"
                                style="top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);opacity:0;transition:opacity 0.2s;"
                                onmouseenter="this.style.opacity=1" onmouseleave="this.style.opacity=0">
                                <div class="d-flex justify-content-end gap-1">
                                    <button class="btn btn-sm btn-light py-0 px-1" @click="openEditModal(item.id)">
                                        <i class="fas fa-edit small"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger py-0 px-1" @click="deleteItem(item.id)">
                                        <i class="fas fa-trash small"></i>
                                    </button>
                                </div>
                                <div>
                                    <div class="text-white small fw-semibold text-truncate" x-text="item.title"></div>
                                    <span class="badge"
                                        :class="item.status === 'active' ? 'bg-success' : 'bg-secondary'"
                                        x-text="item.status === 'active' ? 'Active' : 'Inactive'">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-4" x-show="pagination.last_page > 1">
                <div class="text-muted small">Total: <strong x-text="pagination.total"></strong> photos</div>
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        <li class="page-item" :class="{ disabled: pagination.current_page === 1 }">
                            <button class="page-link" @click="goToPage(pagination.current_page - 1)">&laquo;</button>
                        </li>
                        <template x-for="page in pagination.last_page" :key="page">
                            <li class="page-item" :class="{ active: page === pagination.current_page }">
                                <button class="page-link" x-text="page" @click="goToPage(page)"></button>
                            </li>
                        </template>
                        <li class="page-item" :class="{ disabled: pagination.current_page === pagination.last_page }">
                            <button class="page-link" @click="goToPage(pagination.current_page + 1)">&raquo;</button>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Add / Edit Modal -->
    <div class="modal fade" id="photoModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" x-text="isEditing ? 'Edit Photo' : 'Add Photo'"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <!-- Title -->
                        <div class="mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" x-model="form.title" placeholder="Photo title">
                            <div class="text-danger small mt-1" x-text="errors.title"></div>
                        </div>

                        <!-- Category -->
                        <div class="mb-3">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-select" x-model="form.category_id">
                                <option value="">Select Category</option>
                                <template x-for="cat in categories" :key="cat.id">
                                    <option :value="cat.id" x-text="cat.name"></option>
                                </template>
                            </select>
                            <div class="text-danger small mt-1" x-text="errors.category_id"></div>
                        </div>

                        <!-- Photo Upload -->
                        <div class="mb-3">
                            <label class="form-label">
                                Photo
                                <span class="text-danger" x-show="!isEditing">*</span>
                                <span class="text-muted small" x-show="isEditing">(leave empty to keep current)</span>
                            </label>
                            <!-- Current preview -->
                            <div x-show="isEditing && form.current_path" class="mb-2">
                                <img :src="form.current_path" width="120" height="90"
                                    class="rounded border" style="object-fit:cover;">
                            </div>
                            <input type="file" class="form-control" id="photoInput"
                                accept="image/jpg,image/jpeg,image/png,image/webp,image/avif"
                                @change="handlePhotoChange($event)">
                            <div class="text-danger small mt-1" x-text="errors.path"></div>
                            <!-- New preview -->
                            <div x-show="photoPreview" class="mt-2">
                                <img :src="photoPreview" width="120" height="90"
                                    class="rounded border" style="object-fit:cover;">
                            </div>
                        </div>

                        <!-- Caption -->
                        <div class="mb-3">
                            <label class="form-label">Caption</label>
                            <textarea class="form-control" rows="2" x-model="form.caption"
                                placeholder="Optional caption"></textarea>
                        </div>

                        <!-- Order & Status -->
                        <div class="row">
                            <div class="col-6 mb-3">
                                <label class="form-label">Order</label>
                                <input type="number" class="form-control" x-model="form.order" min="0">
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" x-model="form.status">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        @click="resetForm()">Cancel</button>
                    <button type="button" class="btn btn-primary" @click="saveItem()" :disabled="saving">
                        <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                        <span x-text="isEditing ? 'Update' : 'Save'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function photoManager() {
    return {
        items: [], categories: [],
        loading: false, saving: false,
        isEditing: false, editingId: null,
        per_page: 10,
        photoFile: null, photoPreview: null,
        filters: { search: '', status: '', category_id: '' },
        pagination: { current_page: 1, last_page: 1, per_page: 10, total: 0 },
        form: { title: '', category_id: '', caption: '', order: 0, status: 'active', current_path: '' },
        errors: {},

        async init() {
            await this.loadCategories();
            await this.fetchItems();
        },

        async loadCategories() {
            try {
                const res  = await fetch('{{ route('admin.photos.categories') }}');
                const json = await res.json();
                this.categories = json.data;
            } catch (e) {}
        },

        async fetchItems(page = 1) {
            this.loading = true;
            try {
                const params = new URLSearchParams();
                if (this.filters.search)      params.append('search',      this.filters.search);
                if (this.filters.status)      params.append('status',      this.filters.status);
                if (this.filters.category_id) params.append('category_id', this.filters.category_id);
                params.append('per_page', this.per_page);
                params.append('page', page);

                const res  = await fetch(`{{ route('admin.photos.list') }}?${params}`);
                const json = await res.json();
                this.items      = json.data;
                this.pagination = json.pagination;
            } catch (e) {
                showError('Failed to load photos.');
            } finally {
                this.loading = false;
            }
        },

        goToPage(page) {
            if (page < 1 || page > this.pagination.last_page) return;
            this.fetchItems(page);
        },

        openAddModal() {
            this.resetForm();
            this.isEditing = false;
            new bootstrap.Modal(document.getElementById('photoModal')).show();
        },

        async openEditModal(id) {
            this.resetForm();
            this.isEditing = true;
            this.editingId = id;
            try {
                showLoading();
                const res  = await fetch(`{{ url('admin/photos') }}/${id}`);
                const json = await res.json();
                const s    = json.data;
                this.form.title       = s.title;
                this.form.category_id = s.category_id;
                this.form.caption     = s.caption ?? '';
                this.form.order       = s.order;
                this.form.status      = s.status;
                this.form.current_path = s.path_url ?? '';
            } catch (e) {
                showError('Failed to load photo.');
                return;
            } finally {
                hideLoading();
            }
            new bootstrap.Modal(document.getElementById('photoModal')).show();
        },

        handlePhotoChange(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.photoFile    = file;
            this.photoPreview = URL.createObjectURL(file);
        },

        async saveItem() {
            this.errors = {};
            this.saving = true;

            const formData = new FormData();
            formData.append('title',       this.form.title);
            formData.append('category_id', this.form.category_id);
            formData.append('caption',     this.form.caption ?? '');
            formData.append('order',       this.form.order ?? 0);
            formData.append('status',      this.form.status);
            formData.append('_token',      '{{ csrf_token() }}');
            if (this.photoFile) formData.append('path', this.photoFile);
            if (this.isEditing) formData.append('_method', 'PUT');

            const url = this.isEditing
                ? `{{ url('admin/photos') }}/${this.editingId}`
                : '{{ route('admin.photos.store') }}';

            try {
                const res  = await fetch(url, {
                    method: 'POST',
                    headers: { 'Accept': 'application/json' },
                    body: formData,
                });
                const json = await res.json();

                if (res.ok && json.success) {
                    bootstrap.Modal.getInstance(document.getElementById('photoModal')).hide();
                    this.resetForm();
                    this.fetchItems(this.pagination.current_page);
                    showSuccess(json.message);
                } else if (res.status === 422) {
                    Object.keys(json.errors).forEach(k => this.errors[k] = json.errors[k][0]);
                } else {
                    showError(json.message ?? 'Something went wrong.');
                }
            } catch (e) {
                showError('Request failed.');
            } finally {
                this.saving = false;
            }
        },

        deleteItem(id) {
            showConfirm('This photo will be permanently deleted.', 'Delete Photo?', async () => {
                try {
                    showLoading();
                    const res  = await fetch(`{{ url('admin/photos') }}/${id}`, {
                        method: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    });
                    const json = await res.json();
                    if (json.success) {
                        this.fetchItems(this.pagination.current_page);
                        showSuccess(json.message);
                    } else {
                        showError(json.message ?? 'Delete failed.');
                    }
                } catch (e) {
                    showError('Request failed.');
                } finally {
                    hideLoading();
                }
            });
        },

        resetForm() {
            this.form = { title: '', category_id: '', caption: '', order: 0, status: 'active', current_path: '' };
            this.errors = {};
            this.photoFile = null;
            this.photoPreview = null;
            this.editingId = null;
            const el = document.getElementById('photoInput');
            if (el) el.value = '';
        },
    };
}
</script>
@endpush