@extends('layouts.admin')

@section('title', 'Images')
@section('page_title', 'Images')

@section('toolbar')
    <form class="flex items-center gap-2" method="POST" action="{{ route('admin.images.store') }}" enctype="multipart/form-data">
        @csrf
        <label class="kt-btn kt-btn-primary cursor-pointer">
            <i class="ki-filled ki-plus"></i>
            Upload image
            <input class="hidden" type="file" name="upload" accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml" required onchange="this.form.requestSubmit()">
        </label>
    </form>
@endsection

@section('content')
<div class="kt-card">
    <div class="kt-card-header flex-wrap gap-3">
        <h3 class="kt-card-title">Image library</h3>
        <form class="mw-admin-filters" method="GET">
            <input class="kt-input" type="search" name="q" value="{{ request('q') }}" placeholder="Search images">
            <button class="kt-btn kt-btn-outline" type="submit">Filter</button>
        </form>
    </div>
    <div class="kt-card-content">
        @error('upload')<div class="text-sm text-destructive mb-4">{{ $message }}</div>@enderror
        @if($images->isEmpty())
            <p class="mw-library-empty">No images uploaded yet. Use Upload image to add one.</p>
        @else
            <div class="mw-library-grid">
                @foreach($images as $file)
                    @php $uses = (int) ($productUses[$file['path']] ?? 0) + (int) ($categoryUses[$file['path']] ?? 0) + (int) ($pageUses[$file['path']] ?? 0); @endphp
                    <article class="mw-library-card">
                        <div class="mw-library-thumb">
                            <img src="{{ $file['url'] }}" alt="{{ $file['name'] }}">
                        </div>
                        <div class="mw-library-body">
                            <div class="mw-library-name" title="{{ $file['name'] }}">{{ $file['name'] }}</div>
                            <div class="mw-library-path" title="{{ $file['path'] }}">{{ $file['path'] }}</div>
                            <div class="mw-library-use">{{ $uses ? $uses.' in use' : 'Not used' }}</div>
                            <div class="mw-library-actions">
                                <button class="kt-btn kt-btn-sm kt-btn-outline" type="button" data-copy-path="{{ $file['path'] }}">Copy path</button>
                                <form method="POST" action="{{ route('admin.images.destroy') }}" onsubmit="return confirm('Delete this image?')">
                                    @csrf @method('DELETE')
                                    <input type="hidden" name="path" value="{{ $file['path'] }}">
                                    <button class="kt-btn kt-btn-sm kt-btn-destructive" type="submit" @disabled($uses > 0)>Delete</button>
                                </form>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
            @if($images->hasPages())
                <div class="mw-library-pager">
                    @if($images->onFirstPage())
                        <span class="kt-btn kt-btn-outline">Previous</span>
                    @else
                        <a class="kt-btn kt-btn-outline" href="{{ $images->previousPageUrl() }}">Previous</a>
                    @endif
                    <span>Page {{ $images->currentPage() }} of {{ $images->lastPage() }}</span>
                    @if($images->hasMorePages())
                        <a class="kt-btn kt-btn-outline" href="{{ $images->nextPageUrl() }}">Next</a>
                    @else
                        <span class="kt-btn kt-btn-outline">Next</span>
                    @endif
                </div>
            @endif
        @endif
    </div>
</div>
@endsection

@push('styles')
<style>
    .mw-library-empty {
        margin: 0;
        padding: 3rem 1rem;
        text-align: center;
        color: var(--secondary-foreground, #71717a);
        font-size: 14px;
    }
    .mw-library-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        margin-top: 1.25rem;
    }
    .mw-library-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 220px);
        gap: 1rem;
        justify-content: start;
        align-items: start;
    }
    .mw-library-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border: 1px solid var(--border, #e4e4e7);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }
    .mw-library-thumb {
        height: 168px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        background: #f4f4f5;
    }
    .mw-library-thumb img {
        display: block;
        max-width: 100%;
        max-height: 144px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .mw-library-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
        padding: 10px 12px 12px;
    }
    .mw-library-name,
    .mw-library-path {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mw-library-name {
        font-size: 13px;
        font-weight: 600;
        color: #18181b;
    }
    .mw-library-path,
    .mw-library-use {
        font-size: 11px;
        color: #71717a;
    }
    .mw-library-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
    }
    .mw-library-actions .kt-btn {
        width: auto;
        flex: 1 1 0;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
    }
    .mw-library-actions form {
        display: flex;
        flex: 1 1 0;
        margin: 0;
    }
    .mw-library-actions form .kt-btn {
        width: 100%;
    }
</style>
@endpush

@push('scripts')
<script>
document.querySelectorAll('[data-copy-path]').forEach((button) => {
    button.addEventListener('click', async () => {
        const path = button.getAttribute('data-copy-path');
        try {
            await navigator.clipboard.writeText(path);
            const previous = button.textContent;
            button.textContent = 'Copied';
            setTimeout(() => { button.textContent = previous; }, 1200);
        } catch (error) {
            button.textContent = path;
        }
    });
});
</script>
@endpush