@extends('layout.master', ['title' => 'Sign In'])

@section('content')
    <div class="container mb-5">
        <div class="signup-img-wrapper">
            <div class="left-img">
                <img src="{{ asset('assets/client/images/dl.beatsnoop 1.png') }}" alt="" />
            </div>
            <div class="signup">
                <form class="signup-form-wrapper" action="{{ route('sign_in') }}" method="POST">
                    @csrf
                    <div class="your-profile-text">
                        <h5>Sign In</h5>
                    </div>
                    <div class="ac-input-field-wrapper">
                        <div class="ac-wrapper full-widh-wrapper">
                            <p>Email</p>
                            <div class="inputfield-wrapper @error('email') is-invalid @enderror">
                                <input class="inputfield  " type="text" name="email" placeholder="example@gmail.com" />
                                @error('email')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <div class="ac-input-field-wrapper">
                        <div class="ac-wrapper full-widh-wrapper ">
                            <p>Password</p>
                            <div class="inputfield-wrapper @error('password') is-invalid @enderror ">
                                <input class="inputfield" type="password" name="password" placeholder="Password" />
                                @error('password')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <div class="d-flex justify-content-between">
                        <div class="red-to-signup">
                            <p>Don't have any account?</p>
                            <a href="{{ route('home.signUpPage') }}" class="cancel btn" type="button">Sign Up</a>
                        </div>
                        <div class="red-to-signup ">
                            <a href="javascript:void(0)" class="text-dark" data-bs-toggle="modal"
                                data-bs-target="#exampleModal">
                                Forget Password?
                            </a>
                        </div>
                    </div>



                    <div class="save-cancel-wrapper">
                        <a href="{{ url()->previous() }}" class="cancel btn" type="button">Cancel</a>
                        <button class="save btn" type="submit">Sign In</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('forgetPassword') }}" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Forget Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <label for="email" class="form-label">Email *</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="Enter your email">
                            @error('email')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary">Send Otp</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('custom_css')
    <link rel="stylesheet" href="{{ asset('assets/client/css/signin.css') }}">
@endsection

@section('scripts')
    <script>
        $(document).ready(function(){
            @error('email')
                $("#exampleModal").modal('show');
            @enderror
        });
    </script>
@endsection