@extends('layout')

@section('content')
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-add mr-2"></i> <span class="font-weight-semibold"></span>Ajouter
                    un propriétaire</h4>
                <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
            </div>
        </div>
    </div>
    <div class="content">
        <form action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
            {{ csrf_field() }}
            <div class="form-group col-10">
                <label>Nom:</label>
                @if ($errors->has('name'))
                    <input type="text" name="name" class="form-control alert-danger" placeholder="Ce champ est invalide!">
                @else
                    <input type="text" name="name" class="form-control" placeholder="Nom">
                @endif
            </div>
            <div class="form-group col-10">
                <label>Email:</label>
                @if ($errors->has('email'))
                    <input type="email" name="email" class="form-control alert-danger" placeholder="Ce champ est invalide!">
                    <div class="alert alert-danger mt-1">
                        {{ $errors->first('email') }}
                    </div>
                @else
                    <input type="email" name="email" class="form-control" placeholder="Email">
                @endif
            </div>
            <div class="form-group col-10">
                <label>Téléphone:</label>
                <div class="input-group">
                    <div class="input-group col-2">
                        <select class="select-search dropdown-toggle" name="prefix_phone">
                            @foreach ($phones as $phone)
                                <option value="{{ $phone }}">{{ $phone }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-10">
                        @if ($errors->has('phone'))
                            <input type="text" name="phone" class="form-control  alert-danger"
                                placeholder="Ce champ est invalide!">
                        @else
                            <input type="text" name="phone" class="form-control" placeholder="Téléphone">
                        @endif
                    </div>
                </div>
            </div>
            <div class="form-group col-12">
                <label>Mot de passe:</label>
                <div class="input-group">
                    <div class="input-group col-10">
                        @if ($errors->has('password'))
                            <input type="text" name="password" class="form-control alert-danger"
                                placeholder="Ce champ est invalide!">
                        @else
                            <input type="password" name="password" id="id_password" class="form-control"
                                placeholder="Mot de passe">
                        @endif
                    </div>
                    <div class="input-group col-2">
                        <i class="far fa-eye" id="togglePassword"></i>
                    </div>
                </div>
            </div>
            <div class="form-group col-10">
                <input type="text" name="role_id" hidden value="8">
                <button type="submit" class="btn bg-success">
                    <i class="icon-add"></i> Ajouter
                </button>
            </div>
        </form>
    </div>
    <script>
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#id_password');

        togglePassword.addEventListener('click', function (e) {
            // toggle the type attribute
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            // toggle the eye slash icon
            this.classList.toggle('fa-eye-slash');
        });
    </script>
@endsection