@extends('admin.layouts.app')

@section('title', 'Add Car Brand')

@section('content')
<style>
    .form-card { border-radius: 16px; border: 1.5px solid #e9ecef; }
    .preview-card { border-radius: 16px; border: 1.5px solid #e9ecef; position: sticky; top: 80px; }
    .styled-label { font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: 6px; display:block; }
    .styled-input {
        border: 1.5px solid #e5e7eb; border-radius: 10px;
        padding: 10px 14px; font-size: .9rem; width: 100%;
        transition: border-color .2s, box-shadow .2s;
    }
    .styled-input:focus {
        border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1); outline: none;
    }
    .styled-input.is-invalid { border-color: #ef4444; }
    .type-option { cursor: pointer; }
    .type-option input[type=radio] { display: none; }
    .type-option .type-box {
        border: 2px solid #e5e7eb; border-radius: 12px; padding: 14px 20px;
        text-align: center; transition: all .2s; user-select: none;
    }
    .type-option input:checked + .type-box {
        border-color: #7c3aed;
        background: linear-gradient(135deg, #f5f3ff, #ede9fe);
        color: #7c3aed;
    }
    .type-option .type-box:hover { border-color: #c4b5fd; }
    .logo-upload-area {
        border: 2px dashed #d1d5db; border-radius: 14px;
        padding: 28px; text-align: center; cursor: pointer;
        transition: all .2s; background: #fafafa;
    }
    .logo-upload-area:hover, .logo-upload-area.dragover {
        border-color: #7c3aed; background: #f5f3ff;
    }
    .logo-upload-area input[type=file] { display: none; }
    .preview-logo-wrap {
        width: 100px; height: 100px; border-radius: 16px;
        border: 2px solid #e9ecef; overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        background: #f8f9fa; margin: 0 auto 12px;
    }
    .preview-logo-wrap img { width:100%; height:100%; object-fit:cover; }
    .toggle-switch { position:relative; display:inline-block; width:48px; height:26px; }
    .toggle-switch input { display:none; }
    .toggle-slider {
        position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
        background:#d1d5db; border-radius:34px; transition:.3s;
    }
    .toggle-slider:before {
        position:absolute; content:""; height:20px; width:20px;
        left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s;
    }
    .toggle-switch input:checked + .toggle-slider { background:#7c3aed; }
    .toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }
    .submit-btn {
        background: linear-gradient(135deg,#7c3aed,#4f46e5);
        border: none; border-radius: 10px; padding: 11px 28px;
        font-weight: 600; color: white; width: 100%;
        transition: opacity .2s, transform .1s;
    }
    .submit-btn:hover { opacity: .92; transform: translateY(-1px); }
    .cancel-btn {
        border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 11px 20px;
        font-weight: 600; color: #64748b; background: white; width: 100%;
        transition: all .2s;
    }
    .cancel-btn:hover { border-color: #94a3b8; color: #374151; }
    .section-divider { border: none; border-top: 1.5px solid #f1f5f9; margin: 20px 0; }
</style>

<div class="container-fluid py-2">

    {{-- Breadcrumb / Header --}}
    <div class="d-flex align-items-center gap-3 mb-4">
        <a href="{{ route('admin.car-brands.index') }}"
            style="width:38px;height:38px;border-radius:10px;border:1.5px solid #e5e7eb;background:white;display:flex;align-items:center;justify-content:center;color:#374151;text-decoration:none;">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="fw-bold mb-0" style="color:#1e293b;">Add New Car Brand</h4>
            <small class="text-muted"><a href="{{ route('admin.car-brands.index') }}" class="text-decoration-none text-muted">Car Brands</a> / Add New</small>
        </div>
    </div>

    @if($errors->any())
        <div class="alert border-0 mb-4 d-flex gap-2 align-items-start"
            style="background:#fef2f2; color:#dc2626; border-radius:12px; padding:14px 18px; border-left:4px solid #ef4444 !important;">
            <i class="bi bi-exclamation-triangle-fill mt-1"></i>
            <div>
                <strong>Please fix the following errors:</strong>
                <ul class="mb-0 mt-1">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        </div>
    @endif

    <form action="{{ route('admin.car-brands.store') }}" method="POST" enctype="multipart/form-data" id="brandForm">
        @csrf
        <div class="row g-4">

            {{-- LEFT: Form --}}
            <div class="col-lg-7">
                <div class="form-card card p-4">

                    {{-- Brand Name --}}
                    <div class="mb-4">
                        <label class="styled-label">Brand Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="brandName" value="{{ old('name') }}"
                            class="styled-input @error('name') is-invalid @enderror"
                            placeholder="e.g. Toyota, BMW, Honda" autocomplete="off" required>
                        @error('name')<div style="color:#ef4444; font-size:.8rem; margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    {{-- Type --}}
                    <div class="mb-4">
                        <label class="styled-label">Brand Type <span class="text-danger">*</span></label>
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="type-option w-100">
                                    <input type="radio" name="type" value="popular"
                                        {{ old('type','popular') === 'popular' ? 'checked' : '' }}>
                                    <div class="type-box">
                                        <i class="bi bi-star-fill d-block fs-4 mb-1" style="color:#3b82f6;"></i>
                                        <div class="fw-semibold" style="font-size:.9rem;">Popular</div>
                                        <small class="text-muted">Mainstream brands</small>
                                    </div>
                                </label>
                            </div>
                            <div class="col-6">
                                <label class="type-option w-100">
                                    <input type="radio" name="type" value="luxury"
                                        {{ old('type') === 'luxury' ? 'checked' : '' }}>
                                    <div class="type-box">
                                        <i class="bi bi-gem d-block fs-4 mb-1" style="color:#d97706;"></i>
                                        <div class="fw-semibold" style="font-size:.9rem;">Luxury</div>
                                        <small class="text-muted">Premium brands</small>
                                    </div>
                                </label>
                            </div>
                        </div>
                        @error('type')<div style="color:#ef4444; font-size:.8rem; margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    <hr class="section-divider">

                    {{-- Logo Upload --}}
                    <div class="mb-4">
                        <label class="styled-label">Brand Logo</label>
                        <div class="logo-upload-area" id="uploadArea" onclick="document.getElementById('logoInput').click()">
                            <input type="file" name="logo" id="logoInput" accept="image/*">
                            <div id="uploadPlaceholder">
                                <i class="bi bi-cloud-arrow-up" style="font-size:2rem; color:#9ca3af; display:block; margin-bottom:8px;"></i>
                                <div class="fw-semibold" style="color:#374151; font-size:.9rem;">Click to upload logo</div>
                                <small class="text-muted">PNG, JPG, WebP — max 2MB</small>
                            </div>
                            <div id="uploadPreviewInline" style="display:none;">
                                <img id="inlinePreviewImg" src="" alt="" style="max-height:80px; border-radius:10px; border:1.5px solid #e9ecef;">
                                <div class="mt-2">
                                    <small class="text-muted" id="uploadedFileName"></small>
                                    <button type="button" onclick="event.stopPropagation(); clearLogo()" style="background:none;border:none;color:#ef4444;font-size:.8rem;padding:0;margin-left:8px;">
                                        <i class="bi bi-x-circle"></i> Remove
                                    </button>
                                </div>
                            </div>
                        </div>
                        @error('logo')<div style="color:#ef4444; font-size:.8rem; margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    <hr class="section-divider">

                    {{-- Sort Order + Active --}}
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label class="styled-label">Sort Order</label>
                            <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}"
                                class="styled-input @error('sort_order') is-invalid @enderror" min="0">
                            <small class="text-muted" style="font-size:.78rem;">Lower = shown first</small>
                        </div>
                        <div class="col-sm-6 d-flex align-items-center">
                            <div class="p-3 rounded-3 w-100 d-flex align-items-center justify-content-between"
                                style="background:#f8fafc; border:1.5px solid #e5e7eb;">
                                <div>
                                    <div class="fw-semibold" style="font-size:.9rem; color:#374151;">Status</div>
                                    <small class="text-muted">Visible to users</small>
                                </div>
                                <label class="toggle-switch mb-0">
                                    <input type="checkbox" name="is_active" value="1"
                                        id="isActive" {{ old('is_active','1') ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Description --}}
                    <div class="mb-4">
                        <label class="styled-label">Description <span class="text-muted fw-normal">(optional)</span></label>
                        <textarea name="description" rows="3"
                            class="styled-input @error('description') is-invalid @enderror"
                            placeholder="Short description about this brand...">{{ old('description') }}</textarea>
                    </div>

                    {{-- Buttons --}}
                    <div class="row g-2 mt-2">
                        <div class="col-8">
                            <button type="submit" class="submit-btn">
                                <i class="bi bi-check-lg me-2"></i>Save Brand
                            </button>
                        </div>
                        <div class="col-4">
                            <a href="{{ route('admin.car-brands.index') }}" class="cancel-btn text-decoration-none text-center d-block">
                                Cancel
                            </a>
                        </div>
                    </div>

                </div>
            </div>

            {{-- RIGHT: Live Preview --}}
            <div class="col-lg-5">
                <div class="preview-card card p-4">
                    <div class="fw-bold mb-3" style="font-size:.85rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;">
                        <i class="bi bi-eye me-1"></i> Live Preview
                    </div>

                    <div style="border:1.5px solid #e9ecef; border-radius:14px; padding:20px; background:#fafafa;">
                        {{-- Logo Preview --}}
                        <div class="preview-logo-wrap" id="previewLogoWrap">
                            <img id="previewLogoImg" src="" alt="" style="display:none; width:100%; height:100%; object-fit:cover;">
                            <i class="bi bi-car-front" id="previewLogoIcon" style="font-size:2.5rem; color:#d1d5db;"></i>
                        </div>

                        {{-- Name --}}
                        <div class="text-center mb-3">
                            <div id="previewName" class="fw-bold" style="font-size:1.1rem; color:#1e293b;">Brand Name</div>
                            <div id="previewSlug" style="font-size:.78rem; color:#94a3b8; font-family:monospace;">brand-name</div>
                        </div>

                        {{-- Badges --}}
                        <div class="d-flex justify-content-center gap-2 flex-wrap">
                            <span id="previewType" style="background:#dbeafe; color:#1e40af; font-size:.78rem; font-weight:600; padding:4px 12px; border-radius:20px;">
                                <i class="bi bi-star-fill me-1" style="font-size:.65rem;"></i>Popular
                            </span>
                            <span id="previewStatus" style="background:#dcfce7; color:#15803d; font-size:.78rem; font-weight:600; padding:4px 12px; border-radius:20px;">
                                <i class="bi bi-circle-fill me-1" style="font-size:.45rem;"></i>Active
                            </span>
                        </div>

                        @if(false){{-- spacer --}}@endif
                        <div class="mt-3 pt-3" style="border-top:1px solid #e9ecef;">
                            <div id="previewDesc" class="text-muted text-center" style="font-size:.82rem; font-style:italic;">
                                No description added
                            </div>
                        </div>
                    </div>

                    {{-- Tips --}}
                    <div class="mt-4">
                        <div class="fw-semibold mb-2" style="font-size:.82rem; color:#374151;">
                            <i class="bi bi-lightbulb me-1 text-warning"></i> Tips
                        </div>
                        <ul style="font-size:.8rem; color:#64748b; padding-left:16px; line-height:1.8;">
                            <li>Use a square logo (1:1 ratio) for best results</li>
                            <li>PNG with transparent background looks best</li>
                            <li>Sort order 0 appears first in listings</li>
                            <li>Inactive brands are hidden from customers</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>

<script>
// Live preview updates
const nameInput = document.getElementById('brandName');
const logoInput = document.getElementById('logoInput');

function slugify(str) {
    return str.toLowerCase().replace(/[^a-z0-9\s-]/g,'').replace(/\s+/g,'-').replace(/-+/g,'-').trim();
}

nameInput.addEventListener('input', function() {
    const val = this.value || 'Brand Name';
    document.getElementById('previewName').textContent = val;
    document.getElementById('previewSlug').textContent = val ? slugify(val) : 'brand-name';
});

// Type radio preview
document.querySelectorAll('input[name=type]').forEach(radio => {
    radio.addEventListener('change', function() {
        const el = document.getElementById('previewType');
        if (this.value === 'luxury') {
            el.style.background = '#fef3cd'; el.style.color = '#92400e';
            el.innerHTML = '<i class="bi bi-gem me-1" style="font-size:.65rem;"></i>Luxury';
        } else {
            el.style.background = '#dbeafe'; el.style.color = '#1e40af';
            el.innerHTML = '<i class="bi bi-star-fill me-1" style="font-size:.65rem;"></i>Popular';
        }
    });
});

// Active toggle preview
document.getElementById('isActive').addEventListener('change', function() {
    const el = document.getElementById('previewStatus');
    if (this.checked) {
        el.style.background = '#dcfce7'; el.style.color = '#15803d';
        el.innerHTML = '<i class="bi bi-circle-fill me-1" style="font-size:.45rem;"></i>Active';
    } else {
        el.style.background = '#f1f5f9'; el.style.color = '#64748b';
        el.innerHTML = '<i class="bi bi-circle-fill me-1" style="font-size:.45rem;"></i>Inactive';
    }
});

// Description preview
document.querySelector('textarea[name=description]').addEventListener('input', function() {
    document.getElementById('previewDesc').textContent = this.value || 'No description added';
});

// Logo upload preview
logoInput.addEventListener('change', function() {
    if (this.files && this.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            // Side preview
            const img = document.getElementById('previewLogoImg');
            const icon = document.getElementById('previewLogoIcon');
            img.src = e.target.result;
            img.style.display = 'block';
            icon.style.display = 'none';
            // Inline preview
            document.getElementById('inlinePreviewImg').src = e.target.result;
            document.getElementById('uploadedFileName').textContent = this.files[0].name;
            document.getElementById('uploadPlaceholder').style.display = 'none';
            document.getElementById('uploadPreviewInline').style.display = 'block';
        };
        reader.readAsDataURL(this.files[0]);
    }
});

function clearLogo() {
    logoInput.value = '';
    document.getElementById('previewLogoImg').style.display = 'none';
    document.getElementById('previewLogoIcon').style.display = '';
    document.getElementById('uploadPlaceholder').style.display = '';
    document.getElementById('uploadPreviewInline').style.display = 'none';
}

// Drag-and-drop
const uploadArea = document.getElementById('uploadArea');
uploadArea.addEventListener('dragover', e => { e.preventDefault(); uploadArea.classList.add('dragover'); });
uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
uploadArea.addEventListener('drop', e => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    const files = e.dataTransfer.files;
    if (files.length) {
        logoInput.files = files;
        logoInput.dispatchEvent(new Event('change'));
    }
});
</script>
@endsection