@extends('layouts.admin')

@section('title', 'Branding')
@section('page_title', 'Logo & Favicon')

@section('content')
<div class="row mb-3">
    <div class="col-md-12 text-end">
        <a href="{{ route('admin.settings.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to Settings
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0"><i class="bi bi-image"></i> Logo & Favicon</h5>
                <small class="text-muted">Files are stored in <code>public/uploads/logo/</code></small>
            </div>
            <div class="card-body">

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle"></i> {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form action="{{ route('admin.settings.branding.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    {{-- LOGO --}}
                    <div class="mb-5">
                        <h6 class="border-bottom pb-2 mb-3">Store Logo</h6>

                        @if($settings->logo)
                            <div class="mb-3">
                                <p class="form-label text-muted mb-1">Current Logo</p>
                                <div class="p-3 border rounded bg-light d-inline-block">
                                    <img src="{{ asset($settings->logo) }}" alt="Logo" style="max-height: 80px; max-width: 300px; object-fit: contain;">
                                </div>
                                <p class="small text-muted mt-1">{{ $settings->logo }}</p>
                            </div>
                        @else
                            <div class="alert alert-secondary py-2">
                                <i class="bi bi-info-circle"></i> No logo uploaded yet.
                            </div>
                        @endif

                        <div class="mb-3">
                            <label for="logo" class="form-label">Upload New Logo</label>
                            <input type="file" class="form-control @error('logo') is-invalid @enderror" id="logo" name="logo"
                                   accept="image/jpeg,image/png,image/gif,image/svg+xml,image/webp">
                            <div class="form-text">Accepted: JPG, PNG, GIF, SVG, WEBP — max 2 MB. Recommended: transparent PNG, min 200×60 px.</div>
                            @error('logo')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Live preview --}}
                        <div id="logoPreviewWrap" class="d-none mb-3">
                            <p class="form-label text-muted mb-1">Preview</p>
                            <div class="p-3 border rounded bg-light d-inline-block">
                                <img id="logoPreview" src="#" alt="Logo preview" style="max-height: 80px; max-width: 300px; object-fit: contain;">
                            </div>
                        </div>
                    </div>

                    {{-- FAVICON --}}
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2 mb-3">Favicon</h6>

                        @if($settings->favicon)
                            <div class="mb-3">
                                <p class="form-label text-muted mb-1">Current Favicon</p>
                                <div class="p-3 border rounded bg-light d-inline-block">
                                    <img src="{{ asset($settings->favicon) }}" alt="Favicon" style="width:32px; height:32px; object-fit:contain; image-rendering:pixelated;">
                                </div>
                                <p class="small text-muted mt-1">{{ $settings->favicon }}</p>
                            </div>
                        @else
                            <div class="alert alert-secondary py-2">
                                <i class="bi bi-info-circle"></i> No favicon uploaded yet.
                            </div>
                        @endif

                        <div class="mb-3">
                            <label for="favicon" class="form-label">Upload New Favicon</label>
                            <input type="file" class="form-control @error('favicon') is-invalid @enderror" id="favicon" name="favicon"
                                   accept=".ico,image/png,image/jpeg,image/gif">
                            <div class="form-text">Accepted: ICO, PNG, JPG, GIF — max 512 KB. Recommended: 32×32 or 64×64 px PNG/ICO.</div>
                            @error('favicon')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Live preview --}}
                        <div id="faviconPreviewWrap" class="d-none mb-3">
                            <p class="form-label text-muted mb-1">Preview</p>
                            <div class="p-2 border rounded bg-light d-inline-block">
                                <img id="faviconPreview" src="#" alt="Favicon preview" style="width:32px; height:32px; object-fit:contain; image-rendering:pixelated;">
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-cloud-upload"></i> Save Branding
                        </button>
                        <a href="{{ route('admin.settings.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('extra_js')
<script>
    function previewImage(inputId, previewId, wrapId) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);
        const wrap = document.getElementById(wrapId);
        input.addEventListener('change', function () {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = e => {
                    preview.src = e.target.result;
                    wrap.classList.remove('d-none');
                };
                reader.readAsDataURL(this.files[0]);
            }
        });
    }
    previewImage('logo', 'logoPreview', 'logoPreviewWrap');
    previewImage('favicon', 'faviconPreview', 'faviconPreviewWrap');
</script>
@endsection