@extends('layouts.app')

@section('title', 'Manage Logos')

@section('nav-items')
    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li><a href="{{ route('admin.users.index') }}">Users</a></li>
    <li><a href="{{ route('admin.divisions.index') }}">Divisions</a></li>
    <li><a href="{{ route('admin.logos.index') }}" style="color: var(--primary);">Logos</a></li>
    <li><a href="{{ route('admin.company-profiles.index') }}">Company Profile</a></li>
    <li><a href="{{ route('admin.customer-download-requests.index') }}">Download Requests</a></li>
    <li><a href="{{ route('admin.marketing-requests.index') }}">Marketing Requests</a></li>
    <li><a href="{{ route('admin.media.index') }}">Media</a></li>
@endsection

@section('styles')
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    .upload-section {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
        border: 1px solid var(--gray-200);
    }

    .upload-section h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--gray-900);
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(227, 27, 35, 0.1);
    }

    .form-group textarea {
        min-height: 100px;
        resize: vertical;
    }

    .form-group .help-text {
        font-size: 0.75rem;
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    .error-message {
        color: var(--error);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .format-section {
        margin-bottom: 3rem;
    }

    .format-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid var(--gray-200);
    }

    .format-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-900);
        text-transform: uppercase;
    }

    .format-count {
        color: var(--gray-500);
        font-size: 0.875rem;
    }

    .logos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .logo-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid var(--gray-200);
        transition: all 0.2s;
    }

    .logo-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: var(--primary);
    }

    .logo-preview {
        width: 100%;
        height: 150px;
        background: var(--gray-100);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        border: 1px solid var(--gray-200);
        overflow: hidden;
    }

    .logo-preview img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    .logo-name {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.5rem;
    }

    .logo-meta {
        font-size: 0.875rem;
        color: var(--gray-500);
        margin-bottom: 1rem;
    }

    .logo-actions {
        display: flex;
        gap: 0.5rem;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-danger {
        background: var(--error);
        color: white;
    }

    .btn-danger:hover {
        background: #b91c1c;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        color: var(--gray-500);
        background: var(--gray-50);
        border-radius: 8px;
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <h1 style="font-size: 2rem; font-weight: 700; color: var(--gray-900);">
        Manage Logos
    </h1>
</div>

<!-- Upload New Logo -->
<div class="upload-section">
    <h2>Upload New Logo</h2>
    <form method="POST" action="{{ route('admin.logos.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="form-grid">
            <div class="form-group">
                <label for="name">Logo Name *</label>
                <input type="text" id="name" name="name" required placeholder="e.g., Samir Logo Primary">
                @error('name')
                    <div class="error-message">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="format">Format *</label>
                <select id="format" name="format" required>
                    <option value="">Select format...</option>
                    <option value="png">PNG</option>
                    <option value="jpg">JPG</option>
                    <option value="svg">SVG</option>
                    <option value="vector">Vector</option>
                    <option value="ai">AI (Adobe Illustrator)</option>
                    <option value="eps">EPS</option>
                </select>
                @error('format')
                    <div class="error-message">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group full-width">
                <label for="description">Description</label>
                <textarea id="description" name="description" placeholder="Optional description of the logo..."></textarea>
                @error('description')
                    <div class="error-message">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group full-width">
                <label for="file">Logo File *</label>
                <input type="file" id="file" name="file" required accept="image/*,.ai,.eps,.svg">
                <div class="help-text">Max file size: 5MB. Supported formats: PNG, JPG, SVG, AI, EPS</div>
                @error('file')
                    <div class="error-message">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <button type="submit" class="btn btn-primary">
            Upload Logo
        </button>
    </form>
</div>

<!-- Existing Logos by Format -->
@if($logos->count() > 0)
    @foreach($logos as $format => $formatLogos)
        <div class="format-section">
            <div class="format-header">
                <h2 class="format-title">{{ strtoupper($format) }} Format</h2>
                <span class="format-count">{{ $formatLogos->count() }} {{ Str::plural('logo', $formatLogos->count()) }}</span>
            </div>

            <div class="logos-grid">
                @foreach($formatLogos as $logo)
                    <div class="logo-card">
                        <div class="logo-preview">
                            @if($logo->file_path)
                                <img src="{{ asset('storage/' . $logo->file_path) }}" alt="{{ $logo->name }}">
                            @else
                                <svg style="width: 48px; height: 48px; color: var(--gray-400);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
                                </svg>
                            @endif
                        </div>
                        <div class="logo-name">{{ $logo->name }}</div>
                        <div class="logo-meta">
                            @if($logo->size)
                                {{ number_format($logo->size / 1024, 1) }} KB
                            @endif
                            <span style="margin-left: 0.5rem; padding: 0.25rem 0.5rem; background: rgba(227, 27, 35, 0.1); color: var(--primary); border-radius: 4px; font-size: 0.75rem; font-weight: 600;">
                                {{ strtoupper($logo->format) }}
                            </span>
                        </div>
                        @if($logo->description)
                            <p style="font-size: 0.875rem; color: var(--gray-600); margin-bottom: 1rem;">{{ $logo->description }}</p>
                        @endif
                        <div class="logo-actions">
                            <form method="POST" action="{{ route('admin.logos.destroy', $logo) }}" style="flex: 1;" onsubmit="return confirm('Are you sure you want to delete this logo?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-sm btn-danger" style="width: 100%;">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
@else
    <div class="empty-state">
        <svg style="width: 64px; height: 64px; margin: 0 auto 1rem; color: var(--gray-400);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
        </svg>
        <p>No logos uploaded yet. Upload your first logo above.</p>
    </div>
@endif
@endsection