@extends('layouts.admin')
@section('content')
@section('headerTitle')
     Emitenti si destinatari
@endsection
@section('breadcrumbs')
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-white opacity-75">
    <a href="{{route('admin.index')}}" class="text-white text-hover-primary">Acasa</a>
</li>
<li class="breadcrumb-item">
    <span class="bullet bg-white opacity-75 w-5px h-2px"></span>
</li>
<li class="breadcrumb-item text-white opacity-75">
    <a href="{{route('admin.users')}}" class="text-white text-hover-primary">Emitenti si destinatari</a>
</li>
<li class="breadcrumb-item">
    <span class="bullet bg-white opacity-75 w-5px h-2px"></span>
</li>
<li class="breadcrumb-item text-white opacity-75">
    Adaugă
</li>
@endsection
    <div class="container mt-5" id="app">
        <div class="row">
            <div class="col-md-8">
                <x-auth-validation-errors class="mb-4" :errors="$errors" />
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.users.store') }}">
                        @csrf

                        <div class="flex">
                            <div class="flex items-center  mr-10">
                                <x-input id="person_type_fizic"
                                         class=" w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                         type="radio" name="person_type" value="fizica" checked required />
                                <label
                                        for="person_type_fizic"
                                        class="ml-2 fs-5 text-gray-900 dark:text-gray-300"
                                >Persoana
                                    fizica</label>
                            </div>
                            <div class="flex items-center mr-2">
                                <x-input id="person_type_juridic"
                                         class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                         type="radio" name="person_type" value="juridica" required   />
                                <label
                                        for="person_type_juridic"
                                        class="ml-2 text-sm fs-5 text-gray-900 dark:text-gray-300">
                                    Persoana juridica</label>
                            </div>

                        </div>
                        @error('person_type')
                        <div class="alert alert-danger text-red-600">{{ $message }}</div>
                        @enderror
                        <div class="hidden" id="juridicInputs">
                            <div class="w-full mt-10 mb-10">
                                <p class="mt-4 font-weight-bold">Informatii reprezentant:</p>
                                <div class="mt-4 mr-2">
                                    <x-label for="company_name" :value="__('Nume companie')" />

                                    <x-input id="company_name"
                                             class="block w-full @error('company_name') is-invalid @enderror" type="text"
                                             name="company_name" placeholder="Nume companie"  />
                                    @error('company_name')
                                    <div class="alert alert-danger text-red-600">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mt-4">
                                    <x-label for="cui" :value="__('CUI')" />

                                    <x-input id="cui" class="block  w-full @error('cui') is-invalid @enderror"
                                             type="text" name="cui" placeholder="CUI" />
                                    @error('cui')
                                    <div class="alert alert-danger text-red-600">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

{{--                        <label class="mt-4 font-weight-bold">Informatii de baza:</label>--}}
                        <!-- Name -->
                        <div class="mt-4">
                            <x-label for="name" :value="__('Nume si prenume')" />

                            <x-input id="name" class="block mt-1 w-full @error('name') is-invalid @enderror"
                                     type="text" name="name" :value="old('name')" placeholder="Nume si prenume" required autofocus />
                            @error('name')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mt-4">
                            <x-label for="cnp" :value="__('CNP')" />

                            <x-input id="cnp" class="block mt-1 w-full @error('cnp') is-invalid @enderror"
                                     type="text" name="cnp" required :value="old('cnp')" placeholder="CNP" required />
                            @error('cnp')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Email Address -->
                        <div class="mt-4">
                            <x-label for="email" :value="__('Email')" />

                            <x-input id="email" class="block mt-1 w-full @error('email') is-invalid @enderror"
                                     type="email" name="email" :value="old('email')" placeholder="Email" required />
                            @error('email')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mt-4">
                            <x-label for="phone" :value="__('Nr. telefon')" />

                            <x-input id="phone"
                                     class="block mt-1 w-full form-input @error('phone') is-invalid @enderror" type="tel"
                                     name="phone" :value="old('phone')" required />
                            <span id="valid-msg" class="hidden text-green-600">Valid</span>
                            <span id="error-msg" class="hidden text-red-600"></span>
                            @error('phone')
                            <div class="alert alert-danger text-red-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="flex mr-2 mt-15">
                            <div class="flex items-center mr-10">
                                <x-input v-model="selectedOption" id="password_mode_form"
                                         class="custom-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                         type="radio" name="password_mode" value="include" checked required />
                                <label for="password_mode_form"
                                        class="ml-2 fs-5 text-gray-900 dark:text-gray-300"
                                >Adauga Parola</label>
                            </div>

                            <div class="flex items-center mr-2">
                                <x-input v-model="selectedOption" id="password_mode_email"
                                         class="custom-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                         type="radio" name="password_mode" value="email" required   />
                                <label
                                        for="password_mode_email"
                                        class="ml-2 text-sm fs-5 text-gray-900 dark:text-gray-300">
                                    Genereaza parola automat si trimite pe email</label>
                            </div>

                        </div>

                        <div v-if="selectedOption === 'include'" >
                            <!-- Password -->
                            <div class="mt-4">
                                <x-label for="password" :value="__('Parola')" />

                                <x-input id="password" class="block mt-1 w-full @error('password') is-invalid @enderror"
                                         type="password" name="password" placeholder="Parola" required autocomplete="new-password" />
                                @error('password')
                                <div class="alert alert-danger text-red-600">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Confirm Password -->
                            <div class="mt-4">
                                <x-label for="password_confirmation" :value="__('Confirma parola')" />

                                <x-input id="password_confirmation"
                                         class="block mt-1 w-full @error('password_confirmation') is-invalid @enderror"
                                         type="password" name="password_confirmation" placeholder="Confirmare parola" required />
                                @error('password_confirmation')
                                <div class="alert alert-danger text-red-600">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-center justify-content-center mt-4">
                            <x-button type="submit" class="ml-4" id="register-button">
                                Adaugă
                            </x-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>
    new Vue({
        el: '#app',
        data: {
            selectedOption: 'include',
        },
    });
</script>

@endsection