@extends('layouts.app')

@section('content')

<div class="container-fluid login">
    <div class="row">
        <div class="col-md-4 d-flex align-self-center justify-content-center bg-leftside ">
            <img src="{{ asset('images/logo.svg') }}" alt="" width="50%">
        </div>
        <div class="col-md-8 bg-white">
            <div class="form-area">
                <div class="mb-50">
                    <h1 class="h1-bold">{{ __('Connexion') }}</h1>
                    <p class="discription">Connecte toi avec ton numéro de téléphone,<br> tu vas recevoir un code de vérification.</p>
                </div>

                <div class="">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <div class="row g-3 mb-30">
                            <div class="col-md-2">
                                <label for="inputEmail4" class="form-label label mb-12">Indicatif</label>
                                <input type="text" class="input-text" placeholder="+ 225" aria-label="" name="indicatif" value="+225" disabled>
                            </div>
                            <div class="col-md-6">
                                <label for="inputEmail4" class="form-label label mb-12">Téléphone</label>
                                <input id="phone" type="number" class="input-text @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" placeholder="07 00 00 00 00" autocomplete="phone" maxlength="10">

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

                        <div class="row mb-0">
                            <div class="col-md-8">
                                <button type="submit" class="cta-primary">
                                    {{ __('Envoyer le code') }}
                                </button>
                            </div>
                        </div>

                    </form>

                    <!-- <div class="row g-1 justify-content-start position-absolute bottom-0 mb-5">
                        <div class="col-12">
                            <div class="legend mb-10">
                                <a href="{{ route('forget.password.get') }}" class="">Mot de passe oublié ?<br></a>
                            </div>
                        </div>
                    </div> -->

                    <div class="row g-1 justify-content-start position-absolute bottom-0 mb-5">
                        <div class="col-12">
                            <div class="legend mb-10">
                                <span>Pas encore de compte ?<br> Inscris-toi en téléchargeant l’application MaCarteJeunes</span>
                            </div>
                        </div>
                        <div class="col-3 pe-20">
                            <img src="{{ asset('images/googleplay.svg') }}" alt="" width="100%">
                        </div>
                        <div class="col-3">
                            <img src="{{ asset('images/appstore.svg') }}" alt="" width="100%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>

<script>
    $(function() {
        $('.input-text ').bind('input', function() {
            $(this).val(function(_, v) {
                return v.replace(/\s+/g, '');
            });
        });
    });
</script>