@extends('frontend.layouts.partials.default')
@section('title','IMAGESOUK')
@section('main')

        <div class="section">
            <div class="container py-5 profile_form">
                <div class="row profile_nav">
                    <div class="col-9">
                    <nav>
                        <div class="nav nav-tabs dB_tabsCstm_design" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="true">Profile Details</a>
                            <a class="nav-item nav-link" id="nav-subscription-tab" data-toggle="tab" href="#nav-subscription" role="tab" aria-controls="nav-subscription" aria-selected="false">Subscription Plans</a>
                            <a class="nav-item nav-link" id="nav-password-tab" data-toggle="tab" href="#nav-password" role="tab" aria-controls="nav-password" aria-selected="false">Change Password</a>
                        </div>
                    </nav>

                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active py-4 acdtl" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <h4 class="text-warning mb-3 profile_text"> Account Details </h4>

                                <div class="row">
                                    <div class="col-12">
                                        <form method="POST" action="{{route('user.profile.update')}}">
                                            @csrf
                                            <div class="row email">
                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="email" class="text-dark">Email : </label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input disabled type="email" class="form-control" name="email" value="{{$User->email}}" id="email" placeholder="johndoe@gmail.com"></div>
                                            </div>

                                            <div class="row name">
                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="f_name" class="text-dark">First Name :</label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input type="text" class="form-control" value="{{$User->first_name}}" name="first_name" id="f_name" placeholder="John"></div>

                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="l_name" class="text-dark">Last Name :</label></div>
                                                <div class="col-9 col-md-4 py-2"><input type="text" class="form-control"  value="{{$User->last_name}}" name="last_name" id="l_name" placeholder="doe"></div>
                                            </div>

                                            <div class="row mobile">
                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="mobile" class="text-dark">Mobile :</label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input type="number"  value="{{$User->phone_number}}" class="form-control" name="phone_number" id="mobile" placeholder="9632542368"></div>

                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="address" class="text-dark">Address :</label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input type="text" class="form-control" value="{{$Address->address}}"  name="address" id="address" placeholder="#44 new baker street"></div>
                                            </div>

                                            <div class="row company">
                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="company" class="text-dark">Company :</label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input type="text" class="form-control"  value="{{$User->company_name}}" name="company_name" id="company" placeholder="Photo Pros">
                                                </div>

                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="city" class="text-dark">City :</label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input type="text" class="form-control" value="{{$Address->city}}" name="city" id="city" placeholder="Brampton"></div>
                                            </div>

                                            <div class="row state">
                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="postal_code" class="text-dark">Postal code :</label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input type="number"  class="form-control" id="postal_code" placeholder="123545"></div>

                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="state" class="text-dark">State :</label></div>
                                                <div class="col-9 col-md-4 py-2">
                                                    <input type="text" class="form-control"  value="{{$Address->state}}" name="state" id="state" placeholder="Ontario"></div>
                                            </div>

                                            <div class="row country">
                                                <div class="col-3 col-md-2 text-right my-auto py-2"><label for="country" class="text-dark">Country :</label></div>
                                                <div class="col-9 col-md-4 py-2"><select class="form-control"  name="country" id="country">

                                                    @foreach (config('variables.contries') as $item)
                                                        <option 
                                                        @if($Address->country == $item)
                                                        Selected
                                                        @endif
                                                         value="{{$item}}">
                                                            {{$item}}
                                                        </option>
                                                    @endforeach

                                                </select>
                                                
                                                </div>
                                            </div>
                                            <div class="row">
                                                    <div class="col-3 col-md-2 text-right my-auto py-2"></div>
                                                    <div class="col-9 col-md-2 py-2">
                                                            <input class="text-white bg-warning form-control font-weight-bold border-0" type="submit" value="Save">
                                                    </div>
                                                </div>
                                            
                                        </form>
                                    </div>
                                </div>
                        </div>
                        <div class="tab-pane fade p-3" id="nav-subscription" role="tabpanel" aria-labelledby="nav-subscription-tab">
                                <h4 class="text-warning mb-3 profile_text"> Subscription Plans </h4>

                            @if (count($PlanDetails))
                            <ul class="list-group">
                            @foreach ($PlanDetails as $item)
                            <li class="list-group-item d-flex justify-content-between align-items-center list-group-item-{{config('variables.PlanStatus')[$item->is_active]}}">
                               {{$item->plan_name}}
                               <small>{{$item->plan_description}}</small>

                               <span> left Downloads : - <span class="badge badge-primary badge-pill">   {{$item->left_count}} /{{$item->total_count}}</span></span>
                              </li>                                
                            @endforeach
                              </ul>
                            @else
                            
                            <p>You don't have any plans purchased. <a href="{{route('pricing')}}">Subscribe Now</a></p>
                            <h6 class="mb-3">Purchase History</h6>
                            @endif

                        </div>
                        <div class="tab-pane fade p-3 cngpwd" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
                                <h4 class="text-warning mb-3 profile_text">Change Password </h4>

                                <div class="row ">
                                        <div class="col-12 col-md-7">
                                            <form method="POST" action="{{route('user.password.update')}}">
                                                    @csrf
                                                <div class="row email">
                                                    <div class="col-3 col-md-4 text-right my-auto py-2"><label for="new_password" class="text-dark">New password : </label></div>
                                                    <div class="col-9 col-md-8 py-2">
                                                        <input type="password" class="form-control" name="password" id="new_password" placeholder="Enter new password"></div>
                                                    <div class="col-3 col-md-4 text-right my-auto py-2"><label for="confirm_new_password" class="text-dark">Confirm new password : </label></div>
                                                    <div class="col-9 col-md-8 py-2">
                                                        <input type="password" class="form-control" name="password_confirmation" id="confirm_new_password" placeholder="Confirm new password">

                                                    </div>
                                                        
                                                </div>
                                                <div class="row">
                                                        <div class="col-3 col-md-4 text-right my-auto py-2"></div>
                                                        <div class="col-9 col-md-4 py-2">
                                                                <input class="text-white bg-warning form-control font-weight-bold border-0" type="submit" value="Change password">
                                                        </div>
                                                    </div>
                                            </form>
                                        </div>
                                </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>

@endsection