@extends('web.layouts.layout')
@section('content')


    <main>
        <!-- Start pg_header -->
        @include('web.pages.components.header.header')

        <!-- Start section -->
        <section class="profile_pg section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="prof-side">
                            <div class="prof-data wrapper">
                                <div class="img-box">
                                    <img src="{{asset($user->photo)}}" alt="" class="secImg">
                                </div>
                                <h5 class="name text-center mt-4 mb-0"><b>{{$user->name}}</b></h5>
                            </div>
                            <div class="links-data wrapper">
                                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                    <button class="nav-link active" id="v-pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tab1" type="button" role="tab" aria-controls="v-pills-tab1" aria-selected="true">{{__('web.profile_info')}}</button>
                                    <button class="nav-link" onclick="ordersShow()" id="v-pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tab2" type="button" role="tab" aria-controls="v-pills-tab2" aria-selected="false"> {{__('web.my_orders')}} </button>
                                    <button class="nav-link" onclick="addressShow(this)" type-id="addresses_profile" id="v-pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tab3" type="button" role="tab" aria-controls="v-pills-tab3" aria-selected="false"> {{__('web.addresses')}} </button>
                                    <button class="nav-link" type="button" data-bs-toggle="modal" data-bs-target="#logoutModal">{{__('web.logout')}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-tab1-tab">
                                <div class="tab_wrapper profile_tab">
                                    <div class="data_box">
                                        <div class="sec_head mb-5">
                                            <h4 class="sec_title fw-bold fs-5"> {{__('web.profile_info')}}  </h4>
                                        </div>
                                        <div class="col-md-12 m-auto ">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="data-group">
                                                        <p class="data mb-0"><span class="icon"> <i class="fa-light fa-user"></i> </span> {{$user->name}}</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="data-group">
                                                        <p class="data mb-0"><span class="icon"> <i class="fa-light fa-mobile"></i> </span> <span class="dir_ltr">{{$user->phone}}</span>  </p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="data-group">
                                                        <p class="data mb-0"><span class="icon"> <i class="fa-light fa-envelope"></i> </span> {{$user->email}} </p>
                                                    </div>
                                                </div>

                                            </div>


                                            <button class="butn primary_butn mt-5 m-auto" id="editButton">{{__('web.user_info')}}</button>
                                        </div>
                                    </div>
                                    <div class="editData_box">
                                        <div class="sec_head mb-5">
                                            <h4 class="sec_title fw-bold fs-5"> {{__('web.edit_profile')}}  </h4>
                                        </div>
                                        <form method="post" action="{{$action}}" onsubmit="formAction(this)">
                                            @method('PUT')
                                            @CSRF
                                            <div class="register_pg">
                                                <div class="inner border-0 p-0">
                                                    <div class="form_box row">
                                                        <div class="col-lg-12">
                                                            <div class="profile-avatar mb-5" id="imagePreview" style="background-image: url('{{asset($user->photo)}}');">
                                                                <input type="file" name="photo" class="custom-file-input" id="imageUpload" >
                                                                <button> <i class="fa-light fa-camera"></i> </button>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="form-group mb-4">
                                                                <input type="text" name="name" value="{{$user->name}}" class="form-control" placeholder=" {{__('web.name')}}   "/>
                                                                <span class="icon"> <i class="fa-light fa-user"></i> </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group mb-4">
                                                                <input type="email" name="email" value="{{$user->email}}" class="form-control" placeholder=" {{__('web.email')}} "/>
                                                                <span class="icon"> <i class="fa-light fa-envelope"></i> </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group phone_group mb-4">
                                                                <input type="number" name="phone" value="{{$user->phone}}" class="form-control" placeholder="{{__('web.phone')}}"/>
                                                                <select class="phoneSelect">
                                                                    <option>966</option>
                                                                </select>
                                                                <span class="icon">  <i class="fa-light fa-mobile"></i> </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group show_hide_password mb-4">
                                                                <input type="password" name="password" class="form-control shadow_input" placeholder="{{__('web.password')}} "/>
                                                                <span class="icon"> <i class="fa-light fa-lock"></i> </span>
                                                                <i class="show_pass far fa-eye-slash"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group show_hide_password mb-4">
                                                                <input type="password" name="password_confirmation" class="form-control shadow_input" placeholder="{{__('web.password_confirmation')}} "/>
                                                                <span class="icon"> <i class="fa-light fa-lock"></i> </span>
                                                                <i class="show_pass far fa-eye-slash"></i>
                                                            </div>
                                                        </div>

                                                        <button type="submit" class="butn primary_butn mt-5 m-auto" > {{__('web.save')}}  </button>

                                                    </div>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">
                                <div class="tab_wrapper orders_tab">
                                    <div class="sec_head mb-5">
                                        <h4 class="sec_title fw-bold fs-5">   {{__('web.my_orders')}}    </h4>
                                    </div>
                                    <div class="checkout_pg">
                                        <div class="box" id="orders">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">
                                <div class="tab_wrapper loc_tab">
                                    <div class="sec_head mb-5">
                                        <h4 class="sec_title fw-bold fs-5">   {{__('web.addresses')}}    </h4>
                                    </div>
                                    <div id="addresses">
                                    </div>
                                    <button class="butn primary_butn m-auto mt-5" onclick="addressForm(this)" action-id="{{route('address.create')}}" type="button" data-bs-toggle="modal" data-bs-target="#addLocModal"> {{__('web.add_new_address')}}    </button>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </main>


    <div class="modal  locModal fade" id="addLocModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body" id="address_form">
                </div>
            </div>
        </div>
    </div>


    <div class="modal  logoutModal fade" id="logoutModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="content text-center mt-4">
                        <div class="icon_box">
                            <img src="{{url('')}}/assets/web/images/icons/logout.png" class="icon" alt="" />
                        </div>
                        <h4 class="title text-dark"><b>   {{__('web.logout')}}   </b></h4>

                        <p class="det text-center my-4">
                            {{__('web.logout_sure')}}
                        </p>

                        <div class="d-flex justify-content-center align-items-center justify-content-center mt-5 ">
                            <button type="button" class="butn btn-secondary  mx-1" data-bs-dismiss="modal">{{__('web.no')}}</button>
                            <a href="{{route('web.logout')}}" class="butn primary_butn mx-1">{{__('web.yes')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('inject_js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOuP7Khf-OXuiervHfHONEq9QmLUarsTA&libraries=places"></script>
    <script>
        let url_addresses = "{{route('address.index')}}"
        let url_orders = "{{route('web.order')}}"
        let url_fetch_cities = "{{route('web.fetch.cities')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/address.js"></script>
    <script src="{{url('')}}/assets/web/js/custom/profile.js"></script>
    <script src="{{url('')}}/assets/web/js/custom/relation.js"></script>
@endsection