@extends('agency.layouts.app')

@section('title', 'Genel Ayarlar')

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="d-flex align-items-center gap-3 mb-2">
                <div class="settings-icon-wrapper">
                    <i class="fas fa-cog fa-spin-hover text-primary"></i>
                </div>
                <div>
                    <h1 class="h3 fw-800 text-dark mb-0">Genel Ayarlar</h1>
                    <p class="text-muted mb-0">Acente operasyonlarınızı özelleştirin ve iş akışınızı yönetin.</p>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </div>
    </div>

    <!-- Settings Grid -->
    <div class="row g-4">
        <!-- Customer Custom Fields Card -->
        <div class="col-xl-4 col-md-6">
            <a href="{{ route('agency.customers.fields.index') }}" class="settings-card shadow-sm h-100 decor-none">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start mb-4">
                        <div class="card-icon bg-soft-primary text-primary">
                            <i class="fas fa-id-card-alt"></i>
                        </div>
                        <div class="stats-badge bg-soft-primary text-primary">
                            <span class="fw-bold">{{ $stats['active_custom_fields'] }}</span>
                            <span class="small opacity-75">/{{ $stats['custom_fields'] }} Aktif</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-2">Müşteri Özel Alanları</h4>
                    <p class="text-muted small mb-4">Müşteri profillerine "Kan Grubu", "İlgi Alanları" gibi size özel veri giriş alanları ekleyin.</p>
                    <div class="card-footer-action">
                        <span class="text-primary fw-600">Yönetmeye Başla <i class="fas fa-arrow-right ms-1"></i></span>
                    </div>
                </div>
            </a>
        </div>

        <!-- Customer Document Types Card -->
        <div class="col-xl-4 col-md-6">
            <a href="{{ route('agency.customers.document-types.index') }}" class="settings-card shadow-sm h-100 decor-none">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start mb-4">
                        <div class="card-icon bg-soft-success text-success">
                            <i class="fas fa-file-invoice"></i>
                        </div>
                        <div class="stats-badge bg-soft-success text-success">
                            <span class="fw-bold">{{ $stats['active_document_types'] }}</span>
                            <span class="small opacity-75">/{{ $stats['document_types'] }} Aktif</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-2">Evrak ve Belge Tipleri</h4>
                    <p class="text-muted small mb-4">Pasaport, Vize, Fatura veya Özel Sözleşme gibi müşteriye ait döküman kategorilerini tanımlayın.</p>
                    <div class="card-footer-action">
                        <span class="text-success fw-600">Yönetmeye Başla <i class="fas fa-arrow-right ms-1"></i></span>
                    </div>
                </div>
            </a>
        </div>

        <!-- Placeholder for future settings -->
        <div class="col-xl-4 col-md-6">
            <div class="settings-card shadow-none h-100 border-dashed bg-transparent d-flex align-items-center justify-content-center p-5 opacity-75">
                <div class="text-center">
                    <div class="mb-3">
                        <i class="fas fa-plus-circle text-muted" style="font-size: 2.5rem;"></i>
                    </div>
                    <h6 class="text-muted fw-bold">Yeni Ayarlar Yolda...</h6>
                    <p class="text-muted small mb-0">Çok yakında SMS, E-posta ve Tema ayarlarını buradan yönetebileceksiniz.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Settings Icon Animation */
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .fa-spin-hover:hover {
        animation: spin-slow 3s linear infinite;
    }

    .settings-icon-wrapper {
        width: 54px;
        height: 54px;
        background: white;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
    }

    .fw-800 { font-weight: 800; }
    .fw-600 { font-weight: 600; }

    .header-divider {
        height: 3px;
        width: 60px;
        background: linear-gradient(to right, var(--bs-primary), transparent);
        border-radius: 10px;
    }

    /* Card Styling */
    .decor-none { text-decoration: none !important; }
    
    .settings-card {
        display: block;
        background: white;
        border-radius: 20px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(0,0,0,0.03);
        position: relative;
        overflow: hidden;
    }

    .settings-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
        border-color: rgba(99, 102, 241, 0.2);
    }

    .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        transition: transform 0.3s ease;
    }

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

    .stats-badge {
        padding: 6px 12px;
        border-radius: 10px;
        font-size: 0.8rem;
    }

    .bg-soft-primary { background-color: rgba(99, 102, 241, 0.1); }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    
    .card-footer-action {
        padding-top: 15px;
        border-top: 1px solid rgba(0,0,0,0.04);
        display: flex;
        align-items: center;
    }

    .border-dashed {
        border: 2px dashed #e2e8f0;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .settings-card { margin-bottom: 20px; }
    }
</style>
@endsection