@extends('admin.layouts.app')

@section('title', 'নতুন ব্র্যান্ড')
@section('page-title', 'নতুন ব্র্যান্ড')

@section('content')

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <form action="{{ route('admin.brands.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                {{-- Basic Information --}}
                <div class="admin-form-card">
                    <h6><i class="bi bi-info-circle me-2"></i>মৌলিক তথ্য</h6>

                    <div class="mb-3">
                        <label for="name" class="form-label">নাম <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required oninput="this.form.slug.value = generateSlug(this.value)">
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="slug" class="form-label">স্লাগ</label>
                        <input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug') }}">
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="logo" class="form-label">লোগো</label>
                        <div class="admin-img-upload mb-2" onclick="document.getElementById('logo').click()">
                            <div class="placeholder" id="logo-placeholder">
                                <i class="bi bi-cloud-arrow-up"></i>
                                <span>লোগো আপলোড</span>
                            </div>
                            <img id="logo-preview" src="#" alt="Preview" style="display: none;">
                        </div>
                        <input type="file" class="form-control @error('logo') is-invalid @enderror" id="logo" name="logo" accept="image/*" style="display: none;" onchange="previewImage(this, 'logo-preview', 'logo-placeholder')">
                        @error('logo')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">বিবরণ</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="3">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- SEO Information --}}
                <div class="admin-form-card">
                    <h6><i class="bi bi-search me-2"></i>এসইও তথ্য</h6>

                    <div class="mb-3">
                        <label for="meta_title" class="form-label">মেটা টাইটেল</label>
                        <input type="text" class="form-control @error('meta_title') is-invalid @enderror" id="meta_title" name="meta_title" value="{{ old('meta_title') }}">
                        @error('meta_title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="meta_description" class="form-label">মেটা বিবরণ</label>
                        <textarea class="form-control @error('meta_description') is-invalid @enderror" id="meta_description" name="meta_description" rows="2">{{ old('meta_description') }}</textarea>
                        @error('meta_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- Settings --}}
                <div class="admin-form-card">
                    <h6><i class="bi bi-gear me-2"></i>সেটিংস</h6>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', '1') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">সক্রিয়</label>
                        </div>
                    </div>
                </div>

                {{-- Submit --}}
                <div class="d-flex justify-content-end gap-2 mb-4">
                    <a href="{{ route('admin.brands.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i>ফিরে যান
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>ব্র্যান্ড তৈরি করুন
                    </button>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    function generateSlug(text) {
        return text
            .toString()
            .trim()
            .toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\wঀ-৿\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '');
    }

    function previewImage(input, previewId, placeholderId) {
        const preview = document.getElementById(previewId);
        const placeholder = document.getElementById(placeholderId);
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
                placeholder.style.display = 'none';
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endpush