@extends('layouts.master')

@section('title', 'Identité visuelle - NafaPOS')

@section('page-title', 'Identité visuelle')

@section('content')

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

    {{-- En-tête --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">

        <div>
            <h4 class="mb-1 fw-bold">
                Identité visuelle
            </h4>

            <p class="text-muted mb-0">
                Configurez les éléments visuels utilisés
                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>


    {{-- Messages --}}
    @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"
            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>

        </div>

    @endif


    <form
        action="{{ route('client.settings.visual_identity.update') }}"
        method="POST"
        enctype="multipart/form-data"
    >

        @csrf
        @method('PUT')


        <div class="row g-4">


            {{-- Logo --}}
            <div class="col-lg-4">

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

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

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

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

                            <div>
                                <h5 class="mb-1">
                                    Logo
                                </h5>

                                <small class="text-muted">
                                    Logo officiel de votre société
                                </small>
                            </div>

                        </div>


                        <div class="text-center">

                            @if($company->logo)

                                <div
                                    class="border rounded-3 p-3 mb-3 bg-light"
                                    style="min-height: 180px;"
                                >

                                    <img
                                        src="{{ asset('storage/' . $company->logo) }}"
                                        alt="Logo {{ $company->name }}"
                                        style="
                                            max-width: 100%;
                                            max-height: 150px;
                                            object-fit: contain;
                                        "
                                    >

                                </div>

                            @else

                                <div
                                    class="border rounded-3 p-4 mb-3 bg-light text-muted"
                                    style="min-height: 180px;"
                                >

                                    <i class="bi bi-image fs-1 d-block mb-2"></i>

                                    Aucun logo configuré

                                </div>

                            @endif


                            <a
                                href="{{ route('client.settings.company') }}"
                                class="btn btn-outline-success btn-sm"
                            >

                                <i class="bi bi-pencil me-1"></i>

                                Modifier le logo

                            </a>

                        </div>

                    </div>

                </div>

            </div>


            {{-- Signature --}}
            <div class="col-lg-4">

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

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

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

                            <div
                                class="rounded-3 d-flex align-items-center justify-content-center me-3"
                                style="
                                    width: 45px;
                                    height: 45px;
                                    background: rgba(111, 66, 193, 0.10);
                                    color: #6f42c1;
                                "
                            >
                                <i class="bi bi-pen fs-5"></i>
                            </div>

                            <div>
                                <h5 class="mb-1">
                                    Signature
                                </h5>

                                <small class="text-muted">
                                    Signature du responsable
                                </small>
                            </div>

                        </div>


                        @if($company->signature)

                            <div
                                class="border rounded-3 p-3 mb-3 bg-light text-center"
                                style="min-height: 150px;"
                            >

                                <img
                                    src="{{ asset('storage/' . $company->signature) }}"
                                    alt="Signature"
                                    style="
                                        max-width: 100%;
                                        max-height: 120px;
                                        object-fit: contain;
                                    "
                                >

                            </div>

                        @else

                            <div
                                class="border rounded-3 p-4 mb-3 bg-light text-muted text-center"
                                style="min-height: 150px;"
                            >

                                <i class="bi bi-pen fs-1 d-block mb-2"></i>

                                Aucune signature configurée

                            </div>

                        @endif


                        <label
                            for="signature"
                            class="form-label fw-semibold"
                        >
                            {{ $company->signature
                                ? 'Remplacer la signature'
                                : 'Ajouter une signature'
                            }}
                        </label>

                        <input
                            type="file"
                            name="signature"
                            id="signature"
                            class="form-control"
                            accept=".jpg,.jpeg,.png,.webp"
                        >

                        <small class="text-muted d-block mt-2">
                            JPG, PNG ou WEBP — maximum 2 Mo.
                        </small>

                    </div>

                </div>

            </div>


            {{-- Tampon --}}
            <div class="col-lg-4">

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

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

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

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

                            <div>
                                <h5 class="mb-1">
                                    Tampon
                                </h5>

                                <small class="text-muted">
                                    Cachet officiel de la société
                                </small>
                            </div>

                        </div>


                        @if($company->stamp)

                            <div
                                class="border rounded-3 p-3 mb-3 bg-light text-center"
                                style="min-height: 150px;"
                            >

                                <img
                                    src="{{ asset('storage/' . $company->stamp) }}"
                                    alt="Tampon"
                                    style="
                                        max-width: 100%;
                                        max-height: 120px;
                                        object-fit: contain;
                                    "
                                >

                            </div>

                        @else

                            <div
                                class="border rounded-3 p-4 mb-3 bg-light text-muted text-center"
                                style="min-height: 150px;"
                            >

                                <i class="bi bi-patch-check fs-1 d-block mb-2"></i>

                                Aucun tampon configuré

                            </div>

                        @endif


                        <label
                            for="stamp"
                            class="form-label fw-semibold"
                        >
                            {{ $company->stamp
                                ? 'Remplacer le tampon'
                                : 'Ajouter un tampon'
                            }}
                        </label>

                        <input
                            type="file"
                            name="stamp"
                            id="stamp"
                            class="form-control"
                            accept=".jpg,.jpeg,.png,.webp"
                        >

                        <small class="text-muted d-block mt-2">
                            JPG, PNG ou WEBP — maximum 2 Mo.
                        </small>

                    </div>

                </div>

            </div>


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

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

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

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

                            <div
                                class="rounded-3 d-flex align-items-center justify-content-center me-3"
                                style="
                                    width: 45px;
                                    height: 45px;
                                    background: rgba(13, 110, 253, 0.10);
                                    color: #0d6efd;
                                "
                            >
                                <i class="bi bi-palette fs-5"></i>
                            </div>

                            <div>

                                <h5 class="mb-1">
                                    Couleurs des documents
                                </h5>

                                <small class="text-muted">
                                    Ces couleurs seront utilisées
                                    dans les futurs documents PDF.
                                </small>

                            </div>

                        </div>


                        <div class="row g-4">

                            {{-- Couleur principale --}}
                            <div class="col-md-6">

                                <label
                                    for="document_primary_color"
                                    class="form-label fw-semibold"
                                >
                                    Couleur principale
                                </label>

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

                                    <input
                                        type="color"
                                        name="document_primary_color"
                                        id="document_primary_color"
                                        class="form-control form-control-color"
                                        value="{{ old(
                                            'document_primary_color',
                                            $company->document_primary_color ?? '#198754'
                                        ) }}"
                                        title="Choisir la couleur principale"
                                    >

                                    <input
                                        type="text"
                                        class="form-control"
                                        value="{{ old(
                                            'document_primary_color',
                                            $company->document_primary_color ?? '#198754'
                                        ) }}"
                                        readonly
                                        id="primaryColorText"
                                    >

                                </div>

                                <small class="text-muted">
                                    Utilisée pour les titres, éléments principaux
                                    et accents.
                                </small>

                            </div>


                            {{-- Couleur secondaire --}}
                            <div class="col-md-6">

                                <label
                                    for="document_secondary_color"
                                    class="form-label fw-semibold"
                                >
                                    Couleur secondaire
                                </label>

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

                                    <input
                                        type="color"
                                        name="document_secondary_color"
                                        id="document_secondary_color"
                                        class="form-control form-control-color"
                                        value="{{ old(
                                            'document_secondary_color',
                                            $company->document_secondary_color ?? '#f28c28'
                                        ) }}"
                                        title="Choisir la couleur secondaire"
                                    >

                                    <input
                                        type="text"
                                        class="form-control"
                                        value="{{ old(
                                            'document_secondary_color',
                                            $company->document_secondary_color ?? '#f28c28'
                                        ) }}"
                                        readonly
                                        id="secondaryColorText"
                                    >

                                </div>

                                <small class="text-muted">
                                    Utilisée pour les accents secondaires
                                    et certains éléments visuels.
                                </small>

                            </div>

                        </div>


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

                            <label class="form-label fw-semibold">
                                Aperçu
                            </label>

                            <div
                                id="documentColorPreview"
                                class="rounded-3 p-4"
                                style="
                                    background:
                                        {{ $company->document_primary_color ?? '#198754' }};
                                    color: #ffffff;
                                "
                            >

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

                                    <div>

                                        <div class="fw-bold fs-5">
                                            {{ $company->name }}
                                        </div>

                                        <small>
                                            Aperçu des couleurs de vos documents
                                        </small>

                                    </div>

                                    <span
                                        id="secondaryColorPreview"
                                        class="badge rounded-pill px-3 py-2"
                                        style="
                                            background:
                                                {{ $company->document_secondary_color ?? '#f28c28' }};
                                        "
                                    >
                                        NafaPOS
                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>


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

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

                        Enregistrer

                    </button>

                </div>

            </div>

        </div>

    </form>

</div>

@endsection


@push('scripts')

<script>

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

    const primaryColor =
        document.getElementById('document_primary_color');

    const secondaryColor =
        document.getElementById('document_secondary_color');

    const primaryText =
        document.getElementById('primaryColorText');

    const secondaryText =
        document.getElementById('secondaryColorText');

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

    const secondaryPreview =
        document.getElementById('secondaryColorPreview');


    function updateColors() {

        if (primaryColor) {

            primaryText.value =
                primaryColor.value;

            preview.style.backgroundColor =
                primaryColor.value;
        }

        if (secondaryColor) {

            secondaryText.value =
                secondaryColor.value;

            secondaryPreview.style.backgroundColor =
                secondaryColor.value;
        }

    }


    if (primaryColor) {
        primaryColor.addEventListener(
            'input',
            updateColors
        );
    }


    if (secondaryColor) {
        secondaryColor.addEventListener(
            'input',
            updateColors
        );
    }


    updateColors();

});

</script>

@endpush