@extends('layouts.app')

@section('title', 'Samir Portal')

@section('nav-items')
    <li><a href="{{ route('customer.divisions.index') }}">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>
    .welcome-card {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: white;
        border-radius: 16px;
        padding: 3rem 2rem;
        margin-bottom: 2rem;
        text-align: center;
    }

    .welcome-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .welcome-subtitle {
        font-size: 1.125rem;
        opacity: 0.9;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .feature-card {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        border: 1px solid var(--gray-200);
        text-align: center;
        transition: all 0.3s;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: block;
    }

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

    .feature-icon {
        width: 64px;
        height: 64px;
        background: rgba(227, 27, 35, 0.1);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }

    .feature-icon svg {
        width: 32px;
        height: 32px;
        color: var(--primary);
    }

    .feature-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .feature-desc {
        color: var(--gray-600);
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .quick-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .stat-box {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        text-align: center;
        border: 1px solid var(--gray-200);
    }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary);
    }

    .stat-label {
        color: var(--gray-600);
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }

    @media (max-width: 768px) {
        .quick-stats {
            grid-template-columns: 1fr;
        }
        .features-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<!-- Welcome Banner -->
<div class="welcome-card">
    <div class="welcome-title">Welcome to Samir Portal</div>
    <div class="welcome-subtitle">Access branding materials, logos, and company resources</div>
</div>

<!-- Quick Stats -->
<div class="quick-stats" style="margin-bottom: 3rem;">
    <div class="stat-box">
        <div class="stat-number">{{ $stats['divisions'] }}</div>
        <div class="stat-label">Available Divisions</div>
    </div>
    <div class="stat-box">
        <div class="stat-number">{{ $stats['logos'] }}</div>
        <div class="stat-label">Logo Formats</div>
    </div>
    <div class="stat-box">
        <div class="stat-number">
            @if($stats['company_profile'])
                <svg style="width: 40px; height: 40px; color: var(--success);" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
            @else
                <span style="color: var(--gray-400);">—</span>
            @endif
        </div>
        <div class="stat-label">Company Profile</div>
    </div>
</div>

<!-- Feature Cards -->
<div class="features-grid">
    <a href="{{ route('customer.divisions.index') }}" class="feature-card">
        <div class="feature-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
        </div>
        <div class="feature-title">Divisions</div>
        <div class="feature-desc">
            Browse our business divisions and download brochures, catalogs, and case studies
        </div>
    </a>

    <a href="{{ route('customer.logos.index') }}" class="feature-card">
        <div class="feature-icon">
            <svg 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>
        </div>
        <div class="feature-title">Logos</div>
        <div class="feature-desc">
            Download Samir logos in various formats including PNG, JPG, SVG, and vector files
        </div>
    </a>

    <a href="{{ route('customer.company-profile.index') }}" class="feature-card">
        <div class="feature-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
            </svg>
        </div>
        <div class="feature-title">Company Profile</div>
        <div class="feature-desc">
            Access the latest company profile document and corporate information
        </div>
    </a>
</div>

<!-- Info Card -->
<div class="card" style="background: rgba(227, 27, 35, 0.05); border-color: rgba(227, 27, 35, 0.2);">
    <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--gray-900);">
        🔐 Secure Download Process
    </h3>
    <p style="color: var(--gray-700); line-height: 1.6; margin: 0;">
        To download any branding materials, please submit a download request with your contact information. 
        Once approved by our administrator, you will receive a 6-digit OTP code via email. 
        Use this code to verify and download the files. The OTP is valid for 15 minutes.
    </p>
</div>

<!-- Recent Divisions -->
@if($recentDivisions->count() > 0)
<div style="margin-top: 3rem;">
    <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--gray-900);">
        Our Divisions
    </h2>
    <div class="features-grid">
        @foreach($recentDivisions as $division)
            <a href="{{ route('customer.divisions.show', $division) }}" class="feature-card" style="text-align: left;">
                @if($division->logo_path)
                    <img src="{{ asset('storage/' . $division->logo_path) }}" alt="{{ $division->name }}" style="width: 48px; height: 48px; object-fit: contain; margin-bottom: 1rem;">
                @else
                    <div class="feature-icon" style="margin: 0 0 1rem 0;">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    </div>
                @endif
                <div class="feature-title">{{ $division->name }}</div>
                <div class="feature-desc">{{ Str::limit($division->description, 100) }}</div>
            </a>
        @endforeach
    </div>
</div>
@endif
@endsection