@extends('layouts.site_layout')

@section('content')

<section class="py-5 my-0 my-lg-5">
    <div class="container">
        <!-- <div class="breadcrumbs">
            <span>
                <a href="{{url('/')}}" class="fs-24 text-decoration-none text-dark opacity-5">Home <span class="px-lg-4 px-0">></span> </a>
                <a href="" class="fs-24 text-decoration-none text-dark opacity-5">Members Corner <span class="px-lg-4 px-0">></span> </a>
                <span class="fs-24 text-decoration-none text-dark">Member Login</span>
            </span>
        </div> -->
        <h1 class="fs-42 mt-5 mb-4">Sign In to IESA</h1>
        <div class="card border-0 shadow br-30">
            <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-5 py-5 px-lg-5 px-4 align-self-center">
                    <!-- Session Status -->
                    <x-auth-session-status class="mb-4" :status="session('status')" />

                    <!-- Validation Errors -->
                    <x-auth-validation-errors class="mb-4" :errors="$errors" />
                    
                    <h2 class="fs-40 text-center mb-4">Login</h2>
                    <form method="POST" action="{{route('login')}}"  class="row member-register g-3" >
                        @csrf
                        <!-- <div class="col-lg-12">
                            <input type="text" class="form-control fs-18" id="full_name" placeholder="Full Name" name="full_name">
                        </div> -->
                        <div class="col-lg-12">
                            <input type="email" class="form-control fs-18" id="email" placeholder="Email Address" name="email">
                        </div>
                        <div class="col-lg-12">
                            <input type="password" class="form-control fs-18" id="password"
                                placeholder="Create Password" name="password">
                        </div>
                        <a href="{{ route('password.request') }}" class="text-decoration-none mt-2">
                            <p class="fs-12 text-blue mb-2">Forgot Password?</p>
                        </a>
                        <!-- <div class="col-lg-12">
                            <label>Select Membership Type</label>
                            <select  class="form-select fs-18 memberTypeMultiple" name="member_type[]" id="member_type_id" multiple="true">
                            </select>
                        </div> -->
                        <!-- <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="agree_status" name="agree_status" value="1">
                                <label class="form-check-label fs-12" for="gridCheck">
                                    I agree to the terms and conditions
                                </label>
                            </div>
                        </div> -->
                        <div class="col-12">
                            <button type="submit" class="py-2 btn fs-18 bg-orange text-white w-100">Sign in</button>
                        </div>
                        <!-- <div class="col-12">
                            <button type="submit" class="py-2 btn fs-18 bg-btn-blue text-white w-100"><img
                                    src="{{asset('images/linkedin-img.svg')}}" alt="Linkedin"
                                    class="img-fluid linkedin-signup"> Sign in with Linkedin</button>
                        </div> -->
                    </form>
                </div>
                <div class="col-lg-1"></div>
                <div class="col-lg-5 member-register">
                    <img src="{{asset('images/register-form-img.png')}}" alt="" class="img-fluid w-100 h-100 br_18">
                </div>
            </div>
        </div>
    </div>
</section>
<script>
$('.memberTypeMultiple').select2();
$('.memberTypeMultiple').on('change', function(event) {
    event.preventDefault();
    if ($(this).val() == '0') {
        // select all options except first one
        $('.memberTypeMultiple > option:not(:first)').prop('selected', true);
        
        // unselect "Select All" option
        $('.memberTypeMultiple > option:first').prop('selected', false);
        $('.memberTypeMultiple').trigger('change');
    }
});
</script>
@endsection