@extends('layouts.admin')

@section('title', 'Create Banner')

@section('content')
<x-admin.form-page
    title="Create Banner"
    :crumbs="[['label' => 'Banners', 'url' => route('admin.banners.index')], 'Create']"
    :back-url="request()->has('from_settings') ? route('admin.settings.index', ['tab' => 'banners']) : route('admin.banners.index')"
    :action="route('admin.banners.store')"
    form-id="bannerForm"
    submit-label="Create Banner"
    enctype="multipart/form-data"
>
    <x-slot:summary>
        <p class="pp-hint mb-3">Upload a homepage banner. Maximum 3 banners allowed.</p>
        @if(request()->has('from_settings'))
            <a href="{{ route('admin.banners.index') }}" class="pp-btn pp-btn--ghost pp-btn--block mb-3">
                <i class="bi bi-images"></i> View All Banners
            </a>
        @else
            <a href="{{ route('admin.settings.index', ['tab' => 'banners']) }}" class="pp-btn pp-btn--ghost pp-btn--block mb-3">
                <i class="bi bi-gear"></i> Back to Settings
            </a>
        @endif
    </x-slot:summary>

    @if(request()->has('from_settings'))
        <input type="hidden" name="from_settings" value="1">
    @endif

    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-image"></i></span>
            <div>
                <h2 class="pp-card__title">Banner Details</h2>
                <p class="pp-card__sub">Image, link and display order</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-field">
                <label for="title">Title</label>
                <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}" placeholder="Banner title (optional)">
            </div>

            <div class="pp-field mt-3">
                <label for="bannerImage">Banner Image <span class="pp-req">*</span></label>
                <input type="file" name="image" id="bannerImage" class="form-control @error('image') is-invalid @enderror" accept="image/*" required>
                <div id="imageError" class="invalid-feedback" style="display: none;"></div>
                @error('image')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                <span class="pp-hint">Recommended size: 1920×600px. Max file size: <strong>2MB</strong> (will be automatically compressed and resized)</span>
                <div id="fileSizeInfo" class="mt-2" style="display: none;">
                    <small class="text-success" id="fileSizeText"></small>
                </div>
            </div>

            <div class="pp-grid pp-grid--2 mt-3">
                <div class="pp-field">
                    <label for="link">Link URL</label>
                    <input type="url" name="link" id="link" class="form-control" value="{{ old('link') }}" placeholder="https://example.com (optional)">
                    <span class="pp-hint">Clickable link when banner is clicked</span>
                </div>

                <div class="pp-field">
                    <label for="sort_order">Sort Order (1–3)</label>
                    <input type="number" name="sort_order" id="sort_order" class="form-control" value="{{ old('sort_order') }}" min="1" max="3">
                    <span class="pp-hint">Display order (1 = first, 3 = last)</span>
                </div>
            </div>

            <div class="pp-toggles mt-3">
                <label class="pp-toggle" for="isActive">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" class="form-check-input" role="switch" id="isActive" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                    Active
                </label>
            </div>
        </div>
    </section>
</x-admin.form-page>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('bannerImage');
    const errorDiv = document.getElementById('imageError');
    const fileSizeInfo = document.getElementById('fileSizeInfo');
    const fileSizeText = document.getElementById('fileSizeText');
    const form = document.getElementById('bannerForm');

    const maxSizeMB = 2;
    const maxSizeBytes = maxSizeMB * 1024 * 1024;

    function setSubmitDisabled(disabled) {
        document.querySelectorAll('button[form="bannerForm"]').forEach(btn => btn.disabled = disabled);
    }

    fileInput.addEventListener('change', function(e) {
        const file = e.target.files && e.target.files.length > 0 ? e.target.files[0] : null;

        errorDiv.style.display = 'none';
        fileInput.classList.remove('is-invalid');
        fileSizeInfo.style.display = 'none';
        setSubmitDisabled(false);

        if (file) {
            if (file.size > maxSizeBytes) {
                const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
                errorDiv.textContent = `File size (${fileSizeMB}MB) exceeds the maximum allowed size of ${maxSizeMB}MB. Please choose a smaller image.`;
                errorDiv.style.display = 'block';
                fileInput.classList.add('is-invalid');
                setSubmitDisabled(true);
                fileInput.value = '';
            } else {
                const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
                fileSizeText.textContent = `Selected file: ${fileSizeMB}MB (within limit)`;
                fileSizeInfo.style.display = 'block';
            }
        }
    });

    form.addEventListener('submit', function(e) {
        const file = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0] : null;

        if (file && file.size > maxSizeBytes) {
            e.preventDefault();
            const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
            errorDiv.textContent = `File size (${fileSizeMB}MB) exceeds the maximum allowed size of ${maxSizeMB}MB. Please choose a smaller image.`;
            errorDiv.style.display = 'block';
            fileInput.classList.add('is-invalid');
            fileInput.focus();
            return false;
        }
    });
});
</script>
@endpush
@endsection