@extends('layouts.master')

@section('title', 'Devise & paiements - NafaPOS')

@section('page-title', 'Devise & paiements')

@section('content')

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

    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">

        <div>
            <h4 class="mb-1 fw-bold">
                Devise & paiements
            </h4>

            <p class="text-muted mb-0">
                Configurez votre devise et les moyens de paiement
                acceptés par votre entreprise.
            </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>


    @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


    @if($errors->any())

        <div class="alert alert-danger">

            <div class="fw-semibold mb-2">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Veuillez corriger les erreurs.
            </div>

            <ul class="mb-0">

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

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

                @endforeach

            </ul>

        </div>

    @endif


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

        @csrf
        @method('PUT')


        {{-- DEVise --}}
        <div class="card border-0 shadow-sm mb-4">

            <div class="card-header bg-white border-0 p-4 pb-0">

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

                    <div
                        class="rounded-3 d-flex align-items-center justify-content-center me-3"
                        style="
                            width: 45px;
                            height: 45px;
                            background: rgba(25, 135, 84, .10);
                            color: #198754;
                        "
                    >
                        <i class="bi bi-currency-exchange fs-5"></i>
                    </div>

                    <div>

                        <h5 class="mb-1">
                            Devise
                        </h5>

                        <small class="text-muted">
                            Paramètres d'affichage des montants.
                        </small>

                    </div>

                </div>

            </div>


            <div class="card-body p-4">

                <div class="row g-4">

                    {{-- Code --}}
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Code de la devise
                        </label>

                        <input
                            type="text"
                            name="currency_code"
                            class="form-control"
                            value="{{ old(
                                'currency_code',
                                $company->currency_code ?? 'XOF'
                            ) }}"
                            placeholder="XOF"
                            maxlength="10"
                        >

                        <small class="text-muted">
                            Exemple : XOF, EUR, USD.
                        </small>

                    </div>


                    {{-- Symbole --}}
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Symbole
                        </label>

                        <input
                            type="text"
                            name="currency_symbol"
                            class="form-control"
                            value="{{ old(
                                'currency_symbol',
                                $company->currency_symbol ?? 'XXXX'
                            ) }}"
                            placeholder="XXXX"
                            maxlength="20"
                        >

                    </div>


                    {{-- Position --}}
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Position du symbole
                        </label>

                        <select
                            name="currency_symbol_position"
                            class="form-select"
                        >

                            <option
                                value="after"
                                @selected(
                                    old(
                                        'currency_symbol_position',
                                        $company->currency_symbol_position ?? 'after'
                                    ) === 'after'
                                )
                            >
                                Après le montant — 25 000 XXXX
                            </option>

                            <option
                                value="before"
                                @selected(
                                    old(
                                        'currency_symbol_position',
                                        $company->currency_symbol_position ?? 'after'
                                    ) === 'before'
                                )
                            >
                                Avant le montant — XXXX 25 000
                            </option>

                        </select>

                    </div>


                    {{-- Décimales --}}
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Nombre de décimales
                        </label>

                        <select
                            name="currency_decimals"
                            class="form-select"
                        >

                            @for($i = 0; $i <= 4; $i++)

                                <option
                                    value="{{ $i }}"
                                    @selected(
                                        (int) old(
                                            'currency_decimals',
                                            $company->currency_decimals ?? 0
                                        ) === $i
                                    )
                                >
                                    {{ $i }} décimale{{ $i > 1 ? 's' : '' }}
                                </option>

                            @endfor

                        </select>

                    </div>


                    {{-- Milliers --}}
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Séparateur des milliers
                        </label>

                        <select
                            name="thousands_separator"
                            class="form-select"
                        >

                            <option
                                value="space"
                                @selected(
                                    old(
                                        'thousands_separator',
                                        $company->thousands_separator ?? ' '
                                    ) === ' '
                                )
                            >
                                Espace — 25 000
                            </option>

                            <option
                                value=","
                                @selected(
                                    old(
                                        'thousands_separator',
                                        $company->thousands_separator ?? ' '
                                    ) === ','
                                )
                            >
                                Virgule — 25,000
                            </option>

                            <option
                                value="."
                                @selected(
                                    old(
                                        'thousands_separator',
                                        $company->thousands_separator ?? ' '
                                    ) === '.'
                                )
                            >
                                Point — 25.000
                            </option>

                        </select>

                    </div>


                    {{-- Décimal --}}
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Séparateur décimal
                        </label>

                        <select
                            name="decimal_separator"
                            class="form-select"
                        >

                            <option
                                value=","
                                @selected(
                                    old(
                                        'decimal_separator',
                                        $company->decimal_separator ?? ','
                                    ) === ','
                                )
                            >
                                Virgule — 25 000,50
                            </option>

                            <option
                                value="."
                                @selected(
                                    old(
                                        'decimal_separator',
                                        $company->decimal_separator ?? ','
                                    ) === '.'
                                )
                            >
                                Point — 25 000.50
                            </option>

                        </select>

                    </div>

                </div>


                {{-- Aperçu --}}
                <div class="mt-4">

                    <div class="border rounded-3 bg-light p-3">

                        <div class="small text-muted mb-1">
                            Exemple d'affichage
                        </div>

                        <div
                            class="fs-4 fw-bold"
                            id="currencyPreview"
                        >
                            25 000 XXXX
                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- MOYENS DE PAIEMENT --}}
        <div class="card border-0 shadow-sm mb-4">

            <div class="card-header bg-white border-0 p-4 pb-0">

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

                    <div
                        class="rounded-3 d-flex align-items-center justify-content-center me-3"
                        style="
                            width: 45px;
                            height: 45px;
                            background: rgba(242, 140, 40, .10);
                            color: #f28c28;
                        "
                    >
                        <i class="bi bi-wallet2 fs-5"></i>
                    </div>

                    <div>

                        <h5 class="mb-1">
                            Moyens de paiement
                        </h5>

                        <small class="text-muted">
                            Activez les moyens de paiement acceptés.
                        </small>

                    </div>

                </div>

            </div>


            <div class="card-body p-4">

                <div class="row g-3">

                    @foreach($paymentMethods as $method)

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

                            <div
                                class="border rounded-3 p-3 h-100"
                            >

                                <div class="d-flex align-items-center justify-content-between">

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

                                        <div
                                            class="rounded-2 d-flex align-items-center justify-content-center me-3"
                                            style="
                                                width: 40px;
                                                height: 40px;
                                                background: #f8f9fa;
                                            "
                                        >

                                            <i
                                                class="bi {{ $method->icon ?? 'bi-wallet2' }}"
                                            ></i>

                                        </div>

                                        <div>

                                            <div class="fw-semibold">
                                                {{ $method->name }}
                                            </div>

                                            @if($method->is_default)

                                                <small class="text-success">
                                                    <i class="bi bi-check-circle me-1"></i>
                                                    Par défaut
                                                </small>

                                            @endif

                                        </div>

                                    </div>


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

                                        <input
                                            type="hidden"
                                            name="payment_methods[{{ $method->id }}][is_active]"
                                            value="0"
                                        >

                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="payment_methods[{{ $method->id }}][is_active]"
                                            value="1"
                                            id="payment_{{ $method->id }}"
                                            @checked($method->is_active)
                                        >

                                    </div>

                                </div>


                                <input
                                    type="hidden"
                                    name="payment_methods[{{ $method->id }}][name]"
                                    value="{{ $method->name }}"
                                >


                                <div class="mt-3">

                                    <div class="form-check">

                                        <input
                                            class="form-check-input"
                                            type="radio"
                                            name="default_payment_method"
                                            value="{{ $method->id }}"
                                            id="default_{{ $method->id }}"
                                            @checked($method->is_default)
                                        >

                                        <label
                                            class="form-check-label small"
                                            for="default_{{ $method->id }}"
                                        >
                                            Utiliser comme paiement par défaut
                                        </label>

                                    </div>

                                </div>

                            </div>

                        </div>

                    @endforeach

                </div>

            </div>

        </div>


        {{-- ACTIONS --}}
        <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 px-4"
            >

                <i class="bi bi-check-lg me-1"></i>

                Enregistrer

            </button>

        </div>

    </form>

</div>

@endsection


@push('scripts')

<script>

document.addEventListener('DOMContentLoaded', function () {

    const code = document.querySelector(
        '[name="currency_code"]'
    );

    const symbol = document.querySelector(
        '[name="currency_symbol"]'
    );

    const position = document.querySelector(
        '[name="currency_symbol_position"]'
    );

    const decimals = document.querySelector(
        '[name="currency_decimals"]'
    );

    const thousands = document.querySelector(
        '[name="thousands_separator"]'
    );

    const decimal = document.querySelector(
        '[name="decimal_separator"]'
    );

    const preview = document.getElementById(
        'currencyPreview'
    );


    function updatePreview() {

        if (!preview) {
            return;
        }

        let amount = '25000';

        const decimalCount =
            parseInt(decimals.value || 0);

        if (decimalCount > 0) {

            amount +=
                decimal.value +
                '0'.repeat(decimalCount);

        }


        const separator =
            thousands.value === 'space'
                ? ' '
                : thousands.value;

        amount =
            amount.replace(
                /\B(?=(\d{3})+(?!\d))/g,
                separator
            );


        if (position.value === 'before') {

            preview.textContent =
                symbol.value + ' ' + amount;

        } else {

            preview.textContent =
                amount + ' ' + symbol.value;

        }

    }


    [
        code,
        symbol,
        position,
        decimals,
        thousands,
        decimal
    ].forEach(function (element) {

        if (element) {

            element.addEventListener(
                'input',
                updatePreview
            );

            element.addEventListener(
                'change',
                updatePreview
            );

        }

    });


    updatePreview();

});

</script>

@endpush