@extends('layouts.admin')

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

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
    <h1 class="h2">Edit Banner</h1>
    <div>
        <a href="{{ route('admin.settings.index', ['tab' => 'banners']) }}" class="btn btn-outline-secondary me-2">
            <i class="bi bi-arrow-left"></i> Back to Settings
        </a>
        <a href="{{ route('admin.banners.index') }}" class="btn btn-secondary">View All</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('admin.banners.update', $banner->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            @if(request()->has('from_settings'))
                <input type="hidden" name="from_settings" value="1">
            @endif

            <div class="mb-3">
                <label class="form-label">Title</label>
                <input type="text" name="title" class="form-control" value="{{ old('title', $banner->title) }}" placeholder="Banner title (optional)">
            </div>

            <div class="mb-3">
                <label class="form-label">Banner Image</label>
                @if($banner->image_path)
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $banner->image_path) }}" alt="{{ $banner->title }}" class="img-thumbnail" style="max-width: 100%; max-height: 300px;">
                    </div>
                @endif
                <input type="file" name="image" id="bannerImage" class="form-control @error('image') is-invalid @enderror" accept="image/*">
                <div id="imageError" class="invalid-feedback" style="display: none;"></div>
                @error('image')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
                <small class="form-text text-muted">Leave empty to keep current image. Recommended size: 1920x600px. Max file size: <strong>2MB</strong> (will be automatically compressed and resized)</small>
                <div id="fileSizeInfo" class="mt-2" style="display: none;">
                    <small class="text-success" id="fileSizeText"></small>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Link URL</label>
                <input type="url" name="link" class="form-control" value="{{ old('link', $banner->link) }}" placeholder="https://example.com (optional)">
                <small class="form-text text-muted">Clickable link when banner is clicked</small>
            </div>

            <div class="mb-3">
                <label class="form-label">Sort Order (1-3)</label>
                <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $banner->sort_order) }}" min="1" max="3">
                <small class="form-text text-muted">Display order (1 = first, 3 = last). Maximum 3 banners allowed.</small>
            </div>

            <div class="mb-3">
                <div class="form-check">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" class="form-check-input" id="isActive" value="1" {{ old('is_active', $banner->is_active) ? 'checked' : '' }}>
                    <label class="form-check-label" for="isActive">Active</label>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" id="submitBtn">Update Banner</button>
        </form>
    </div>
</div>

<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 submitBtn = document.getElementById('submitBtn');
    const form = fileInput.closest('form');
    
    const maxSizeMB = 2;
    const maxSizeBytes = maxSizeMB * 1024 * 1024; // 2MB in bytes
    
    fileInput.addEventListener('change', function(e) {
        const file = e.target.files && e.target.files.length > 0 ? e.target.files[0] : null;
        
        // Reset previous errors
        errorDiv.style.display = 'none';
        fileInput.classList.remove('is-invalid');
        fileSizeInfo.style.display = 'none';
        submitBtn.disabled = false;
        
        if (file) {
            // Check file size
            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');
                submitBtn.disabled = true;
                fileInput.value = ''; // Clear the file input
            } else {
                // Show file size info
                const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
                fileSizeText.textContent = `Selected file: ${fileSizeMB}MB (within limit)`;
                fileSizeInfo.style.display = 'block';
            }
        }
    });
    
    // Also validate on form submit as a safety measure
    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>
@endsection