@extends('layouts.seller')

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

@section('content')
<div class="page-header d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="page-title fw-bold text-dark mb-0">Add Banner</h4>
        <p class="text-muted small mb-0">Upload a new banner for your microsite</p>
    </div>
    <a href="{{ route('seller.banners.index') }}" class="btn btn-white border shadow-sm rounded-pill fw-medium">
        <i class="bi bi-arrow-left me-1"></i> Back to Banners
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white py-3 border-bottom px-4">
                <h5 class="mb-0 fw-bold text-primary"><i class="bi bi-image me-2"></i>Banner Details</h5>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('seller.banners.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-uppercase text-muted">Banner Image <span class="text-danger">*</span></label>
                        <div class="p-5 border border-dashed rounded-3 bg-light text-center mb-2 position-relative">
                            <i class="bi bi-cloud-upload display-4 text-muted mb-3"></i>
                            <input type="file" name="image" class="form-control position-absolute top-0 start-0 w-100 h-100 opacity-0" required accept="image/*" id="bannerImage" style="cursor: pointer;">
                             <div class="text-center pointer-events-none">
                                <span class="d-block fw-bold text-dark mb-1">Choose File</span>
                                <small class="text-muted">Drag & drop or click to upload</small>
                            </div>
                        </div>
                        <div id="fileNameDisplay" class="small text-success fw-bold text-center mt-2"></div>

                        @error('image')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        <div class="alert alert-info border-0 bg-info-subtle text-info-emphasis d-flex align-items-center mt-3 mb-0 rounded-3 p-3">
                            <i class="bi bi-info-circle-fill me-2 fs-5"></i>
                            <small class="lh-sm">Recommended size: <strong>1200x400 pixels</strong>. Max file size: 2MB. Supported formats: JPG, PNG, WEBP.</small>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-uppercase text-muted">Link URL <small class="text-muted fw-normal">(Optional)</small></label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-link-45deg"></i></span>
                            <input type="url" name="link" class="form-control border-start-0 ps-0" placeholder="https://example.com/product/..." value="{{ old('link') }}">
                        </div>
                        <small class="text-muted mt-1 d-block">Redirect visitors when they click on this banner.</small>
                    </div>
                    
                    <div class="mb-4">
                        <div class="form-check form-switch p-3 bg-light rounded-3 border d-flex align-items-center justify-content-between">
                            <label class="form-check-label fw-bold text-dark m-0" for="isActive">Set as Active</label>
                            <input class="form-check-input m-0 shadow-none" type="checkbox" name="is_active" id="isActive" checked style="width: 3em; height: 1.5em; cursor: pointer;">
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary py-3 fw-bold rounded-pill shadow-sm text-uppercase" style="letter-spacing: 0.5px;">
                            <i class="bi bi-upload me-2"></i> Upload Banner
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('bannerImage').addEventListener('change', function(e) {
        var fileName = e.target.files[0].name;
        document.querySelector('.text-center.pointer-events-none').innerHTML = '<span class="d-block fw-bold text-success mb-1"><i class="bi bi-check-circle me-1"></i>Selected</span><small class="text-dark">' + fileName + '</small>';
    });
</script>
@endsection