@extends('layouts.master')

@section('title', 'Informations société - NafaPOS')
@section('page-title', 'Informations société')

@section('content')

<div class="container-fluid">

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

        <div>
            <h4 class="mb-1 fw-bold">
                Informations société
            </h4>

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

        <a
            href="{{ route('client.settings') }}"
            class="btn btn-light border"
        >
            <i class="bi bi-arrow-left me-1"></i>
            Retour
        </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">

            <div class="fw-semibold mb-2">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Vérifiez les informations suivantes :
            </div>

            <ul class="mb-0">

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

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

                @endforeach

            </ul>

        </div>

    @endif


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

        @csrf
        @method('PUT')


        <div class="row g-4">

            {{-- Informations générales --}}
            <div class="col-lg-8">

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

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

                        <h5 class="mb-0 fw-semibold">
                            <i class="bi bi-building me-2 text-success"></i>
                            Informations générales
                        </h5>

                    </div>

                    <div class="card-body">

                        <div class="row g-3">

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

                                <label class="form-label">
                                    Nom de l'entreprise
                                    <span class="text-danger">*</span>
                                </label>

                                <input
                                    type="text"
                                    name="name"
                                    class="form-control"
                                    value="{{ old('name', $company->name) }}"
                                    required
                                >

                            </div>


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

                                <label class="form-label">
                                    Slogan
                                </label>

                                <input
                                    type="text"
                                    name="slogan"
                                    class="form-control"
                                    value="{{ old('slogan', $company->slogan) }}"
                                    placeholder="Votre slogan"
                                >

                            </div>


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

                                <label class="form-label">
                                    Email
                                </label>

                                <input
                                    type="email"
                                    name="email"
                                    class="form-control"
                                    value="{{ old('email', $company->email) }}"
                                >

                            </div>


                            {{-- Téléphone --}}
                            <div class="col-md-6">

                                <label class="form-label">
                                    Téléphone
                                </label>

                                <input
                                    type="text"
                                    name="phone"
                                    class="form-control"
                                    value="{{ old('phone', $company->phone) }}"
                                >

                            </div>


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

                                <label class="form-label">
                                    Adresse
                                </label>

                                <textarea
                                    name="address"
                                    rows="3"
                                    class="form-control"
                                    placeholder="Adresse complète"
                                >{{ old('address', $company->address) }}</textarea>

                            </div>


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

                                <label class="form-label">
                                    Pays
                                </label>

                                <input
                                    type="text"
                                    name="country"
                                    class="form-control"
                                    value="{{ old('country', $company->country) }}"
                                >

                            </div>


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

                                <label class="form-label">
                                    Ville
                                </label>

                                <input
                                    type="text"
                                    name="city"
                                    class="form-control"
                                    value="{{ old('city', $company->city) }}"
                                >

                            </div>


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

                                <label class="form-label">
                                    Quartier
                                </label>

                                <input
                                    type="text"
                                    name="district"
                                    class="form-control"
                                    value="{{ old('district', $company->district) }}"
                                >

                            </div>


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

                                <label class="form-label">
                                    NIF
                                </label>

                                <input
                                    type="text"
                                    name="nif"
                                    class="form-control"
                                    value="{{ old('nif', $company->nif) }}"
                                >

                            </div>


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

                                <label class="form-label">
                                    RCCM
                                </label>

                                <input
                                    type="text"
                                    name="rccm"
                                    class="form-control"
                                    value="{{ old('rccm', $company->rccm) }}"
                                >

                            </div>


                            {{-- Compte bancaire --}}
                            <div class="col-12">

                                <label class="form-label">
                                    Compte bancaire
                                </label>

                                <input
                                    type="text"
                                    name="bank_account"
                                    class="form-control"
                                    value="{{ old('bank_account', $company->bank_account) }}"
                                    placeholder="Numéro de compte bancaire"
                                >

                            </div>

                        </div>

                    </div>

                </div>

            </div>


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

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

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

                        <h5 class="mb-0 fw-semibold">
                            <i class="bi bi-image me-2 text-success"></i>
                            Logo
                        </h5>

                    </div>

                    <div class="card-body text-center">

                        <div class="nafa-company-logo-preview mb-3">

                            @if($company->logo)

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

                            @else

                                <i class="bi bi-building"></i>

                            @endif

                        </div>


                        <label class="form-label text-start w-100">
                            Logo de l'entreprise
                        </label>

                        <input
                            type="file"
                            name="logo"
                            class="form-control"
                            accept="image/png,image/jpeg,image/jpg,image/webp"
                        >

                        <div class="form-text text-start">
                            PNG, JPG ou WEBP. Taille maximale : 2 Mo.
                        </div>

                    </div>

                </div>


                {{-- Aperçu --}}
                <div class="card border-0 shadow-sm mt-4">

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

                        <h5 class="mb-0 fw-semibold">
                            <i class="bi bi-eye me-2 text-success"></i>
                            Aperçu
                        </h5>

                    </div>

                    <div class="card-body">

                        <div class="company-preview">

                            @if($company->logo)

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

                            @else

                                <div class="company-preview-logo">
                                    <i class="bi bi-building"></i>
                                </div>

                            @endif

                            <div>

                                <div class="fw-bold">
                                    {{ $company->name ?: 'Nom de votre entreprise' }}
                                </div>

                                @if($company->slogan)

                                    <div class="text-muted small">
                                        {{ $company->slogan }}
                                    </div>

                                @endif

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- Boutons --}}
        <div class="d-flex justify-content-end gap-2 mt-4">

            <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
            </button>

        </div>

    </form>

</div>

@endsection


@push('styles')

<style>

.nafa-company-logo-preview {
    width: 150px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;

    border: 1px dashed #ced4da;
    border-radius: 12px;

    background: #f8f9fa;

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

    overflow: hidden;
}

.nafa-company-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nafa-company-logo-preview i {
    font-size: 50px;
    color: #198754;
}

.company-preview {
    display: flex;
    align-items: center;
    gap: 15px;
}

.company-preview img,
.company-preview-logo {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    object-fit: contain;
}

.company-preview-logo {
    background: #e8f6ee;
    color: #198754;

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

    font-size: 24px;
}

</style>

@endpush