@extends('layouts.master')

@section('title', 'Processing Modules - ')

@section('content')
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .admin-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
        padding: 2rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content-wrapper {
        width: 100%;
        max-width: 1200px;
    }

    .admin-header {
        margin: 0 auto 3rem;
        text-align: center;
    }

    .admin-header h1 {
        font-size: 2.5rem;
        color: #1f2937;
        margin-bottom: 0.5rem;
        font-weight: bold;
    }

    .admin-header p {
        color: #6b7280;
        font-size: 1.125rem;
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin: 0 auto;
    }

    .service-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        text-decoration: none;
        display: block;
    }

    .service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px rgba(0,0,0,0.15);
    }

    .card-header {
        height: 8px;
    }

    .card-header.red { background: linear-gradient(90deg, #f43f5e, #e11d48); }
    .card-header.blue { background: linear-gradient(90deg, #3b82f6, #2563eb); }
    .card-header.green { background: linear-gradient(90deg, #22c55e, #16a34a); }
    .card-header.yellow { background: linear-gradient(90deg, #eab308, #ca8a04); }
    .card-header.purple { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
    .card-header.pink { background: linear-gradient(90deg, #ec4899, #db2777); }
    .card-header.orange { background: linear-gradient(90deg, #f97316, #ea580c); }

    .card-content {
        padding: 1.5rem;
    }

    .card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .icon-wrapper {
        padding: 0.75rem;
        border-radius: 8px;
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-wrapper.red-bg { background: linear-gradient(135deg, #f43f5e, #e11d48); }
    .icon-wrapper.blue-bg { background: linear-gradient(135deg, #3b82f6, #2563eb); }
    .icon-wrapper.green-bg { background: linear-gradient(135deg, #22c55e, #16a34a); }
    .icon-wrapper.yellow-bg { background: linear-gradient(135deg, #eab308, #ca8a04); }
    .icon-wrapper.purple-bg { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
    .icon-wrapper.pink-bg { background: linear-gradient(135deg, #ec4899, #db2777); }
    .icon-wrapper.orange-bg { background: linear-gradient(135deg, #f97316, #ea580c); }

    .service-card:hover .icon-wrapper {
        transform: scale(1.1);
    }

    .card-icon {
        font-size: 2rem;
        color: white;
    }

    .arrow-icon {
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
    }

    .arrow-icon.red-arrow { fill: #f43f5e; }
    .arrow-icon.blue-arrow { fill: #3b82f6; }
    .arrow-icon.green-arrow { fill: #22c55e; }
    .arrow-icon.yellow-arrow { fill: #eab308; }
    .arrow-icon.purple-arrow { fill: #8b5cf6; }
    .arrow-icon.pink-arrow { fill: #ec4899; }
    .arrow-icon.orange-arrow { fill: #f97316; }

    .service-card:hover .arrow-icon {
        transform: translateX(4px);
    }

    .card-title {
        font-size: 1.25rem;
        font-weight: bold;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }

    .card-description {
        color: #6b7280;
        line-height: 1.6;
        font-size: 0.95rem;
    }

    .learn-more {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .learn-more.red-text { color: #f43f5e; }
    .learn-more.blue-text { color: #3b82f6; }
    .learn-more.green-text { color: #22c55e; }
    .learn-more.yellow-text { color: #eab308; }
    .learn-more.purple-text { color: #8b5cf6; }
    .learn-more.pink-text { color: #ec4899; }
    .learn-more.orange-text { color: #f97316; }

    .service-card:hover .learn-more {
        opacity: 1;
    }

    .learn-more svg {
        width: 16px;
        height: 16px;
    }

    .card-footer {
        height: 4px;
        width: 0;
        transition: width 0.3s ease;
    }

    .card-footer.red-footer { background: linear-gradient(90deg, #f43f5e, #e11d48); }
    .card-footer.blue-footer { background: linear-gradient(90deg, #3b82f6, #2563eb); }
    .card-footer.green-footer { background: linear-gradient(90deg, #22c55e, #16a34a); }
    .card-footer.yellow-footer { background: linear-gradient(90deg, #eab308, #ca8a04); }
    .card-footer.purple-footer { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
    .card-footer.pink-footer { background: linear-gradient(90deg, #ec4899, #db2777); }
    .card-footer.orange-footer { background: linear-gradient(90deg, #f97316, #ea580c); }

    .service-card:hover .card-footer {
        width: 100%;
    }

    @media (max-width: 768px) {
        .admin-header h1 {
            font-size: 1.875rem;
        }
        .services-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="admin-container">
    <div class="content-wrapper">
        <div class="admin-header">
            <h1>Processing Menu</h1>
            <p>Manage daily operations and case processing workflows</p>
        </div>

        <div class="services-grid">
            @php
                $authUser = auth()->user();
                $modules = [
                    ['name' => 'Diaries', 'icon' => 'fas fa-calendar-alt', 'route' => 'modules.processing.diary', 'feature_slug' => 'diary', 'description' => 'Plan and track diary entries, tasks, and deadlines', 'color' => 'green'],
                    ['name' => 'Client Billing', 'icon' => 'fas fa-user', 'route' => 'modules.processing.client-billing', 'feature_slug' => 'client-invoices', 'description' => 'Process client billing, invoices, and receipts', 'color' => 'green'],
                    ['name' => 'Supplier Invoice', 'icon' => 'fas fa-file-signature', 'route' => 'modules.processing.supplier-invoice', 'feature_slug' => 'supplier-invoices', 'description' => 'Handle vendor invoices and payment processing', 'color' => 'yellow'],
                    ['name' => 'Cash Book', 'icon' => 'fas fa-book', 'route' => 'modules.processing.cash-book', 'feature_slug' => 'cashbook', 'description' => 'Record and manage cash transactions and receipts', 'color' => 'purple'],
                    ['name' => 'Journal', 'icon' => 'fas fa-book-open', 'route' => 'modules.processing.journal', 'feature_slug' => 'journals', 'description' => 'Maintain accounting journals and financial entries', 'color' => 'pink'],
                ];
            @endphp

            @foreach (($modules ?? []) as $module)
                @if(!$authUser?->canFeature($module['feature_slug'], 'can_view'))
                    @continue
                @endif
                <a href="{{ route($module['route']) }}" class="service-card">
                    <div class="card-header {{ $module['color'] }}"></div>
                    <div class="card-content">
                        <div class="card-top">
                            <div class="icon-wrapper {{ $module['color'] }}-bg">
                                <i class="{{ $module['icon'] }} card-icon"></i>
                            </div>
                            <svg class="arrow-icon {{ $module['color'] }}-arrow" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M9 6L15 12L9 18"></path>
                            </svg>
                        </div>
                        <h3 class="card-title">{{ $module['name'] }}</h3>
                        <p class="card-description">{{ $module['description'] }}</p>
                        <div class="learn-more {{ $module['color'] }}-text">
                            Open Module
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M9 6L15 12L9 18"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="card-footer {{ $module['color'] }}-footer"></div>
                </a>
            @endforeach
        </div>
    </div>
</div>
@endsection
