@extends('admin.layout') 
@section('title', $brand->exists ? 'Edit Brand':'Add Brand') 
@section('heading', $brand->exists ? 'Edit Brand':'Add New Brand') 

@section('content')
<div class="card-custom p-4 w-100">
    <form method="POST" enctype="multipart/form-data" action="{{ $brand->exists ? route('admin.brands.update', $brand) : route('admin.brands.store') }}">
        @csrf 
        @if($brand->exists) 
            @method('PUT') 
        @endif

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="mb-3">
                    <label class="form-label" for="name">Brand Name *</label>
                    <input id="name" class="form-control" name="name" value="{{ old('name', $brand->name) }}" placeholder="e.g. FabIndia, Nalli Silk, Sabyasachi" required>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="description">Brand Overview / Description</label>
                    <textarea id="description" class="form-control" name="description" rows="4" placeholder="Brief details about the brand heritage, specialty weaves, or manufacturer background...">{{ old('description', $brand->description) }}</textarea>
                </div>
            </div>

            <!-- Brand Logo Upload Column -->
            <div class="col-lg-4">
                <div class="p-3 rounded-4" style="background: #FAF6F8; border: 1px dashed #E5D5DD;">
                    <h6 class="fw-bold mb-3" style="color: var(--text-dark);">Brand Logo Image</h6>
                    
                    <div class="mb-3 text-center">
                        <div id="logoPreviewContainer" class="d-flex flex-column align-items-center justify-content-center p-3 rounded-3 mb-2" style="min-height: 140px; background: #ffffff; border: 1px solid #EAE0E5;">
                            @if($brand->logo)
                                <img id="logoPreview" src="{{ asset($brand->logo) }}" class="rounded-3" style="max-height: 120px; max-width: 100%; object-fit: contain;">
                            @else
                                <img id="logoPreview" src="" class="rounded-3 d-none" style="max-height: 120px; max-width: 100%; object-fit: contain;">
                                <div id="logoPlaceholder" class="text-muted">
                                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ul-primary)" stroke-width="1.5" class="mb-2">
                                        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                                    </svg>
                                    <div class="small fw-medium">Upload Brand Logo</div>
                                    <div class="small text-muted">PNG, JPG, SVG</div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div>
                        <label class="form-label" for="logo">Choose Logo File</label>
                        <input id="logo" class="form-control" type="file" name="logo" accept="image/*">
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-4 pt-3 border-top d-flex align-items-center gap-3">
            <button type="submit" class="btn-brand-primary">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
                <span>{{ $brand->exists ? 'Save Changes' : 'Create Brand' }}</span>
            </button>
            <a class="btn btn-light px-4 py-2 text-muted rounded-3" href="{{ route('admin.brands.index') }}" style="border: 1px solid #E5DADF;">
                Cancel
            </a>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const logoInput = document.getElementById('logo');
        const logoPreview = document.getElementById('logoPreview');
        const logoPlaceholder = document.getElementById('logoPlaceholder');

        if (logoInput && logoPreview) {
            logoInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(evt) {
                        logoPreview.src = evt.target.result;
                        logoPreview.classList.remove('d-none');
                        if (logoPlaceholder) logoPlaceholder.classList.add('d-none');
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
    });
</script>
@endsection