@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>

            <!-- Döviz Kurları (Exchange Rates) Card -->
            <div class="col-xl-4 col-md-6">
                <a href="{{ route('agency.settings.currencies.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-warning text-warning"
                                style="color: #d97706; background-color: rgba(217, 119, 6, 0.1);">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                            <div class="stats-badge bg-soft-warning text-warning fw-bold"
                                style="color: #d97706; background-color: rgba(217, 119, 6, 0.1);">
                                <span>Kurlar</span>
                            </div>
                        </div>
                        <h4 class="fw-bold text-dark mb-2">Döviz Kurları ve Para Birimleri</h4>
                        <p class="text-muted small mb-4">Sistem genelinde kullanılacak döviz para birimlerini, sembolleri ve
                            TRY kurlarını yönetin.</p>
                        <div class="card-footer-action">
                            <span class="text-warning fw-600" style="color: #d97706 !important;">Yönetmeye Başla <i
                                    class="fas fa-arrow-right ms-1"></i></span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Vergi Oranları (Tax Rates) Card -->
            <div class="col-xl-4 col-md-6">
                <a href="{{ route('agency.settings.tax-rates.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"
                                style="color: #059669; background-color: rgba(5, 150, 105, 0.1);">
                                <i class="fas fa-percent"></i>
                            </div>
                            <div class="stats-badge bg-soft-success text-success fw-bold"
                                style="color: #059669; background-color: rgba(5, 150, 105, 0.1);">
                                <span>{{ $stats['tax_types'] }} Tip · {{ $stats['active_tax_rates'] }} Oran</span>
                            </div>
                        </div>
                        <h4 class="fw-bold text-dark mb-2">Vergi Oranları</h4>
                        <p class="text-muted small mb-4">Vergileri tiplere ayırıp (KDV, Konaklama Vergisi ...) her tipin altına
                            istediğiniz kadar oran tanımlayın. Formlar yalnızca kendi tipinin oranlarını listeler.</p>
                        <div class="card-footer-action">
                            <span class="text-success fw-600" style="color: #059669 !important;">Yönetmeye Başla <i
                                    class="fas fa-arrow-right ms-1"></i></span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Pazar Tanımlamaları Card -->
            <div class="col-xl-4 col-md-6">
                <a href="{{ route('agency.settings.marketplaces.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-info text-info"
                                style="color: #0ea5e9; background-color: rgba(14, 165, 233, 0.1);">
                                <i class="fas fa-store"></i>
                            </div>
                            <div class="stats-badge bg-soft-info text-info fw-bold"
                                style="color: #0ea5e9; background-color: rgba(14, 165, 233, 0.1);">
                                <span>Pazarlar</span>
                            </div>
                        </div>
                        <h4 class="fw-bold text-dark mb-2">Pazar Tanımlamaları</h4>
                        <p class="text-muted small mb-4">Satış kanallarınızı oluşturun, bu kanallara özel diller, para
                            birimleri ve ürünler atayarak yönetin.</p>
                        <div class="card-footer-action">
                            <span class="text-info fw-600" style="color: #0ea5e9 !important;">Yönetmeye Başla <i
                                    class="fas fa-arrow-right ms-1"></i></span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Sözleşme Yönetimi Card -->
            <div class="col-xl-4 col-md-6">
                <a href="{{ route('agency.settings.contracts.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"
                                style="color: #8b5cf6; background-color: rgba(139, 92, 246, 0.1); width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
                                <i class="fas fa-file-contract"></i>
                            </div>
                            <div class="stats-badge fw-bold"
                                style="color: #8b5cf6; background-color: rgba(139, 92, 246, 0.1); padding: 6px 12px; border-radius: 10px; font-size: 0.8rem;">
                                <span>{{ $stats['active_contracts'] }}</span>
                                <span class="small opacity-75">/{{ $stats['contracts'] }} Aktif</span>
                            </div>
                        </div>
                        <h4 class="fw-bold text-dark mb-2">Sözleşmeler</h4>
                        <p class="text-muted small mb-4">Mesafeli satış sözleşmesi, gizlilik politikası ve çerez politikası
                            gibi yasal sözleşmeleri yönetin veya yenilerini oluşturun.</p>
                        <div class="card-footer-action">
                            <span class="fw-600" style="color: #8b5cf6 !important;">Yönetmeye Başla <i
                                    class="fas fa-arrow-right ms-1"></i></span>
                        </div>
                    </div>
                </a>
            </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