@extends('layouts.app')

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

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

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

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

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

    .division-header {
        display: flex;
        align-items: start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .division-logo {
        width: 64px;
        height: 64px;
        border-radius: 8px;
        object-fit: cover;
        background: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .division-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

    .division-info h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .division-info p {
        font-size: 0.875rem;
        color: var(--gray-600);
        line-height: 1.5;
        margin: 0;
    }

    .division-stats {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--gray-200);
    }

    .stat-item {
        flex: 1;
        text-align: center;
    }

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

    .stat-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        text-transform: uppercase;
    }

    .division-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;
        text-decoration: none;
        display: inline-block;
    }

    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .badge-success {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
    }

    .badge-secondary {
        background: var(--gray-100);
        color: var(--gray-600);
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--gray-500);
    }

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

@section('content')
<div class="page-header">
    <h1 style="font-size: 2rem; font-weight: 700; color: var(--gray-900);">
        Manage Divisions
    </h1>
    <a href="{{ route('admin.divisions.create') }}" class="btn btn-primary">
        <svg style="width: 16px; height: 16px; display: inline; margin-right: 0.5rem; vertical-align: middle;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        New Division
    </a>
</div>

@if($divisions->count() > 0)
    <div class="divisions-grid">
        @foreach($divisions as $division)
            <div class="division-card">
                <div class="division-header">
                    <div class="division-logo">
                        @if($division->logo_path)
                            <img src="{{ asset('storage/' . $division->logo_path) }}" alt="{{ $division->name }}">
                        @else
                            <svg style="width: 32px; height: 32px; color: var(--gray-400);" 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>
                        @endif
                    </div>
                    <div class="division-info" style="flex: 1;">
                        <h3>{{ $division->name }}</h3>
                        <p>{{ Str::limit($division->description, 80) }}</p>
                    </div>
                </div>

                <div class="division-stats">
                    <div class="stat-item">
                        <div class="stat-value">{{ $division->files_count }}</div>
                        <div class="stat-label">Files</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">
                            @if($division->is_active)
                                <span class="badge badge-success">Active</span>
                            @else
                                <span class="badge badge-secondary">Inactive</span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="division-actions">
                    <a href="{{ route('admin.divisions.edit', $division) }}" class="btn-sm btn-secondary">
                        Edit
                    </a>
                    <form method="POST" action="{{ route('admin.divisions.destroy', $division) }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this division? All associated files will be deleted.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn-sm" style="background: var(--error); color: white;">
                            Delete
                        </button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="card">
        <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="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 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-700);">No divisions yet</h3>
            <p style="margin-bottom: 1.5rem;">Create your first division to get started.</p>
            <a href="{{ route('admin.divisions.create') }}" class="btn btn-primary">
                Create Division
            </a>
        </div>
    </div>
@endif
@endsection