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

 <main>

        <!-- Start pg-header-->
        @include('web.pages.components.header',compact('title'))

        <!-- Start section -->
        <section class="profile-pg section ">
            <div class="container">
                <div class="row">
                    @if($subscribe && $remain_days > 0)
                    <div class="col-12">
                        <div  class="alert alert-light subscription_alert mb-4">
                            <div class="d-flex flex-wrap">
                                <a class="subscription_link" href="{{url(getCurrentLocale().'/subscribe/'.$subscribe->token)}}">{{__('web.remain_subscribe_continue')}} :
                                 
                                </a>
                                <div class="d-flex flex-wrap timer ms-3" id="countdown">
                                    <div class="num"><span class="counter_num" id="days"></span> <span class="txt">يوم</span> </div>
                                    <div class="num"><span class="counter_num" id="hours"></span> <span class="txt">ساعة</span> </div> 
                                    <div class="num"><span class="counter_num" id="minutes"></span> <span class="txt">دقيقة</span> </div>
                                    <div class="num"><span class="counter_num" id="seconds"></span> <span class="txt">ثانية</span> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="col-lg-3">
                        <div class="prof-side">
                            <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"><i class="fa-solid fa-user"></i> {{__('web.info_profile')}}</button>
                                    <button class="nav-link" id="v-pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tab3" type="button" onclick="subscriptions()" role="tab" aria-controls="v-pills-tab3" aria-selected="false"><i class="fa-solid fa-utensils"></i> {{__('web.subscription_logs')}}</button>
                                    <button class="nav-link" id="v-pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tab2" type="button" onclick="notifications()" role="tab" aria-controls="v-pills-tab2" aria-selected="false"><i class="fa-solid fa-bell"></i> {{__('web.notifications')}} @if($notifications > 0)<span class="noti_num">{{$notifications}}</span>@endif </button>
                                    <button class="nav-link" type="button" data-bs-toggle="modal" data-bs-target="#logoutModal"><i class="fa-solid fa-right-from-bracket"></i> {{__('web.logout')}}</button>
                                </div>
                            </div>
                            <div class="points-data text-center wrapper">
                                <h5 class="fw-bold mb-3">{{__('web.count_points')}}</h5>
                                <h5 class="title color-primary mt-4 mb-0"><span>  {{$user->points}} {{__('web.point')}} </span> </h5>
                         
                            </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">
                                        <h3 class="subtitle_sec fw-bold text-center color-primary mb-5">
                                            <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>   {{__('web.info_profile')}} 
                                        </h3>
                                        <div class="col-md-10 m-auto ">
                                            <div class="data-group">
                                                <span class="label color-gray2"> {{__('web.name')}} </span>
                                                <p class="data mb-0"> {{$user->name}} </p>
                                            </div>
                                            <div class="data-group">
                                                <span class="label color-gray2"> {{__('web.email')}} </span>
                                                <p class="data mb-0"> {{$user->email}} </p>
                                            </div>
                                            <div class="data-group">
                                                <span class="label color-gray2"> {{__('web.phone')}} </span>
                                                <p class="data mb-0"> {{$user->phone}} </p>
                                            </div>
                                            <div class="d-flex justify-content-center mt-5">
                                                <button class="butn dark_butn "  data-bs-toggle="modal" data-bs-target="#editPhoneModal"> {{__('web.edit_phone')}} </button>
                                                <button class="butn primary_butn mx-2" id="editButton"> {{__('web.edit_profile')}} </button> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="editData_box">
                                        <h3 class="subtitle_sec fw-bold text-center color-primary mb-5">
                                            <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>   {{__('web.edit_profile')}} 
                                        </h3>
                                        <form method="{{$method_edit}}" action="{{$action_edit}}" onsubmit="saveForm(this)">
                                            @if($method_edit == 'POST')
                                                @CSRF
                                            @endif
                                            <div class="col-lg-10 m-auto">
                                               
                                                <div class="form-group mb-4">
                                                    <input class="form-control" name="name" placeholder="{{__('web.name')}} " value="{{$user->name}}" type="text">
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group mb-4">
                                                            <input class="form-control" name="email" placeholder="{{__('web.email')}} " value="{{$user->email}}" type="email">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group show_hide_password mb-4">
                                                            <input type="password" class="form-control shadow_input" name="password" placeholder="{{__('web.password')}} ">
                                                            <i class="show_pass far fa-eye-slash"></i>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group show_hide_password mb-4">
                                                            <input type="password" class="form-control shadow_input" name="password_confirmation" placeholder="{{__('web.password_confirmation')}} ">
                                                            <i class="show_pass far fa-eye-slash"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="butn primary_butn m-auto mt-5"> {{__('web.save')}}  </button> 
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">
                                <div class="tab_wrapper orders_tab">
                                    <h3 class="subtitle_sec fw-bold text-center color-primary mb-5">
                                        <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>    {{__('web.subscriptions_logs')}}
                                    </h3>
                                    <div class="table-responsive" id="subscriptions">
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">
                                <div class="tab_wrapper notifications_tab" id="notifications">
                               
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        @include('web.pages.components.mail')

    </main>
    
    <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">X</button>
                <div class="modal-body">
                    <img src="{{url('')}}/assets/web/images/modals/logout.png" alt="" class="img"/>
                    <h3 class="title color-primary  text-center"><b>{{__('web.sure_logout')}}</b></h3>
                    <div class="d-flex justify-content-center mt-5">
                        <button type="button" class="butn btn-secondary mx-1" data-bs-dismiss="modal">{{__('web.no')}}</button>
                        <a href="{{url(getCurrentLocale().'/logout')}}" class="butn primary_butn mx-1">{{__('web.yes')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal editPhoneModal fade" id="editPhoneModal" 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">X</button>
                
                <form method="{{$method_phone}}" action="{{$action_phone}}">
                    @if($method_phone == 'POST')
                        @CSRF
                    @endif
                    <div class="modal-body register-pg">
                        <div class="register_inner p-0">
                            <div class="head-text text-center mb-5 mt-4">
                                <h2 class="title color-dark fw-bold mb-3"><b> {{$page->descriptions()->title}} </b></h2>
                                <p class="p color-gray2 mb-1"> {!! $page->descriptions()->description !!} </p>
                            </div>
                            <div class="col-lg-10 m-auto">
                                <div class="form-group mb-4">
                                    <input class="form-control" required name="phone" required placeholder="05**********" type="number">
                                </div>
                            </div>
                            <div class="d-flex justify-content-center mt-5">
                                <button type="submit" class="butn primary_butn mx-1">{{__('web.sure')}}</button>
                            </div>
                        </div>
             
                    </div>
                </form>
            </div>
        </div>
    </div>
   
@push('js')
        <script>
            let url_notifications = {!! json_encode(url(getCurrentLocale().'/notifications')) !!}
            let url_read = {!! json_encode(url(getCurrentLocale().'/read')) !!}
            let url_subscriptions = {!! json_encode(url(getCurrentLocale().'/subscriptions')) !!}
            let expire_date = {!! json_encode($expire_date) !!}
        </script>
        <script>
            function updateTimer() {
              
              future  = Date.parse(expire_date+" 00:00:00");
              now     = new Date();
              diff    = future - now;
            
              days  = Math.floor( diff / (1000*60*60*24) );
              hours = Math.floor( diff / (1000*60*60) );
              mins  = Math.floor( diff / (1000*60) );
              secs  = Math.floor( diff / 1000 );
            
              d = days;
              h = hours - days  * 24;
              m = mins  - hours * 60;
              s = secs  - mins  * 60;
 
              document.getElementById("days").innerHTML = d ;
              document.getElementById("hours").innerHTML = h ;
              document.getElementById("minutes").innerHTML = m ;
              document.getElementById("seconds").innerHTML = s ;
            }
            setInterval('updateTimer()', 1000 );

        </script>
        <script src="{{url('')}}/assets/web/js/custom/profileAction.js"></script>
    @endpush
@stop