@extends('layouts.vendor')

@section('title', 'Store Banners & Sliders')
@section('header_title', 'Promotional Banners & Header Sliders')

@section('content')
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <div>
            <h3 style="color: #fff; font-size: 1.4rem;">Store Banners & Sliders</h3>
            <p style="color: var(--text-muted); font-size: 0.9rem;">Upload promotional banners displayed to customers when viewing your optical store.</p>
        </div>
        <button class="btn btn-primary" onclick="document.getElementById('addBannerModal').style.display='flex'">
            <i class="fa-solid fa-plus"></i> Upload New Banner
        </button>
    </div>

    <!-- Banners Grid -->
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem;">
        @forelse($banners as $banner)
            <div class="card" style="padding: 0; overflow: hidden;">
                <div style="height: 160px; background: #000; position: relative;">
                    <img src="{{ $banner->image_url }}" alt="{{ $banner->title }}" style="width: 100%; height: 100%; object-fit: cover;">
                    <span class="badge badge-success" style="position: absolute; top: 12px; left: 12px;">Active</span>
                </div>
                <div style="padding: 1.2rem;">
                    <h4 style="color: #fff; margin-bottom: 4px;">{{ $banner->title }}</h4>
                    @if($banner->link_url)
                        <a href="{{ $banner->link_url }}" target="_blank" style="color: var(--primary); font-size: 0.85rem; text-decoration: none;">
                            <i class="fa-solid fa-link"></i> {{ Str::limit($banner->link_url, 35) }}
                        </a>
                    @endif
                    <div style="display: flex; justify-content: flex-end; margin-top: 1rem;">
                        <form action="{{ route('vendor.banners.delete', $banner->id) }}" method="POST" onsubmit="return confirm('Remove this banner?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">
                                <i class="fa-solid fa-trash"></i> Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @empty
            <div class="card" style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
                <i class="fa-solid fa-image" style="font-size: 3rem; color: rgba(255,255,255,0.15); margin-bottom: 1rem;"></i>
                <h4 style="color: #fff;">No Banners Uploaded Yet</h4>
                <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 4px;">Upload seasonal sale banners, frame promotions, or store discount slides.</p>
            </div>
        @endforelse
    </div>

    <!-- Upload Banner Modal -->
    <div id="addBannerModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 1000; align-items: center; justify-content: center;">
        <div class="card" style="max-width: 500px; width: 90%; background: #1E293B;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem;">
                <h3 style="color: #fff; margin: 0;"><i class="fa-solid fa-cloud-arrow-up" style="color: var(--primary);"></i> Upload Banner</h3>
                <button type="button" onclick="document.getElementById('addBannerModal').style.display='none'" style="background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer;">&times;</button>
            </div>

            <form action="{{ route('vendor.banners.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div>
                    <label>Banner Title / Campaign Name *</label>
                    <input type="text" name="title" placeholder="e.g. Summer Eyewear Flat 30% Off" required>
                </div>

                <div>
                    <label>Select Banner Image (1200x500 Recommended) *</label>
                    <input type="file" name="image" accept="image/*" required>
                </div>

                <div>
                    <label>Action / External Link URL (Optional)</label>
                    <input type="url" name="link_url" placeholder="https://...">
                </div>

                <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.5rem;">
                    <button type="button" class="btn" style="background: #334155; color: #fff;" onclick="document.getElementById('addBannerModal').style.display='none'">Cancel</button>
                    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Upload Banner</button>
                </div>
            </form>
        </div>
    </div>
@endsection
