@extends('layouts.master')

@section('title', 'Préférences - NafaPOS')

@section('page-title', 'Préférences')

@section('content')

<div class="container-fluid py-4">

    {{-- Header --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">

        <div>

            <div class="d-flex align-items-center gap-2 mb-1">

                <a
                    href="{{ route('client.settings') }}"
                    class="text-decoration-none text-muted"
                >
                    <i class="bi bi-gear"></i>
                    Paramètres
                </a>

                <i class="bi bi-chevron-right text-muted"></i>

                <span class="text-muted">
                    Préférences
                </span>

            </div>

            <h4 class="mb-1 fw-bold">
                Préférences
            </h4>

            <p class="text-muted mb-0">
                Personnalisez le comportement général de NafaPOS.
            </p>

        </div>

        <a
            href="{{ route('client.settings') }}"
            class="btn btn-light border"
        >
            <i class="bi bi-arrow-left me-1"></i>
            Retour aux paramètres
        </a>

    </div>


    {{-- Success --}}
    @if(session('success'))

        <div
            class="alert alert-success alert-dismissible fade show"
            role="alert"
        >

            <i class="bi bi-check-circle me-2"></i>

            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
            ></button>

        </div>

    @endif


    {{-- Errors --}}
    @if($errors->any())

        <div
            class="alert alert-danger alert-dismissible fade show"
            role="alert"
        >

            <strong>
                <i class="bi bi-exclamation-triangle me-2"></i>
                Erreur
            </strong>

            <ul class="mb-0 mt-2">

                @foreach($errors->all() as $error)

                    <li>
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
            ></button>

        </div>

    @endif


    <form
        method="POST"
        action="{{ route('client.settings.preferences.update') }}"
    >

        @csrf
        @method('PUT')


        <div class="row g-4">

            {{-- Localisation --}}
            <div class="col-xl-6">

                <div class="card border-0 shadow-sm h-100">

                    <div class="card-header bg-white border-bottom py-3">

                        <div class="d-flex align-items-center gap-2">

                            <div class="rounded-3 bg-success-subtle text-success p-2">
                                <i class="bi bi-globe2"></i>
                            </div>

                            <div>

                                <h5 class="mb-0">
                                    Région et format
                                </h5>

                                <small class="text-muted">
                                    Configurez les formats utilisés dans l'application.
                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="card-body">

                        <div class="mb-4">

                            <label
                                for="timezone"
                                class="form-label fw-semibold"
                            >
                                Fuseau horaire
                            </label>

                            <select
                                name="timezone"
                                id="timezone"
                                class="form-select"
                            >

                                <option
                                    value="Africa/Bamako"
                                    @selected(
                                        old(
                                            'timezone',
                                            $company->timezone
                                        ) === 'Africa/Bamako'
                                    )
                                >
                                    Afrique / Bamako
                                </option>

                                <option
                                    value="Africa/Abidjan"
                                    @selected(
                                        old(
                                            'timezone',
                                            $company->timezone
                                        ) === 'Africa/Abidjan'
                                    )
                                >
                                    Afrique / Abidjan
                                </option>

                                <option
                                    value="Africa/Dakar"
                                    @selected(
                                        old(
                                            'timezone',
                                            $company->timezone
                                        ) === 'Africa/Dakar'
                                    )
                                >
                                    Afrique / Dakar
                                </option>

                                <option
                                    value="Africa/Conakry"
                                    @selected(
                                        old(
                                            'timezone',
                                            $company->timezone
                                        ) === 'Africa/Conakry'
                                    )
                                >
                                    Afrique / Conakry
                                </option>

                                <option
                                    value="Africa/Ouagadougou"
                                    @selected(
                                        old(
                                            'timezone',
                                            $company->timezone
                                        ) === 'Africa/Ouagadougou'
                                    )
                                >
                                    Afrique / Ouagadougou
                                </option>

                            </select>

                        </div>


                        <div class="row g-3">

                            <div class="col-md-6">

                                <label
                                    for="date_format"
                                    class="form-label fw-semibold"
                                >
                                    Format de date
                                </label>

                                <select
                                    name="date_format"
                                    id="date_format"
                                    class="form-select"
                                >

                                    <option
                                        value="d/m/Y"
                                        @selected(
                                            old(
                                                'date_format',
                                                $company->date_format
                                            ) === 'd/m/Y'
                                        )
                                    >
                                        25/09/2026
                                    </option>

                                    <option
                                        value="d-m-Y"
                                        @selected(
                                            old(
                                                'date_format',
                                                $company->date_format
                                            ) === 'd-m-Y'
                                        )
                                    >
                                        25-09-2026
                                    </option>

                                    <option
                                        value="Y-m-d"
                                        @selected(
                                            old(
                                                'date_format',
                                                $company->date_format
                                            ) === 'Y-m-d'
                                        )
                                    >
                                        2026-09-25
                                    </option>

                                    <option
                                        value="Y/m/d"
                                        @selected(
                                            old(
                                                'date_format',
                                                $company->date_format
                                            ) === 'Y/m/d'
                                        )
                                    >
                                        2026/09/25
                                    </option>

                                </select>

                            </div>


                            <div class="col-md-6">

                                <label
                                    for="time_format"
                                    class="form-label fw-semibold"
                                >
                                    Format de l'heure
                                </label>

                                <select
                                    name="time_format"
                                    id="time_format"
                                    class="form-select"
                                >

                                    <option
                                        value="H:i"
                                        @selected(
                                            old(
                                                'time_format',
                                                $company->time_format
                                            ) === 'H:i'
                                        )
                                    >
                                        14:30
                                    </option>

                                    <option
                                        value="H:i:s"
                                        @selected(
                                            old(
                                                'time_format',
                                                $company->time_format
                                            ) === 'H:i:s'
                                        )
                                    >
                                        14:30:45
                                    </option>

                                    <option
                                        value="h:i A"
                                        @selected(
                                            old(
                                                'time_format',
                                                $company->time_format
                                            ) === 'h:i A'
                                        )
                                    >
                                        02:30 PM
                                    </option>

                                </select>

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Alertes --}}
            <div class="col-xl-6">

                <div class="card border-0 shadow-sm h-100">

                    <div class="card-header bg-white border-bottom py-3">

                        <div class="d-flex align-items-center gap-2">

                            <div class="rounded-3 bg-warning-subtle text-warning p-2">
                                <i class="bi bi-bell"></i>
                            </div>

                            <div>

                                <h5 class="mb-0">
                                    Alertes
                                </h5>

                                <small class="text-muted">
                                    Gérez les alertes importantes de votre activité.
                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="card-body">

                        {{-- Stock --}}
                        <div class="nafa-document-setting">

                            <div class="nafa-document-setting-icon">
                                <i class="bi bi-box-seam"></i>
                            </div>

                            <div class="flex-grow-1">

                                <div class="fw-semibold">
                                    Alerte stock faible
                                </div>

                                <div class="small text-muted">
                                    Recevoir une alerte lorsque le stock atteint le seuil.
                                </div>

                            </div>

                            <div class="form-check form-switch">

                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="low_stock_alert"
                                    value="1"
                                    @checked(
                                        old(
                                            'low_stock_alert',
                                            $company->low_stock_alert
                                        )
                                    )
                                >

                            </div>

                        </div>


                        <div class="row g-3 py-3">

                            <div class="col-md-6">

                                <label
                                    for="low_stock_threshold"
                                    class="form-label fw-semibold"
                                >
                                    Seuil de stock
                                </label>

                                <input
                                    type="number"
                                    min="0"
                                    name="low_stock_threshold"
                                    id="low_stock_threshold"
                                    class="form-control"
                                    value="{{ old(
                                        'low_stock_threshold',
                                        $company->low_stock_threshold
                                    ) }}"
                                >

                                <div class="form-text">
                                    Quantité minimale.
                                </div>

                            </div>


                            <div class="col-md-6">

                                <label
                                    for="expiration_alert_days"
                                    class="form-label fw-semibold"
                                >
                                    Expiration
                                </label>

                                <input
                                    type="number"
                                    min="0"
                                    name="expiration_alert_days"
                                    id="expiration_alert_days"
                                    class="form-control"
                                    value="{{ old(
                                        'expiration_alert_days',
                                        $company->expiration_alert_days
                                    ) }}"
                                >

                                <div class="form-text">
                                    Nombre de jours avant expiration.
                                </div>

                            </div>

                        </div>


                        {{-- Expiration --}}
                        <div class="nafa-document-setting border-bottom-0">

                            <div class="nafa-document-setting-icon">
                                <i class="bi bi-calendar-x"></i>
                            </div>

                            <div class="flex-grow-1">

                                <div class="fw-semibold">
                                    Alerte expiration
                                </div>

                                <div class="small text-muted">
                                    Alerter lorsqu'un produit approche de sa date d'expiration.
                                </div>

                            </div>

                            <div class="form-check form-switch">

                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="expiration_alert"
                                    value="1"
                                    @checked(
                                        old(
                                            'expiration_alert',
                                            $company->expiration_alert
                                        )
                                    )
                                >

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Comportement ventes --}}
            <div class="col-xl-6">

                <div class="card border-0 shadow-sm">

                    <div class="card-header bg-white border-bottom py-3">

                        <div class="d-flex align-items-center gap-2">

                            <div class="rounded-3 bg-primary-subtle text-primary p-2">
                                <i class="bi bi-cart-check"></i>
                            </div>

                            <div>

                                <h5 class="mb-0">
                                    Ventes
                                </h5>

                                <small class="text-muted">
                                    Contrôlez le comportement du POS.
                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="card-body">

                        <div class="nafa-document-setting">

                            <div class="nafa-document-setting-icon">
                                <i class="bi bi-question-circle"></i>
                            </div>

                            <div class="flex-grow-1">

                                <div class="fw-semibold">
                                    Confirmation avant validation
                                </div>

                                <div class="small text-muted">
                                    Demander une confirmation avant d'enregistrer une vente.
                                </div>

                            </div>

                            <div class="form-check form-switch">

                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="sale_confirmation"
                                    value="1"
                                    @checked(
                                        old(
                                            'sale_confirmation',
                                            $company->sale_confirmation
                                        )
                                    )
                                >

                            </div>

                        </div>


                        <div class="nafa-document-setting">

                            <div class="nafa-document-setting-icon">
                                <i class="bi bi-boxes"></i>
                            </div>

                            <div class="flex-grow-1">

                                <div class="fw-semibold">
                                    Autoriser le stock négatif
                                </div>

                                <div class="small text-muted">
                                    Autoriser une vente même si le stock disponible est insuffisant.
                                </div>

                            </div>

                            <div class="form-check form-switch">

                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="allow_negative_stock"
                                    value="1"
                                    @checked(
                                        old(
                                            'allow_negative_stock',
                                            $company->allow_negative_stock
                                        )
                                    )
                                >

                            </div>

                        </div>


                        <div class="nafa-document-setting border-bottom-0">

                            <div class="nafa-document-setting-icon">
                                <i class="bi bi-person-check"></i>
                            </div>

                            <div class="flex-grow-1">

                                <div class="fw-semibold">
                                    Client obligatoire pour une vente à crédit
                                </div>

                                <div class="small text-muted">
                                    Une vente à crédit doit obligatoirement être associée à un client.
                                </div>

                            </div>

                            <div class="form-check form-switch">

                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="require_customer_for_credit"
                                    value="1"
                                    @checked(
                                        old(
                                            'require_customer_for_credit',
                                            $company->require_customer_for_credit
                                        )
                                    )
                                >

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Interface --}}
            <div class="col-xl-6">

                <div class="card border-0 shadow-sm">

                    <div class="card-header bg-white border-bottom py-3">

                        <div class="d-flex align-items-center gap-2">

                            <div class="rounded-3 bg-info-subtle text-info p-2">
                                <i class="bi bi-display"></i>
                            </div>

                            <div>

                                <h5 class="mb-0">
                                    Interface
                                </h5>

                                <small class="text-muted">
                                    Personnalisez quelques comportements de l'application.
                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="card-body">

                        <div class="nafa-document-setting">

                            <div class="nafa-document-setting-icon">
                                <i class="bi bi-emoji-smile"></i>
                            </div>

                            <div class="flex-grow-1">

                                <div class="fw-semibold">
                                    Message de bienvenue
                                </div>

                                <div class="small text-muted">
                                    Afficher le message de bienvenue sur le tableau de bord.
                                </div>

                            </div>

                            <div class="form-check form-switch">

                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="show_dashboard_welcome"
                                    value="1"
                                    @checked(
                                        old(
                                            'show_dashboard_welcome',
                                            $company->show_dashboard_welcome
                                        )
                                    )
                                >

                            </div>

                        </div>


                        <div class="nafa-document-setting border-bottom-0">

                            <div class="nafa-document-setting-icon">
                                <i class="bi bi-printer"></i>
                            </div>

                            <div class="flex-grow-1">

                                <div class="fw-semibold">
                                    Impression automatique
                                </div>

                                <div class="small text-muted">
                                    Préparer automatiquement l'impression après création d'un document.
                                </div>

                            </div>

                            <div class="form-check form-switch">

                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="auto_print_document"
                                    value="1"
                                    @checked(
                                        old(
                                            'auto_print_document',
                                            $company->auto_print_document
                                        )
                                    )
                                >

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Submit --}}
            <div class="col-12">

                <div class="d-flex justify-content-end gap-2">

                    <a
                        href="{{ route('client.settings') }}"
                        class="btn btn-light border"
                    >
                        Annuler
                    </a>

                    <button
                        type="submit"
                        class="btn btn-success"
                    >
                        <i class="bi bi-check-lg me-1"></i>
                        Enregistrer les préférences
                    </button>

                </div>

            </div>

        </div>

    </form>

</div>

@endsection