@extends('layouts.app')

@section('title', 'Logos')

@section('nav-items')
    <li><a href="{{ route('customer.divisions.index') }}">Divisions</a></li>
    <li><a href="{{ route('customer.logos.index') }}" style="color: var(--primary);">Logos</a></li>
    <li><a href="{{ route('customer.company-profile.index') }}">Company Profile</a></li>
@endsection

@section('styles')
<style>
    body {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    }

    .hero-section {
        text-align: center;
        padding: 4rem 0 3rem;
        margin-bottom: 3rem;
        position: relative;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 4px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
        border-radius: 2px;
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-700) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        color: var(--gray-600);
        font-weight: 400;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .logos-container {
        max-width: 1000px;
        margin: 0 auto;
    }

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

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

    .format-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, rgba(227, 27, 35, 0.1) 0%, rgba(227, 27, 35, 0.05) 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-weight: 700;
        font-size: 0.875rem;
        text-transform: uppercase;
    }

    .format-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--gray-900);
        letter-spacing: -0.01em;
    }

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

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

    .logo-item {
        background: white;
        border-radius: 16px;
        padding: 1.5rem;
        border: 1px solid var(--gray-200);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .logo-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary), rgba(227, 27, 35, 0.5));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .logo-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        border-color: var(--primary);
    }

    .logo-item:hover::before {
        transform: scaleX(1);
    }

    .logo-preview {
        width: 100%;
        height: 180px;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        border: 1px solid var(--gray-200);
        overflow: hidden;
        position: relative;
    }

    .logo-preview img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .logo-item:hover .logo-preview img {
        transform: scale(1.05);
    }

    .logo-info {
        text-align: center;
    }

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

    .logo-meta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        font-size: 0.875rem;
        color: var(--gray-500);
    }

    .logo-size {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .logo-format {
        padding: 0.25rem 0.75rem;
        background: rgba(227, 27, 35, 0.1);
        color: var(--primary);
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .request-button {
        width: 100%;
        margin-top: 1rem;
        padding: 0.75rem;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .request-button:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(227, 27, 35, 0.3);
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 24px;
        border: 2px dashed var(--gray-200);
    }

    .empty-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 1rem;
        color: var(--gray-300);
        opacity: 0.5;
    }

    .empty-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }

    .empty-text {
        color: var(--gray-500);
        font-size: 0.9375rem;
    }

    @media (max-width: 768px) {
        .hero-title {
            font-size: 2.5rem;
        }

        .hero-subtitle {
            font-size: 1.125rem;
        }

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

        .format-title {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 480px) {
        .hero-section {
            padding: 3rem 0 2rem;
        }

        .hero-title {
            font-size: 2rem;
        }

        .logos-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<div class="hero-section">
    <h1 class="hero-title">Samir Logos</h1>
    <p class="hero-subtitle">Download our logos in various formats for your branding needs</p>
</div>

<div class="logos-container">
    @if($logos->count() > 0)
        @foreach($logos as $format => $formatLogos)
            <div class="format-section">
                <div class="format-header">
                    <div class="format-icon">{{ strtoupper($format) }}</div>
                    <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-item">
                            <div class="logo-preview">
                                @if($logo->file_path)
                                    <img src="{{ asset('storage/' . $logo->file_path) }}" alt="{{ $logo->name }}">
                                @else
                                    <svg style="width: 64px; height: 64px; color: var(--gray-300);" 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-info">
                                <div class="logo-name">{{ $logo->name }}</div>
                                <div class="logo-meta">
                                    @if($logo->size)
                                        <span class="logo-size">
                                            <svg style="width: 14px; height: 14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
                                            </svg>
                                            {{ number_format($logo->size / 1024, 1) }} KB
                                        </span>
                                    @endif
                                    <span class="logo-format">{{ $logo->format }}</span>
                                </div>
                                @if($logo->description)
                                    <p style="font-size: 0.875rem; color: var(--gray-600); margin-top: 0.5rem; line-height: 1.5;">{{ $logo->description }}</p>
                                @endif
                                
                                <!-- Download Request Form -->
                                <form method="POST" action="{{ route('customer.download-request.store') }}" style="margin-top: 1rem;">
                                    @csrf
                                    <input type="hidden" name="resource_type" value="logo">
                                    <input type="hidden" name="resource_id" value="{{ $logo->id }}">
                                    <input type="hidden" name="name" value="" id="name_logo_{{ $logo->id }}">
                                    <input type="hidden" name="email" value="" id="email_logo_{{ $logo->id }}">
                                    <input type="hidden" name="company" value="" id="company_logo_{{ $logo->id }}">
                                    <input type="hidden" name="phone" value="" id="phone_logo_{{ $logo->id }}">
                                    
                                    <button type="button" onclick="openRequestModal('logo', {{ $logo->id }}, '{{ $logo->name }}')" class="request-button">
                                        Request Download
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    @else
        <div class="empty-state">
            <svg class="empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
            <h3 class="empty-title">No logos available</h3>
            <p class="empty-text">Check back later for available logo formats.</p>
        </div>
    @endif
</div>

<!-- Request Modal -->
<div id="requestModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; border-radius: 16px; padding: 2rem; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <h3 style="font-size: 1.5rem; font-weight: 700; color: var(--gray-900);">Request Download</h3>
            <button onclick="closeRequestModal()" style="background: none; border: none; font-size: 1.5rem; color: var(--gray-400); cursor: pointer;">&times;</button>
        </div>
        <p style="color: var(--gray-600); margin-bottom: 1.5rem;" id="modalResourceName"></p>
        <form method="POST" action="{{ route('customer.download-request.store') }}" id="requestForm">
            @csrf
            <input type="hidden" name="resource_type" id="modalResourceType">
            <input type="hidden" name="resource_id" id="modalResourceId">
            
            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--gray-700);">Full Name *</label>
                <input type="text" name="name" required style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 0.875rem;">
            </div>
            
            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--gray-700);">Email Address *</label>
                <input type="email" name="email" required style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 0.875rem;">
            </div>
            
            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--gray-700);">Company</label>
                <input type="text" name="company" style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 0.875rem;">
            </div>
            
            <div style="margin-bottom: 1.5rem;">
                <label style="display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--gray-700);">Phone</label>
                <input type="text" name="phone" style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 0.875rem;">
            </div>
            
            <div style="display: flex; gap: 1rem;">
                <button type="submit" class="btn btn-primary" style="flex: 1;">Submit Request</button>
                <button type="button" onclick="closeRequestModal()" class="btn btn-secondary" style="flex: 1;">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
function openRequestModal(resourceType, resourceId, resourceName) {
    document.getElementById('modalResourceType').value = resourceType;
    document.getElementById('modalResourceId').value = resourceId;
    document.getElementById('modalResourceName').textContent = 'Requesting download for: ' + resourceName;
    document.getElementById('requestModal').style.display = 'flex';
}

function closeRequestModal() {
    document.getElementById('requestModal').style.display = 'none';
    document.getElementById('requestForm').reset();
}

// Close modal on outside click
document.getElementById('requestModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeRequestModal();
    }
});
</script>
@endsection