@extends('layouts.app')

@section('content')
<div class="row mb-4">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted small">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted small">Home Banner</a></li>
                <li class="breadcrumb-item active text-primary small fw-semibold" aria-current="page">Create</li>
            </ol>
        </nav>
        <h2 class="fw-bold text-dark">Create Home Banner</h2>
        <p class="text-secondary small">Design a strong first impression with a headline, supporting copy, and an eye-catching image.</p>
    </div>
</div>

<div class="row">
    <div class="col-lg-7">
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="card-header bg-white border-0 py-3 px-4 mt-2">
                <h6 class="m-0 fw-bold text-dark"><i class="bi bi-window-stack me-2 text-primary"></i> Banner Details</h6>
            </div>
            <div class="card-body p-4 pt-2">
                <form action="{{ route('home-banners.store') }}" method="POST" enctype="multipart/form-data" id="createBannerForm">
                    @csrf
                    <div class="mb-4">
                        <label for="heading" class="form-label fw-bold text-dark mb-2">Banner Heading</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0"><i class="bi bi-type-h1 text-secondary"></i></span>
                            <input type="text" name="heading" class="form-control bg-light border-0 @error('heading') is-invalid @enderror" id="heading" placeholder="e.g. Build Your Dream Portfolio" value="{{ old('heading') }}" required style="padding: 0.75rem;">
                        </div>
                        @error('heading')
                            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="description" class="form-label fw-bold text-dark mb-2">Banner Description</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0 align-items-start pt-3"><i class="bi bi-text-paragraph text-secondary"></i></span>
                            <textarea name="description" class="form-control bg-light border-0 @error('description') is-invalid @enderror" id="description" rows="5" placeholder="Write a short, persuasive message for the homepage banner." required>{{ old('description') }}</textarea>
                        </div>
                        @error('description')
                            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="image" class="form-label fw-bold text-dark mb-2">Banner Image</label>
                        <p style="color: red;">Please upload an image of 1920 × 1080 px.</p>
                        <div class="upload-container bg-light rounded-4 p-4 text-center border-2 border-dashed border-secondary-subtle">
                            <i class="bi bi-image-fill text-primary fs-1 mb-3 d-block"></i>
                            <p class="text-dark fw-semibold mb-1">Choose a hero image</p>
                            <p class="text-secondary small mb-3" id="file-name">JPEG, PNG, JPG, or WEBP up to 2MB</p>
                            <input type="file" name="image" class="form-control @error('image') is-invalid @enderror" id="image"  onchange="showFileName(this)" required>
                        </div>
                        @error('image')
                            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                    <script>
                        function showFileName(input) {
                            if (input.files && input.files[0]) {
                                document.getElementById('file-name').innerText =
                                    'Selected: ' + input.files[0].name;
                            }
                        }
                    </script>

                    <hr class="my-4 opacity-50">

                    <div class="d-flex align-items-center justify-content-between">
                        <a href="{{route('home-banners.index')}}" class="btn btn-link text-decoration-none text-secondary fw-semibold">
                            <i class="bi bi-arrow-left me-1"></i> Back to List
                        </a>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-light rounded-3 px-4 fw-semibold text-secondary" id="resetBannerBtn">
                                <span class="reset-btn-default">Reset</span>
                                <span class="reset-btn-loading d-none">
                                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                    Resetting...
                                </span>
                            </button>
                            <button type="submit" class="btn btn-primary rounded-3 px-5 fw-bold shadow-sm">
                                <i class="bi bi-stars me-2"></i> Save Banner
                            </button>
                        </div>
                    </div>
                </form>
                <div class="reset-status-message d-none mt-3" id="resetStatusMessage">
                    <div class="d-inline-flex align-items-center bg-light border rounded-3 px-3 py-2 text-secondary small fw-semibold">
                        <span class="spinner-border spinner-border-sm me-2 text-primary" role="status" aria-hidden="true"></span>
                        Resetting all the data...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card border-0 hero-tips-card text-white rounded-4 shadow-lg p-3">
            <div class="card-body">
                <h5 class="fw-bold mb-3">Banner Best Practices</h5>
                <div class="d-flex mb-3">
                    <i class="bi bi-lightning-charge-fill me-3 fs-5"></i>
                    <p class="small mb-0">Keep the heading punchy so visitors understand your value within seconds.</p>
                </div>
                <div class="d-flex mb-3">
                    <i class="bi bi-aspect-ratio-fill me-3 fs-5"></i>
                    <p class="small mb-0">Use a wide, clean visual that still looks good when cropped on mobile screens.</p>
                </div>
                <div class="d-flex">
                    <i class="bi bi-brush-fill me-3 fs-5"></i>
                    <p class="small mb-0">Match the image mood with the homepage theme so the hero section feels intentional.</p>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mt-4 p-2 bg-white">
            <div class="card-body d-flex align-items-center">
                <div class="bg-warning-subtle text-warning rounded-circle p-3 me-3">
                    <i class="bi bi-info-circle-fill fs-4"></i>
                </div>
                <div>
                    <h6 class="fw-bold text-dark mb-1">Display Note</h6>
                    <p class="text-secondary small mb-0">This banner will usually be the first thing users see on your homepage.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .upload-container {
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }
    .upload-container:hover {
        background-color: #f1f5f9 !important;
        border-color: #3b82f6 !important;
    }
    .upload-container input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    .hero-tips-card {
        background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 45%, #0f172a 100%);
    }
    .bg-warning-subtle { background-color: #fffbeb !important; }
    .text-warning { color: #d97706 !important; }
    .border-dashed { border-style: dashed !important; }
    .input-group-text { border: none !important; }
    .breadcrumb-item + .breadcrumb-item::before { content: "\2022"; color: #cbd5e1; }
</style>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const createBannerForm = document.getElementById('createBannerForm');
        const resetBannerBtn = document.getElementById('resetBannerBtn');
        const resetStatusMessage = document.getElementById('resetStatusMessage');

        if (!createBannerForm || !resetBannerBtn || !resetStatusMessage) {
            return;
        }

        resetBannerBtn.addEventListener('click', function () {
            if (resetBannerBtn.disabled) {
                return;
            }

            const defaultLabel = resetBannerBtn.querySelector('.reset-btn-default');
            const loadingLabel = resetBannerBtn.querySelector('.reset-btn-loading');

            resetBannerBtn.disabled = true;
            defaultLabel.classList.add('d-none');
            loadingLabel.classList.remove('d-none');
            resetStatusMessage.classList.remove('d-none');

            window.setTimeout(function () {
                createBannerForm.reset();
                resetBannerBtn.disabled = false;
                loadingLabel.classList.add('d-none');
                defaultLabel.classList.remove('d-none');
                resetStatusMessage.classList.add('d-none');
            }, 900);
        });
    });
</script>
@endsection
