@extends('layouts.master')

@section('title', 'Documents - NafaPOS')

@section('page-title', 'Documents')

@section('content')

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

    {{-- En-tête --}}
    <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">
                    Documents
                </span>

            </div>

            <h4 class="mb-1 fw-bold">
                Documents commerciaux
            </h4>

            <p class="text-muted mb-0">
                Configurez les informations affichées sur vos documents.
            </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>


    {{-- Message succès --}}
    @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


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

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

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

            <ul class="mb-0">

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

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

                @endforeach

            </ul>

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

        </div>

    @endif


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

        @csrf
        @method('PUT')


        <div class="row g-4">

            {{-- Affichage général --}}
            <div class="col-xl-7">

                <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-layout-text-window-reverse"></i>
                            </div>

                            <div>

                                <h5 class="mb-0">
                                    Affichage des documents
                                </h5>

                                <small class="text-muted">
                                    Choisissez les éléments visibles sur vos documents.
                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="card-body">

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

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

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

                                <label class="fw-semibold mb-1">
                                    Afficher le logo
                                </label>

                                <div class="small text-muted">
                                    Afficher le logo de l'entreprise dans l'en-tête.
                                </div>

                            </div>

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

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

                            </div>

                        </div>


                        {{-- Informations société --}}
                        <div class="nafa-document-setting">

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

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

                                <label class="fw-semibold mb-1">
                                    Informations société
                                </label>

                                <div class="small text-muted">
                                    Afficher le nom, adresse, téléphone, email et autres informations.
                                </div>

                            </div>

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

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

                            </div>

                        </div>


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

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

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

                                <label class="fw-semibold mb-1">
                                    NIF
                                </label>

                                <div class="small text-muted">
                                    Afficher le numéro d'identification fiscale.
                                </div>

                            </div>

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

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

                            </div>

                        </div>


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

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

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

                                <label class="fw-semibold mb-1">
                                    RCCM
                                </label>

                                <div class="small text-muted">
                                    Afficher le numéro RCCM de l'entreprise.
                                </div>

                            </div>

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

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

                            </div>

                        </div>


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

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

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

                                <label class="fw-semibold mb-1">
                                    Compte bancaire
                                </label>

                                <div class="small text-muted">
                                    Afficher les coordonnées bancaires de l'entreprise.
                                </div>

                            </div>

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

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

                            </div>

                        </div>


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

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

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

                                <label class="fw-semibold mb-1">
                                    Signature
                                </label>

                                <div class="small text-muted">
                                    Afficher la signature configurée dans l'identité visuelle.
                                </div>

                            </div>

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

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

                            </div>

                        </div>


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

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

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

                                <label class="fw-semibold mb-1">
                                    Cachet
                                </label>

                                <div class="small text-muted">
                                    Afficher le cachet configuré dans l'identité visuelle.
                                </div>

                            </div>

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

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

                            </div>

                        </div>


                        {{-- Conditions de paiement --}}
                        <div class="nafa-document-setting border-bottom-0">

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

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

                                <label class="fw-semibold mb-1">
                                    Conditions de paiement
                                </label>

                                <div class="small text-muted">
                                    Afficher les conditions de paiement sur les documents.
                                </div>

                            </div>

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

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

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Prévisualisation --}}
            <div class="col-xl-5">

                <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-eye"></i>
                            </div>

                            <div>

                                <h5 class="mb-0">
                                    Prévisualisation
                                </h5>

                                <small class="text-muted">
                                    Exemple d'en-tête de document.
                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="card-body">

                        <div
                            class="nafa-document-preview"
                            style="
                                --document-primary:
                                {{ $company->document_primary_color ?? '#198754' }};
                                --document-secondary:
                                {{ $company->document_secondary_color ?? '#f28c28' }};
                            "
                        >

                            <div class="nafa-document-preview-header">

                                @if($company->document_show_logo && $company->logo)

                                    <img
                                        src="{{ asset('storage/' . $company->logo) }}"
                                        alt="Logo"
                                        class="nafa-document-preview-logo"
                                    >

                                @else

                                    <div class="nafa-document-preview-logo-placeholder">
                                        <i class="bi bi-building"></i>
                                    </div>

                                @endif


                                <div class="text-end">

                                    @if($company->document_show_company_info)

                                        <strong>
                                            {{ $company->name }}
                                        </strong>

                                        @if($company->address)
                                            <div>
                                                {{ $company->address }}
                                            </div>
                                        @endif

                                        @if($company->phone)
                                            <div>
                                                {{ $company->phone }}
                                            </div>
                                        @endif

                                    @endif

                                </div>

                            </div>


                            <div class="nafa-document-preview-title">
                                FACTURE
                            </div>


                            <div class="nafa-document-preview-line"></div>


                            <div class="nafa-document-preview-meta">

                                <div>
                                    <strong>N° :</strong>
                                    FACT-2026-000001
                                </div>

                                <div>
                                    <strong>Date :</strong>
                                    {{ now()->format('d/m/Y') }}
                                </div>

                            </div>


                            <div class="nafa-document-preview-table">

                                <div>
                                    Produit
                                </div>

                                <div>
                                    Qté
                                </div>

                                <div>
                                    Total
                                </div>

                            </div>


                            <div class="nafa-document-preview-total">

                                Total :

                                <strong>
                                    250 000 FCFA
                                </strong>

                            </div>


                            @if(
                                $company->document_show_nif ||
                                $company->document_show_rccm ||
                                $company->document_show_bank_account
                            )

                                <div class="nafa-document-preview-info">

                                    @if($company->document_show_nif && $company->nif)
                                        <div>
                                            <strong>NIF :</strong>
                                            {{ $company->nif }}
                                        </div>
                                    @endif

                                    @if($company->document_show_rccm && $company->rccm)
                                        <div>
                                            <strong>RCCM :</strong>
                                            {{ $company->rccm }}
                                        </div>
                                    @endif

                                    @if($company->document_show_bank_account && $company->bank_account)
                                        <div>
                                            <strong>Compte :</strong>
                                            {{ $company->bank_account }}
                                        </div>
                                    @endif

                                </div>

                            @endif


                            @if($company->document_show_footer)

                                <div class="nafa-document-preview-footer">

                                    {{ $company->document_footer_text ?: 'Merci pour votre confiance.' }}

                                </div>

                            @endif

                        </div>

                    </div>

                </div>

            </div>


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

                <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-chat-left-text"></i>
                            </div>

                            <div>

                                <h5 class="mb-0">
                                    Textes des documents
                                </h5>

                                <small class="text-muted">
                                    Ces textes pourront être affichés sur les documents.
                                </small>

                            </div>

                        </div>

                    </div>


                    <div class="card-body">

                        <div class="row g-4">

                            {{-- Conditions de paiement --}}
                            <div class="col-lg-6">

                                <label
                                    for="document_payment_terms"
                                    class="form-label fw-semibold"
                                >
                                    Conditions de paiement
                                </label>

                                <textarea
                                    name="document_payment_terms"
                                    id="document_payment_terms"
                                    rows="5"
                                    class="form-control"
                                    placeholder="Exemple : Paiement comptant à la livraison. Pour les ventes à crédit, le délai convenu doit être respecté."
                                >{{ old('document_payment_terms', $company->document_payment_terms) }}</textarea>

                                <div class="form-text">
                                    Texte affiché lorsque l'option est activée.
                                </div>

                            </div>


                            {{-- Pied de document --}}
                            <div class="col-lg-6">

                                <label
                                    for="document_footer_text"
                                    class="form-label fw-semibold"
                                >
                                    Pied de document
                                </label>

                                <textarea
                                    name="document_footer_text"
                                    id="document_footer_text"
                                    rows="5"
                                    class="form-control"
                                    placeholder="Exemple : Merci pour votre confiance. À bientôt !"
                                >{{ old('document_footer_text', $company->document_footer_text) }}</textarea>

                                <div class="form-text">
                                    Message affiché en bas du document.
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Signature / cachet information --}}
            <div class="col-12">

                <div class="alert alert-light border mb-0">

                    <div class="d-flex gap-3">

                        <div class="text-success fs-4">
                            <i class="bi bi-info-circle"></i>
                        </div>

                        <div>

                            <strong>
                                Signature et cachet
                            </strong>

                            <p class="mb-1 mt-1 text-muted small">
                                Les images de signature et de cachet sont configurées
                                dans la section
                                <a
                                    href="{{ route('client.settings.visual_identity') }}"
                                    class="text-success fw-semibold"
                                >
                                    Identité visuelle
                                </a>.
                            </p>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Boutons --}}
            <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 paramètres
                    </button>

                </div>

            </div>

        </div>

    </form>

</div>

@endsection