@extends('auth.layout')

@section('name')
Connexion
@endsection
@section('content')

    <div class="custom-tab-1">
        <div class="d-flex justify-content-center">
            @include('layouts.alert')
        </div>
        <ul class="nav nav-tabs d-flex justify-content-center">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#email"><i class="la la-envelope me-2"></i> Connexion Email</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#phone"><i class="la la-phone me-2"></i> Connexion Téléphone</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="email" role="tabpanel">
                <div class="pt-4">
                    <form action="{{route('auth.otp')}}" method="post"> @csrf
                        <div class="mb-3">
                            <input type="text"  class="form-control" name="type" value="email" required readonly hidden>

                            <label><strong>Identifiant</strong></label>
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label><strong>Mot de passe</strong></label>
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>



                        <div class="mb-3">
                            <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                            <label class="form-check-label" for="remember">
                                Garder ma session
                            </label>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-block">Connexion</button>
                            @if (Route::has('password.request'))
                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Problème de connexion ?
                                </a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
            <div class="tab-pane fade" id="phone">
                <div class="pt-4">
                    <form action="{{route('login')}}" class="row" method="post"> @csrf
                        <input type="text"  class="form-control" name="type" value="phone" required readonly hidden>

                        <div class="mb-3 col-md-5">
                            <label><strong>Indicatif </strong></label>

                            <select class="default-select form-control "  name="country_code" id="country_code" required="">
                                @foreach (Countries() as $pays)
                                    <option value="{{"+".$pays->country_code}}" @if ($pays->country_code == "+221") selected @endif>{{"+".$pays->country_code." ".$pays->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3 col-md-7">
                            <label><strong>Téléphone</strong></label>
                            <input id="suffixe_phone" type="number" class="form-control @error('email') is-invalid @enderror" name="suffixe_phone" value="{{ old('suffixe_phone') }}" required autocomplete="suffixe_phone" autofocus>

                            @error('suffixe_phone')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label><strong>Mot de passe</strong></label>
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>



                        <div class="mb-3">
                            <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                            <label class="form-check-label" for="remember">
                                Garder ma session
                            </label>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-block">Connexion</button>
                            @if (Route::has('password.request'))
                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Problème de connexion ?
                                </a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>



@endsection