@extends('layouts.master')

@section('title', 'Paramètres - NafaPOS')
@section('page-title', 'Paramètres')

@section('content')

<div class="container-fluid">

    {{-- En-tête --}}
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">
            Paramètres
        </h4>

        <p class="text-muted mb-0">
            Configurez les informations et les préférences de votre entreprise.
        </p>
    </div>


    {{-- Cards --}}
    <div class="row g-4">

        {{-- Informations société --}}
        @can('settings.view')
            <div class="col-md-6 col-xl-4">

                <a href="{{ route('client.settings.company') }}"
                   class="text-decoration-none">

                    <div class="nafa-settings-card">

                        <div class="nafa-settings-icon green">
                            <i class="bi bi-building"></i>
                        </div>

                        <div class="nafa-settings-content">

                            <h5>
                                Informations société
                            </h5>

                            <p>
                                Nom, logo, adresse, téléphone, email,
                                NIF, RCCM et autres informations.
                            </p>

                            <span class="nafa-settings-link">
                                Configurer
                                <i class="bi bi-arrow-right"></i>
                            </span>

                        </div>

                    </div>

                </a>

            </div>
        @endcan

        {{-- Facturation --}}
        @can('settings.view')
            <div class="col-md-6 col-xl-4">

                <a href="{{ route('client.settings.billing') }}"
                   class="text-decoration-none">

                    <div class="nafa-settings-card">

                        <div class="nafa-settings-icon orange">
                            <i class="bi bi-receipt"></i>
                        </div>

                        <div class="nafa-settings-content">

                            <h5>
                                Facturation
                            </h5>

                            <p>
                                Préfixes, numérotation des factures,
                                devis, bons et conditions de paiement.
                            </p>

                            <span class="nafa-settings-link">
                                Configurer
                                <i class="bi bi-arrow-right"></i>
                            </span>

                        </div>

                    </div>

                </a>

            </div>
        @endcan

        {{-- Identité visuelle --}}
        @can('settings.view')
        <div class="col-md-6 col-xl-4">
            <a
                href="{{ route('client.settings.visual_identity') }}"
                class="text-decoration-none"
            >
                <div class="nafa-settings-card">

                    <div class="nafa-settings-icon purple">
                        <i class="bi bi-palette"></i>
                    </div>

                    <div class="nafa-settings-content">

                        <h5>
                            Identité visuelle
                        </h5>

                        <p>
                            Logo, signature, tampon et couleurs
                            de vos documents.
                        </p>

                        <span class="nafa-settings-link">
                            Configurer
                            <i class="bi bi-arrow-right"></i>
                        </span>

                    </div>

                </div>
            </a>
        </div>
        @endcan

        {{-- Devise et paiements --}}
        @can('settings.view')
            <div class="col-md-6 col-xl-4">

                <a href="{{ route('client.settings.currency_payments') }}"
                   class="text-decoration-none">

                    <div class="nafa-settings-card">

                        <div class="nafa-settings-icon purple">
                            <i class="bi bi-cash-stack"></i>
                        </div>

                        <div class="nafa-settings-content">

                            <h5>
                                Devise & paiements
                            </h5>

                            <p>
                                Devise utilisée et modes de paiement
                                disponibles dans votre entreprise.
                            </p>

                            <span class="nafa-settings-link">
                                Configurer
                                <i class="bi bi-arrow-right"></i>
                            </span>

                        </div>

                    </div>

                </a>

            </div>
        @endcan


        {{-- Documents --}}
        @can('settings.view')
            <div class="col-md-6 col-xl-4">

                <a href="{{ route('client.settings.documents') }}"
                   class="text-decoration-none">

                    <div class="nafa-settings-card">

                        <div class="nafa-settings-icon red">
                            <i class="bi bi-file-earmark-text"></i>
                        </div>

                        <div class="nafa-settings-content">

                            <h5>
                                Documents
                            </h5>

                            <p>
                                En-tête, pied de page, mentions et
                                présentation des documents PDF.
                            </p>

                            <span class="nafa-settings-link">
                                Configurer
                                <i class="bi bi-arrow-right"></i>
                            </span>

                        </div>

                    </div>

                </a>

            </div>
        @endcan

        {{-- Préférences --}}
        @can('settings.view')
            <div class="col-md-6 col-xl-4">

                <a href="{{ route('client.settings.preferences') }}"
                   class="text-decoration-none">

                    <div class="nafa-settings-card">

                        <div class="nafa-settings-icon teal">
                            <i class="bi bi-sliders"></i>
                        </div>

                        <div class="nafa-settings-content">

                            <h5>
                                Préférences
                            </h5>

                            <p>
                                Configuration générale du fonctionnement
                                de votre espace NafaPOS.
                            </p>

                            <span class="nafa-settings-link">
                                Configurer
                                <i class="bi bi-arrow-right"></i>
                            </span>

                        </div>

                    </div>

                </a>

            </div>
        @endcan
    </div>
</div>

@endsection


@push('styles')

<style>

.nafa-settings-card {
    height: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e7ebe8;
    border-radius: 12px;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.nafa-settings-card:hover {
    transform: translateY(-3px);

    border-color: #cfe5d8;

    box-shadow:
        0 8px 25px rgba(16, 24, 40, 0.08);
}

.nafa-settings-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 21px;
}

.nafa-settings-icon.green {
    background: #e8f6ee;
    color: #198754;
}

.nafa-settings-icon.orange {
    background: #fff1df;
    color: #f28c28;
}

.nafa-settings-icon.blue {
    background: #eaf2ff;
    color: #3b73d1;
}

.nafa-settings-icon.purple {
    background: #f1eaff;
    color: #7654c7;
}

.nafa-settings-icon.red {
    background: #ffebeb;
    color: #dc3545;
}

.nafa-settings-icon.teal {
    background: #e5f7f5;
    color: #159a8c;
}

.nafa-settings-content {
    min-width: 0;
}

.nafa-settings-content h5 {
    margin: 0 0 7px;
    color: #212529;
    font-size: 15px;
    font-weight: 700;
}

.nafa-settings-content p {
    margin: 0 0 14px;
    color: #6c757d;
    font-size: 13px;
    line-height: 1.6;
}

.nafa-settings-link {
    color: #198754;
    font-size: 13px;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nafa-settings-card:hover .nafa-settings-link {
    color: #146c43;
}

</style>

@endpush