@extends('layouts.auth')

@section('title', 'Créer votre compte - NafaPOS')

@section('content')
    <div class="nafa-auth-card nafa-register-card">

        <div class="nafa-auth-header">

            <div class="nafa-auth-logo">
                <i class="bi bi-shop"></i>
            </div>

            <div class="nafa-auth-brand">
                Nafa<span>POS</span>
            </div>

            <p class="nafa-auth-subtitle">
                Créez votre espace de gestion
            </p>

        </div>


        <div class="nafa-auth-body-content">

            @if ($errors->any())

                <div class="nafa-auth-alert">

                    <div class="fw-semibold mb-1">
                        Vérifiez les informations saisies.
                    </div>

                    <ul class="mb-0 ps-3">

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

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

                        @endforeach

                    </ul>

                </div>

            @endif


            <form
                method="POST"
                action="{{ route('register') }}"
            >

                @csrf


                {{-- =====================================================
                    ENTREPRISE
                ====================================================== --}}

                <div class="mb-3">

                    <div class="nafa-register-section-title">

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

                        Informations de l'entreprise

                    </div>

                </div>


                <div class="mb-3">

                    <label
                        for="company_name"
                        class="nafa-auth-label"
                    >
                        Nom de l'entreprise
                    </label>

                    <div class="nafa-auth-input-group">

                        <i class="bi bi-building nafa-auth-input-icon"></i>

                        <input
                            id="company_name"
                            type="text"
                            class="form-control nafa-auth-input @error('company_name') is-invalid @enderror"
                            name="company_name"
                            value="{{ old('company_name') }}"
                            placeholder="Ex : Boutique Diarra"
                            required
                            autofocus
                        >

                    </div>

                    @error('company_name')

                        <div class="nafa-auth-error">
                            {{ $message }}
                        </div>

                    @enderror

                </div>


                <div class="row">

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

                        <div class="mb-3">

                            <label
                                for="company_email"
                                class="nafa-auth-label"
                            >
                                Email entreprise
                            </label>

                            <input
                                id="company_email"
                                type="email"
                                class="form-control nafa-auth-input"
                                name="company_email"
                                value="{{ old('company_email') }}"
                                placeholder="contact@entreprise.com"
                            >

                            @error('company_email')

                                <div class="nafa-auth-error">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                    </div>


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

                        <div class="mb-3">

                            <label
                                for="company_phone"
                                class="nafa-auth-label"
                            >
                                Téléphone
                            </label>

                            <input
                                id="company_phone"
                                type="text"
                                class="form-control nafa-auth-input"
                                name="company_phone"
                                value="{{ old('company_phone') }}"
                                placeholder="+223 XX XX XX XX"
                            >

                            @error('company_phone')

                                <div class="nafa-auth-error">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                    </div>

                </div>


                <div class="row">

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

                        <div class="mb-3">

                            <label
                                for="country"
                                class="nafa-auth-label"
                            >
                                Pays
                            </label>

                            <input
                                id="country"
                                type="text"
                                class="form-control nafa-auth-input"
                                name="country"
                                value="{{ old('country', 'Mali') }}"
                                required
                            >

                            @error('country')

                                <div class="nafa-auth-error">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                    </div>


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

                        <div class="mb-3">

                            <label
                                for="city"
                                class="nafa-auth-label"
                            >
                                Ville
                            </label>

                            <input
                                id="city"
                                type="text"
                                class="form-control nafa-auth-input"
                                name="city"
                                value="{{ old('city') }}"
                                placeholder="Bamako"
                                required
                            >

                            @error('city')

                                <div class="nafa-auth-error">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                    </div>

                </div>


                <div class="mb-4">

                    <label
                        for="company_address"
                        class="nafa-auth-label"
                    >
                        Adresse
                    </label>

                    <textarea
                        id="company_address"
                        name="company_address"
                        class="form-control nafa-auth-input"
                        rows="2"
                        placeholder="Adresse de l'entreprise"
                    >{{ old('company_address') }}</textarea>

                    @error('company_address')

                        <div class="nafa-auth-error">
                            {{ $message }}
                        </div>

                    @enderror

                </div>


                {{-- =====================================================
                    PROPRIETAIRE
                ====================================================== --}}

                <div class="mb-3">

                    <div class="nafa-register-section-title">

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

                        Votre compte

                    </div>

                </div>


                <div class="mb-3">

                    <label
                        for="name"
                        class="nafa-auth-label"
                    >
                        Nom complet
                    </label>

                    <div class="nafa-auth-input-group">

                        <i class="bi bi-person nafa-auth-input-icon"></i>

                        <input
                            id="name"
                            type="text"
                            class="form-control nafa-auth-input"
                            name="name"
                            value="{{ old('name') }}"
                            placeholder="Votre nom complet"
                            required
                        >

                    </div>

                    @error('name')

                        <div class="nafa-auth-error">
                            {{ $message }}
                        </div>

                    @enderror

                </div>


                <div class="mb-3">

                    <label
                        for="email"
                        class="nafa-auth-label"
                    >
                        Adresse e-mail
                    </label>

                    <div class="nafa-auth-input-group">

                        <i class="bi bi-envelope nafa-auth-input-icon"></i>

                        <input
                            id="email"
                            type="email"
                            class="form-control nafa-auth-input"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="vous@email.com"
                            required
                        >

                    </div>

                    @error('email')

                        <div class="nafa-auth-error">
                            {{ $message }}
                        </div>

                    @enderror

                </div>


                <div class="mb-3">

                    <label
                        for="password"
                        class="nafa-auth-label"
                    >
                        Mot de passe
                    </label>

                    <div class="nafa-auth-input-group">

                        <i class="bi bi-lock nafa-auth-input-icon"></i>

                        <input
                            id="register_password"
                            type="password"
                            class="form-control nafa-auth-input"
                            name="password"
                            placeholder="Minimum 8 caractères"
                            required
                            style="padding-right: 45px;"
                        >

                        <button
                            type="button"
                            class="nafa-password-toggle"
                            data-password-toggle="register_password"
                            aria-label="Afficher le mot de passe"
                        >
                            <i class="bi bi-eye"></i>
                        </button>

                    </div>

                    @error('password')

                        <div class="nafa-auth-error">
                            {{ $message }}
                        </div>

                    @enderror

                </div>


                <div class="mb-3">

                    <label
                        for="password-confirm"
                        class="nafa-auth-label"
                    >
                        Confirmer le mot de passe
                    </label>

                    <div class="nafa-auth-input-group">

                        <i class="bi bi-lock-fill nafa-auth-input-icon"></i>

                        <input
                            id="password-confirm"
                            type="password"
                            class="form-control nafa-auth-input"
                            name="password_confirmation"
                            placeholder="Confirmez votre mot de passe"
                            required
                            style="padding-right: 45px;"
                        >

                        <button
                            type="button"
                            class="nafa-password-toggle"
                            data-password-toggle="password-confirm"
                            aria-label="Afficher le mot de passe"
                        >
                            <i class="bi bi-eye"></i>
                        </button>

                    </div>

                </div>


                <button
                    type="submit"
                    class="nafa-auth-button"
                >

                    <i class="bi bi-person-plus"></i>

                    Créer mon compte

                </button>

            </form>

        </div>


        <div class="nafa-auth-footer">

            Vous avez déjà un compte ?

            <a href="{{ route('login') }}">
                Se connecter
            </a>

        </div>

    </div>
@endsection