@php
    $logoPath = $firm->logo_url;
    $logoSrc = null;
    if ($logoPath) {
        $logoSrc = preg_match('/^https?:\/\//i', $logoPath)
            ? $logoPath
            : asset('storage/' . ltrim($logoPath, '/'));
    }
@endphp

<section class="content" style="width: 100%">
    <div class="container-fluid">
        <div class="card card-light">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 col-lg-12 mb-4">
                        <h6 class="text-muted text-uppercase mb-3">Logo</h6>
                        <div id="firmLogoPreview" class="mb-3">
                            @if ($logoSrc)
                                <div class="border rounded p-3 bg-light text-center" style="min-height: 120px;">
                                    <img id="firmLogoImage" src="{{ $logoSrc }}" alt="{{ $firm->name }} logo" class="img-fluid" style="max-height: 120px; object-fit: contain;">
                                </div>
                            @else
                                <p id="firmLogoEmpty" class="text-muted mb-0">No logo uploaded yet.</p>
                            @endif
                        </div>
                        <form method="POST" id="updateFirmLogo" action="{{ route('firms.updateLogo', $firm->id) }}" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="logo">Upload logo</label>
                                <input type="file"
                                    class="form-control-file"
                                    name="logo"
                                    id="logo"
                                    accept=".jpg,.jpeg,.png,.svg,.webp,image/jpeg,image/png,image/svg+xml,image/webp">
                                <small class="form-text text-muted">Allowed formats: JPG, JPEG, PNG, SVG, WEBP. Maximum size: 5 MB.</small>
                                <span class="invalid-feedback logo d-block" style="display: none;"><span></span></span>
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm">Save logo</button>
                        </form>
                    </div>
                    <div class="col-md-6 col-lg-8">
                        <div class="row">
                            <div class="col-sm-6 mb-4">
                                <h6 class="text-muted text-uppercase mb-2">Primary color</h6>
                                @if ($firm->all_colors && isset($firm->all_colors['primary']))
                                    <div class="d-flex align-items-center">
                                        <span class="d-inline-block border rounded mr-2" style="width: 36px; height: 36px; background-color: {{ $firm->all_colors['primary'] }};"></span>
                                        <span class="font-monospace">{{ $firm->all_colors['primary'] }}</span>
                                    </div>
                                @else
                                    <p class="text-muted mb-0">—</p>
                                @endif
                            </div>

                            <div class="col-sm-6 mb-4">
                                <h6 class="text-muted text-uppercase mb-2">Secondary color</h6>
                                @if ($firm->all_colors && isset($firm->all_colors['secondary']))
                                    <div class="d-flex align-items-center">
                                        <span class="d-inline-block border rounded mr-2" style="width: 36px; height: 36px; background-color: {{ $firm->all_colors['secondary'] }};"></span>
                                        <span class="font-monospace">{{ $firm->all_colors['secondary'] }}</span>
                                    </div>
                                @else
                                    <p class="text-muted mb-0">—</p>
                                @endif
                            </div>



                            <div class="col-sm-6 mb-4">
                                <h6 class="text-muted text-uppercase mb-2">Background color</h6>
                                @if ($firm->all_colors && isset($firm->all_colors['background']))
                                    <div class="d-flex align-items-center">
                                        <span class="d-inline-block border rounded mr-2" style="width: 36px; height: 36px; background-color: {{ $firm->all_colors['background'] }};"></span>
                                        <span class="font-monospace">{{ $firm->all_colors['background'] }}</span>
                                    </div>
                                @else
                                    <p class="text-muted mb-0">—</p>
                                @endif
                            </div>

                            <div class="col-sm-6 mb-4">
                                <h6 class="text-muted text-uppercase mb-2">TextPrimary color</h6>
                                @if ($firm->all_colors && isset($firm->all_colors['textPrimary']))
                                    <div class="d-flex align-items-center">
                                        <span class="d-inline-block border rounded mr-2" style="width: 36px; height: 36px; background-color: {{ $firm->all_colors['textPrimary'] }};"></span>
                                        <span class="font-monospace">{{ $firm->all_colors['textPrimary'] }}</span>
                                    </div>
                                @else
                                    <p class="text-muted mb-0">—</p>
                                @endif
                            </div>

                            <div class="col-sm-6 mb-4">
                                <h6 class="text-muted text-uppercase mb-2">Accent color</h6>
                                @if ($firm->all_colors && isset($firm->all_colors['accent']))
                                    <div class="d-flex align-items-center">
                                        <span class="d-inline-block border rounded mr-2" style="width: 36px; height: 36px; background-color: {{ $firm->all_colors['accent'] }};"></span>
                                        <span class="font-monospace">{{ $firm->all_colors['accent'] }}</span>
                                    </div>
                                @else
                                    <p class="text-muted mb-0">—</p>
                                @endif
                            </div>

                            <div class="col-sm-6 mb-4">
                                <h6 class="text-muted text-uppercase mb-2">Link color</h6>
                                @if ($firm->all_colors && isset($firm->all_colors['link']))
                                    <div class="d-flex align-items-center">
                                        <span class="d-inline-block border rounded mr-2" style="width: 36px; height: 36px; background-color: {{ $firm->all_colors['link'] }};"></span>
                                        <span class="font-monospace">{{ $firm->all_colors['link'] }}</span>
                                    </div>
                                @else
                                    <p class="text-muted mb-0">—</p>
                                @endif
                            </div>

                            <div class="col-sm-6 mb-4">
                                <h6 class="text-muted text-uppercase mb-2">Font family</h6>
                                @if ($firm->primary_font_family)
                                    <p class="mb-0" style="font-family: {{ $firm->primary_font_family }}, sans-serif;">{{ $firm->primary_font_family }}</p>
                                @else
                                    <p class="text-muted mb-0">—</p>
                                @endif
                            </div>
                        </div>

                        {{-- @if ($firm->branding_extracted_at || $firm->branding_extraction_failed_at)
                            <hr>
                            <div class="small text-muted">
                                @if ($firm->branding_extracted_at)
                                    <div>Last extracted: {{ \Carbon\Carbon::parse($firm->branding_extracted_at)->format('d M, Y H:i') }}</div>
                                @endif
                                @if ($firm->branding_extraction_failed_at)
                                    <div class="text-danger mt-1">
                                        Last extraction failed: {{ \Carbon\Carbon::parse($firm->branding_extraction_failed_at)->format('d M, Y H:i') }}
                                        @if ($firm->branding_extraction_error)
                                            — {{ $firm->branding_extraction_error }}
                                        @endif
                                    </div>
                                @endif
                            </div>
                        @endif --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>