@extends('front.layouts.app', ['title' => 'My Account'])

@section('content')
@include('front.layouts.app-header')

    <section class="page_banner" style="background:rgb(0 0 0 / 60%) url(images/my_acc_bg.jpg) center / cover no-repeat;background-blend-mode:color; ">
        <div class="container">
            <div class="row">
                <div class="col col-12">
                    <div class="page_banner_title">
                        <h1>My Account</h1>
                    </div>
                    <div class="c_breadcrumb">
                        <ul class="c_breadcrumb_inner">
                            <li class="c_breadcrumb_item">
                                <a href="#!">Home</a>
                            </li>
                            <!-- <li class="c_breadcrumb_item">
                                <a href="#!">Wines</a>
                            </li> -->
                            <li class="c_breadcrumb_item">My Account</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="my_acc_sec off_bg">
        <div class="container">
            <div class="row">
                <div class="col col-3">
                    @include('front.my-account.left-sidebar')
                </div>
                <div class="col col-9">
                    <div class="my_acc_main_wrap">
                        <div class="my_acc_main_inner card">
                            <form action="{{route('update-profile')}}" method="POST" data-parsley-validate="">
                            @csrf
                                <div class="card_title">
                                    <h3>Account information</h3>
                                </div>
                                <div class="card_content">
                                    <div class="row">
                                        <div class="col col-6">
                                            <div class="c_filed">
                                                <label for="first_name">First name*</label>
                                                <input type="text" name="first_name" value="{{auth()->user()->name}}" id="first_name" placeholder="Enter first name" required data-parsley-required-message="Name is required">
                                            </div>
                                        </div>
                                        <div class="col col-6">
                                            <div class="c_filed">
                                                <label for="last_name">Last name*</label>
                                                <input type="text" name="last_name" value="{{auth()->user()->last_name}}" id="last_name" placeholder="Enter last name" required data-parsley-required-message="Last Name is required">
                                            </div>
                                        </div>
                                        <div class="col col-6">
                                            <div class="c_filed">
                                                <label for="email">Email*</label>
                                                <input type="text" name="email" value="{{auth()->user()->email}}" id="email" placeholder="Enter email" required data-parsley-required-message="Email is required">
                                            </div>
                                        </div>
                                        <div class="col col-6">
                                            <div class="c_filed">
                                                <label for="PhoneNumber_1">Telephone*</label>
                                                <input type="tel" name="phone_number" value="{{auth()->user()->phone_number}}" id="PhoneNumber_1" placeholder="Enter phone number" class="PhoneNumber" data-parsley-required-message="Phone Number is required">
                                            </div>
                                        </div>
                                        <div class="col col-6">
                                            <div class="c_filed">
                                                <label for="birth_date">Date Of Birth*</label>
                                                <input type="date" name="birth_date" id="birth_date" required value="{{auth()->user()->birth_date}}" data-parsley-required-message="Date of birth is required">
                                            </div>
                                        </div>
                                        <div class="col col-12">
                                            <div class="my_acc_content_submit">
                                                <div class="c_btn c_btn_red">
                                                    <button type="submit">Update</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
                                <form action="{{route('update-password')}}" method="POST" data-parsley-validate="">
                                <div class="card_title">
                                    <h3>Change Password</h3>
                                </div>
                                @csrf
                                <div class="card_content">
                                    <div class="row">
                                        <div class="col col-4">
                                            <div class="c_filed">
                                                <label for="old_password">Current Password*</label>
                                                <input type="password" name="old_password" id="old_password" placeholder="Enter Current Password"  required data-parsley-required-message="Old Password is required">
                                                @if ($errors->has('old_password'))
                                                    <span class="invalid-feedback" style="display: block;" role="alert">
                                                        <strong>{{ $errors->first('old_password') }}</strong>
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col col-4">
                                            <div class="c_filed">
                                                <label for="password">New Password*</label>
                                                <input type="password" name="password" id="password" placeholder="Enter New Password"  required data-parsley-required-message="Password is required" data-parsley-minlength="6" data-parsley-minlength-message="Minimum 6 charecter required!">
                                            </div>
                                        </div>
                                        <div class="col col-4">
                                            <div class="c_filed">
                                                <label for="password_confirmation">Confirm Password*</label>
                                                <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Enter Confirm Password"  required data-parsley-required-message="Confirm Password is required" data-parsley-minlength-message="Minimum 6 charecter required!" data-parsley-equalto="#password">
                                            </div>
                                        </div>

                                        <div class="col col-12">
                                            <div class="my_acc_content_submit">
                                                <div class="c_btn c_btn_red">
                                                    <button type="submit">Update</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@include('front.layouts.app-footer')
@endsection