@extends('admin::layouts.admin')

@section('title', isset($banner) ? 'Edit Hero Banner' : 'Tambah Hero Banner')

@section('content')
<div class="hero-banner-form-page">
    {{-- Page Header --}}
    <div class="page-header">
        <a href="{{ route('admin.settings.hero-banner') }}" class="btn-back">
            <i class="fas fa-arrow-left"></i>
            Kembali
        </a>
        <h1 class="page-title">{{ isset($banner) ? 'Edit Hero Banner' : 'Tambah Hero Banner' }}</h1>
    </div>

    {{-- Form Card --}}
    <div class="form-card">
        {{-- Card Header with Gradient --}}
        <div class="form-card-header">
            <div class="header-icon">
                <i class="fas fa-image"></i>
            </div>
            <span class="header-title">{{ isset($banner) ? 'Form Edit Hero Banner' : 'Form Tambah Hero Banner' }}</span>
        </div>

        {{-- Card Body --}}
        <div class="form-card-body">
            <form action="{{ isset($banner) ? route('admin.settings.hero-banner.update', $banner->id) : route('admin.settings.hero-banner.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if(isset($banner))
                    @method('PUT')
                @endif

                {{-- Image Upload --}}
                <div class="form-group">
                    <label class="form-label">Gambar Banner <span class="required">*</span></label>
                    <div class="image-upload-area" id="imageUploadArea">
                        <div class="upload-placeholder" id="uploadPlaceholder">
                            @if(isset($banner) && $banner->image)
                                <img src="{{ asset('storage/' . $banner->image) }}" alt="Banner" class="preview-image" id="previewImage">
                            @else
                                <div class="upload-icon">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </div>
                                <p class="upload-text">Drag & drop gambar atau</p>
                                <button type="button" class="btn-browse" onclick="document.getElementById('imageInput').click()">
                                    Pilih File
                                </button>
                                <p class="upload-hint">Format: JPG, PNG, WebP (Maks. 2MB)</p>
                                <p class="upload-hint">Ukuran: 1920 x 600 px (recommended)</p>
                            @endif
                        </div>
                        <input type="file" name="image" id="imageInput" accept="image/*" hidden>
                    </div>
                </div>

                {{-- Title --}}
                <div class="form-group">
                    <label class="form-label" for="title">Judul <span class="required">*</span></label>
                    <input type="text" name="title" id="title" class="form-input" placeholder="Masukkan judul banner" value="{{ $banner->title ?? old('title') }}" required>
                </div>

                {{-- Description --}}
                <div class="form-group">
                    <label class="form-label" for="description">Deskripsi <span class="required">*</span></label>
                    <textarea name="description" id="description" class="form-textarea" rows="4" placeholder="Masukkan deskripsi banner" required>{{ $banner->description ?? old('description') }}</textarea>
                </div>

                {{-- Button Text --}}
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="button_text">Teks Tombol</label>
                        <input type="text" name="button_text" id="button_text" class="form-input" placeholder="Contoh: Lihat Selengkapnya" value="{{ $banner->button_text ?? old('button_text') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="button_link">Link Tombol</label>
                        <input type="url" name="button_link" id="button_link" class="form-input" placeholder="https://example.com" value="{{ $banner->button_link ?? old('button_link') }}">
                    </div>
                </div>

                {{-- Order & Status --}}
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="order">Urutan</label>
                        <input type="number" name="order" id="order" class="form-input" placeholder="1" value="{{ $banner->order ?? old('order', 1) }}" min="1">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="status">Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="active" {{ (isset($banner) && $banner->status == 'active') ? 'selected' : '' }}>Aktif</option>
                            <option value="inactive" {{ (isset($banner) && $banner->status == 'inactive') ? 'selected' : '' }}>Tidak Aktif</option>
                        </select>
                    </div>
                </div>

                {{-- Form Actions --}}
                <div class="form-actions">
                    <a href="{{ route('admin.settings.hero-banner') }}" class="btn-cancel">Batal</a>
                    <button type="submit" class="btn-submit">
                        <i class="fas fa-save"></i>
                        {{ isset($banner) ? 'Update' : 'Simpan' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.hero-banner-form-page {
    max-width: 1400px;
}

/* Page Header */
.page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.btn-back:hover {
    background: rgba(139, 92, 246, 0.3);
    transform: translateX(-3px);
}

.page-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
}

/* Form Card */
.form-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.form-card-header {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.header-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.form-card-body {
    padding: 24px;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-label .required {
    color: #ef4444;
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-input::placeholder, .form-textarea::placeholder {
    color: var(--text-muted);
}

.form-select {
    cursor: pointer;
}

.form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Image Upload */
.image-upload-area {
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.image-upload-area:hover, .image-upload-area.dragover {
    border-color: var(--purple-primary);
    background: rgba(139, 92, 246, 0.1);
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-icon {
    width: 64px;
    height: 64px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon i {
    font-size: 28px;
    color: var(--purple-primary);
}

.upload-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.btn-browse {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-browse:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.upload-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.preview-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    object-fit: cover;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.btn-cancel {
    padding: 12px 24px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: rgba(139, 92, 246, 0.3);
}

.btn-submit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-cancel, .btn-submit {
        width: 100%;
        justify-content: center;
    }
}
</style>

<script>
// Image upload preview
const imageUploadArea = document.getElementById('imageUploadArea');
const imageInput = document.getElementById('imageInput');
const uploadPlaceholder = document.getElementById('uploadPlaceholder');

imageUploadArea.addEventListener('click', () => {
    imageInput.click();
});

imageUploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    imageUploadArea.classList.add('dragover');
});

imageUploadArea.addEventListener('dragleave', () => {
    imageUploadArea.classList.remove('dragover');
});

imageUploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    imageUploadArea.classList.remove('dragover');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        imageInput.files = files;
        showPreview(files[0]);
    }
});

imageInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        showPreview(e.target.files[0]);
    }
});

function showPreview(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
        uploadPlaceholder.innerHTML = `<img src="${e.target.result}" alt="Preview" class="preview-image" id="previewImage">`;
    };
    reader.readAsDataURL(file);
}
</script>
@endsection