@section('title', 'Edit Basic Data')

<div>
    <div class="card">
        <div class="card-header">
            <h5>Brand Details & Categorization</h5>
        </div>
        <div class="card-body">
            @if (session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
            @endif

            <form wire:submit.prevent="save">
                <!-- Categorization Section -->
                <h6 class="text-primary mb-3">Categorization Tree</h6>
                <div class="row mb-4 p-3 bg-light rounded border">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Category <span class="text-danger">*</span></label>
                        <select class="form-select" wire:model.live="category_id">
                            <option value="">Select Category</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->brands_category_id }}">{{ $cat->category_name_en }}</option>
                            @endforeach
                        </select>
                        @error('category_id') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Sub Category</label>
                        <select class="form-select" wire:model.live="sub_category_id" @if(empty($subCategories)) disabled @endif>
                            <option value="">Select Sub Category</option>
                            @foreach($subCategories as $sub)
                                <option value="{{ $sub->brands_sub_category_id }}">{{ $sub->sub_category_name_en }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Sub-Sub Category</label>
                        <select class="form-select" wire:model="sub_sub_category_id" @if(empty($subSubCategories)) disabled @endif>
                            <option value="">Select Sub-Sub Category</option>
                            @foreach($subSubCategories as $subsub)
                                <option value="{{ $subsub->brands_sub_sub_category_id }}">{{ $subsub->sub_sub_category_name_en }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Basic Data Section -->
                 <h6 class="text-primary mb-3">Basic Information</h6>
                <div class="row">
                    <!-- English Name -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Brand Name (English)</label>
                        <input type="text" class="form-control" wire:model="brand_name_en">
                        @error('brand_name_en') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <!-- Arabic Name -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Brand Name (Arabic)</label>
                        <input type="text" class="form-control" wire:model="brand_name_ar">
                        @error('brand_name_ar') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <!-- Email -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" wire:model="e_mail">
                        @error('e_mail') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <!-- Mobile -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Mobile Number</label>
                        <input type="text" class="form-control" wire:model="brand_mobile_number">
                        @error('brand_mobile_number') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <!-- Description EN -->
                    <div class="col-12 mb-3">
                        <label class="form-label">Description (English)</label>
                        <textarea class="form-control" rows="3" wire:model="description_en"></textarea>
                        @error('description_en') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <!-- Description AR -->
                    <div class="col-12 mb-3">
                        <label class="form-label">Description (Arabic)</label>
                        <textarea class="form-control" rows="3" wire:model="description_ar"></textarea>
                        @error('description_ar') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <!-- Logo Upload -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Brand Logo</label>
                        <div class="mb-2">
                            @if ($new_brand_logo)
                                <img src="{{ $new_brand_logo->temporaryUrl() }}" width="100" class="img-thumbnail" alt="Preview">
                            @else
                                <img src="{{ $safeLogo }}" width="100" class="img-thumbnail" alt="Current Logo" onerror="this.onerror=null;this.src='{{ asset('build/images/logo-dark.svg') }}';">
                            @endif
                        </div>
                        <input type="file" class="form-control" wire:model="new_brand_logo">
                        <div wire:loading wire:target="new_brand_logo">Uploading...</div>
                        @error('new_brand_logo') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <!-- Banner Upload -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Banner Image</label>
                        <div class="mb-2">
                            @if ($new_banner_image)
                                <img src="{{ $new_banner_image->temporaryUrl() }}" width="200" height="80" class="img-thumbnail" style="object-fit:cover" alt="Preview">
                            @elseif($safeBanner)
                                <img src="{{ $safeBanner }}" width="200" height="80" class="img-thumbnail" style="object-fit:cover" alt="Current Banner" onerror="this.onerror=null;this.parentElement.innerHTML='<div class=\'d-flex align-items-center justify-content-center bg-light border rounded text-muted\' style=\'width: 200px; height: 80px;\'><small>No Banner</small></div>';">
                            @else
                                <div class="d-flex align-items-center justify-content-center bg-light border rounded text-muted" style="width: 200px; height: 80px;">
                                    <small>No Banner</small>
                                </div>
                            @endif
                        </div>
                        <input type="file" class="form-control" wire:model="new_banner_image">
                        <div wire:loading wire:target="new_banner_image">Uploading...</div>
                        @error('new_banner_image') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="mt-3">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                    <a href="{{ route('data-entry.dashboard', $brandId) }}" class="btn btn-secondary">Back to Dashboard</a>
                </div>
            </form>
        </div>
    </div>
</div>