@extends('layouts.admin.app')
@section('title', 'Add Banner')
@push('style')
<style>
    .banner-form-card { background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 28px 32px; margin-top: 20px; max-width: 640px; }
    .banner-form-card h2 { color: #fff; font-size: 22px; margin: 0 0 24px; }
    .form-group-admin { margin-bottom: 20px; }
    .form-group-admin > label { display: block; color: #ccc; font-size: 13px; margin-bottom: 8px; }
    .admin-input, .admin-select { width: 100%; background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; color: #fff; font-size: 14px; outline: none; }
    .image-upload-zone { border: 2px dashed rgba(123,97,255,.45); border-radius: 16px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; text-align: center; padding: 24px; }
    .image-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .image-upload-icon { color: #7b61ff; margin-bottom: 12px; }
    .image-upload-zone p { color: #888; margin: 4px 0 0; font-size: 13px; }
    #image-preview { max-width: 100%; max-height: 220px; border-radius: 12px; display: none; margin-bottom: 12px; }
    .banner-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); }
    .btn-banner-cancel { color: #aaa; border: 1px solid rgba(255,255,255,.12); padding: 12px 24px; border-radius: 12px; text-decoration: none; }
    .btn-banner-save { background: #22c55e; color: #fff; border: none; padding: 12px 28px; border-radius: 12px; cursor: pointer; font-weight: 600; }
    label.error { color: #f87171; font-size: 12px; margin-top: 6px; display: block; font-weight: 400; }
    .admin-input.error, .admin-select.error { border-color: #f87171 !important; }
    .image-upload-zone.error { border-color: #f87171 !important; }
</style>
@endpush

@section('content')
<div class="content_area">
    @include('admin.layouts.alert')

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <a href="{{ route('admin.banners.index') }}">Banners</a>
        <span>›</span>
        <span class="active">Add Banner</span>
    </div>

    <div class="banner-form-card">
        <h2>Add Banner</h2>

        <form id="bannerCreateForm" action="{{ route('admin.banners.store') }}" method="POST" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="form-group-admin">
                <label>Banner Image</label>
                <div style="margin-bottom:12px;">
                    <img id="image-preview" alt="">
                </div>
                <div class="image-upload-zone" id="image-upload-zone">
                    <input type="file" name="banner" id="banner" accept="image/png,image/jpeg,image/webp">
                    <div class="image-upload-icon">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M12 16V4m0 0L8 8m4-4l4 4M4 20h16" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <span style="color:#ccc;">Drag &amp; Drop banner here</span>
                    <p>PNG, JPG, WEBP up to 5MB</p>
                </div>
            </div>
            <div class="form-group-admin">
                <label>Display Order</label>
                <input type="number" name="display_order" id="display_order" class="admin-input" value="{{ old('display_order', 0) }}" min="0">
            </div>
            <div class="form-group-admin">
                <label>Status</label>
                <select name="is_active" id="is_active" class="admin-select">
                    <option value="1" @selected(old('is_active', '1') == '1')>Active</option>
                    <option value="0" @selected(old('is_active') == '0')>Inactive</option>
                </select>
            </div>
            <div class="banner-form-actions">
                <a href="{{ route('admin.banners.index') }}" class="btn-banner-cancel">Cancel</a>
                <button type="submit" class="btn-banner-save">Save Banner</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
<script>
    $(function () {
        const maxFileSize = 5120 * 1024;

        $.validator.addMethod('validImage', function (value, element) {
            if (!element.files || !element.files.length) return false;
            const file = element.files[0];
            const allowedTypes = ['image/png', 'image/jpeg', 'image/webp'];
            const allowedExt = /\.(png|jpe?g|webp)$/i;
            return allowedTypes.includes(file.type) && allowedExt.test(file.name) && file.size <= maxFileSize;
        }, 'Please upload a PNG, JPG, or WEBP image up to 5MB.');

        $('#bannerCreateForm').validate({
            ignore: [],
            errorClass: 'error',
            errorElement: 'label',
            rules: {
                banner: { required: true, validImage: true },
                display_order: { digits: true },
                is_active: { required: true }
            },
            messages: {
                banner: {
                    required: 'Please upload a banner image.',
                    validImage: 'Please upload a PNG, JPG, or WEBP image up to 5MB.'
                }
            },
            errorPlacement: function (error, element) {
                if (element.attr('name') === 'banner') {
                    error.insertAfter('#image-upload-zone');
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element) {
                if (element.name === 'banner') {
                    $('#image-upload-zone').addClass('error');
                } else {
                    $(element).addClass('error');
                }
            },
            unhighlight: function (element) {
                if (element.name === 'banner') {
                    $('#image-upload-zone').removeClass('error');
                } else {
                    $(element).removeClass('error');
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });

        let previewUrl = null;
        $('#banner').on('change', function () {
            const file = this.files[0];
            $(this).valid();
            if (!file) return;
            if (previewUrl) URL.revokeObjectURL(previewUrl);
            previewUrl = URL.createObjectURL(file);

            const img = document.getElementById('image-preview');
            img.src = previewUrl;
            img.style.display = 'block';
        });
    });
</script>
@endpush