@extends('layouts.app')

@section('title', 'Divisions')

@section('nav-items')
    <li><a href="{{ route('customer.divisions.index') }}" style="color: var(--primary);">Divisions</a></li>
    <li><a href="{{ route('customer.logos.index') }}">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;
    }

    .divisions-list {
        max-width: 900px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .division-item {
        background: white;
        border-radius: 16px;
        padding: 2rem;
        border: 1px solid var(--gray-200);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 2rem;
        position: relative;
        overflow: hidden;
    }

    .division-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--primary);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .division-item:hover::before {
        transform: scaleY(1);
    }

    .division-logo {
        width: 80px;
        height: 80px;
        border-radius: 12px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
        border: 1px solid var(--gray-200);
    }

    .division-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .division-logo svg {
        width: 40px;
        height: 40px;
        color: var(--gray-300);
        opacity: 0.6;
    }

    .division-content {
        flex: 1;
        min-width: 0;
    }

    .division-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
        gap: 1rem;
    }

    .division-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.3;
        letter-spacing: -0.01em;
        margin: 0;
    }

    .division-badge {
        background: rgba(227, 27, 35, 0.1);
        color: var(--primary);
        padding: 0.375rem 0.875rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .division-description {
        color: var(--gray-600);
        line-height: 1.7;
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }

    .division-footer {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .file-count {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--gray-500);
        font-size: 0.875rem;
    }

    .file-count-icon {
        width: 18px;
        height: 18px;
        color: var(--primary);
    }

    .view-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--primary);
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        margin-left: auto;
    }

    .view-button svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    .division-item:hover .view-button {
        gap: 0.75rem;
    }

    .division-item:hover .view-button svg {
        transform: translateX(4px);
    }

    .empty-state {
        text-align: center;
        padding: 6rem 2rem;
        background: white;
        border-radius: 24px;
        border: 2px dashed var(--gray-200);
        max-width: 500px;
        margin: 0 auto;
    }

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

    .empty-title {
        font-size: 1.5rem;
        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;
        }

        .division-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 1.5rem;
        }

        .division-logo {
            width: 60px;
            height: 60px;
        }

        .division-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .division-footer {
            width: 100%;
            justify-content: space-between;
        }

        .view-button {
            margin-left: 0;
        }
    }

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

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

        .division-name {
            font-size: 1.25rem;
        }
    }
</style>
@endsection

@section('content')
<div class="hero-section">
    <h1 class="hero-title">Our Divisions</h1>
    <p class="hero-subtitle">Discover our specialized business units and access exclusive branding materials tailored for each division</p>
</div>

@if($divisions->count() > 0)
    <div class="divisions-list">
        @foreach($divisions as $division)
            <a href="{{ route('customer.divisions.show', $division) }}" class="division-item">
                <div class="division-logo">
                    @if($division->logo_path)
                        <img src="{{ asset('storage/' . $division->logo_path) }}" alt="{{ $division->name }}">
                    @else
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                    @endif
                </div>
                <div class="division-content">
                    <div class="division-header">
                        <h2 class="division-name">{{ $division->name }}</h2>
                        <span class="division-badge">{{ $division->files_count }} {{ Str::plural('file', $division->files_count) }}</span>
                    </div>
                    @if($division->description)
                        <p class="division-description">{{ $division->description }}</p>
                    @endif
                    <div class="division-footer">
                        <div class="file-count">
                            <svg class="file-count-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            <span>{{ $division->files_count }} {{ Str::plural('file', $division->files_count) }} available</span>
                        </div>
                        <span class="view-button">
                            View Details
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </span>
                    </div>
                </div>
            </a>
        @endforeach
    </div>
@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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
        </svg>
        <h3 class="empty-title">No divisions available</h3>
        <p class="empty-text">Check back later for available divisions and resources.</p>
    </div>
@endif
@endsection