@extends('website.layout.master_auth')
@section('title', 'الرئيسية')
@section('content')

    <div class="body-content pt-5" >
        <div class="container">
            <div class="my-coount">
                <div class="my-coount-tb my-coount-tb-active">
                    <div class="my-coount-tb-prfile">
                        <img src="{{ asset('web/img/b1.png') }}" alt="">
                        <div class="">
                            <h6> {{ auth()->user()->user_name }}</h6>
                            <span> {{ auth()->user()->email }}</span>
                        </div>
                    </div>
                    <ul>
                        <li data-coount="my-coount1">Your account details</li>
                        <li data-coount="my-coount2">Your membership</li>
                        <li data-coount="my-coount3">FAQs</li>
                        <li data-coount="my-coount4">Chat with the admin</li>
                    </ul>
                    <a href="{{ route('logout') }}"  data-toggle="modal" data-target="#exampleModal2"> Log out </a>
                </div>
                <div class="my-coount-body">
                    <div class="body-t" id="my-coount1">
                        <div class="profile-info active">
                            <h2>Your account</h2>
                            <ul>
                                <li>
                                    <h6>First name:</h6>
                                    <span>{{ auth()->user()->first_name }}</span>
                                </li>
                                <li>
                                    <h6> Last name  :</h6>
                                    <span>{{ auth()->user()->last_name }}</span>
                                </li>
                                <li>
                                    <h6>Country of residence:</h6>
                                    <span>{{ optional(auth()->user()->country)->name }}</span>
                                </li>
                                <li>
                                    <h6> Email  :</h6>
                                    <span>{{ auth()->user()->email }}</span>
                                </li>

                            </ul>
                            <div class="eit-info">
                                <p >Edit account details</p>
                            </div>
                        </div>
                        <div class="profile-info">
                            <h2>Your account</h2>
                            <form action="{{ route('edit-account') }}" method="post">
                                @csrf
                            <div class="row">

                                <div class="col-12 col-lg-6">
                                    <div class="form-t">
                                        <label for="">First name*</label>
                                        <input type="text" name="first_name" value="{{ auth()->user()->first_name }}">
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-t">
                                        <label for="">Last name*</label>
                                        <input type="text" name="last_name" value="{{ auth()->user()->last_name }}">
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-t">
                                        <label for="">Country of residence</label>
                                        <select name="country_id">
                                            <option value="">Select country</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id }}" {{ ($country->id == auth()->user()->country_id) ? 'selected' : '' }}>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-t">
                                        <label for="">Email*</label>
                                        <input type="text" placeholder="Email" name="email" value="{{ auth()->user()->email }}">
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-t">
                                        <label for="">Password*</label>
                                        <input type="password" placeholder="Password" name="password">
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="form-t">
                                        <label for="">Confirm password*</label>
                                        <input type="password" placeholder="Password" name="password_confirmation">
                                    </div>
                                </div>


                            </div>
                                <div class="confierm">
                                    <button class="sign-up" type="submit">confirm</button>
                                </div>
                            <div class="eit-info">
                                <p>Edit account details</p>
                            </div>
                            </form>
                        </div>
                    </div>
                    <div class="body-t" id="my-coount2">
                        <div class="membership">
                            <h2>Current membership</h2>
                            <ul class="key-lit2">
                                <li>
                                    <h6>Expiry date:</h6>
                                    <span>{{  \Carbon\Carbon::now()->addMonths(auth()->user()->package->duration)->format('d M Y') }}</span>
                                </li>
                            </ul>
                            <div class="try-it">
                                <a href="" class="try-free">Extend membership  </a>
                                <!-- <a href="" class="try-dengr" data-toggle="modal" data-target="#exampleModal1">  End session</a> -->
                            </div>
                            <hr>
                            <div class="membership-tab pt-3">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th scope="col">Date</th>
                                        <th scope="col">Invoice</th>
                                        <th scope="col">Level</th>
                                        <th scope="col">Total billed </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>15th February 2023</td>
                                        <td><a href="./u-My-account-Membership-invoice.html">A60D019F20</a></td>
                                        <td>@m6 Month extensiondo</td>
                                        <td>$ 80.00    </td>
                                    </tr>
                                    <tr>
                                        <td>15th February 2023 <br>
                                            <p>(Expired)</p>
                                        </td>
                                        <td><a href="./u-My-account-Membership-invoice.html">A60D019F20</a></td>
                                        <td>@m6 Month extensiondo</td>
                                        <td>$ 80.00    </td>
                                    </tr>
                                    <tr>
                                        <td>15th February 2023</td>
                                        <td><a href="./u-My-account-Membership-invoice.html">A60D019F20</a></td>
                                        <td>@m6 Month extensiondo</td>
                                        <td>$ 80.00    </td>
                                    </tr>
                                    <tr>
                                        <td>15th February 2023</td>
                                        <td><a href="./u-My-account-Membership-invoice.html">A60D019F20</a></td>
                                        <td>@m6 Month extensiondo</td>
                                        <td>$ 80.00    </td>
                                    </tr>


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="body-t" id="my-coount3">
                        <div class="membership">
                            <h2> FAQs  </h2>
                            <div class="accordion" id="accordionExample">
                                @foreach($faqs as $faq)
                                    <div class="card">
                                    <div class="card-header" id="headingOne{{ $faq->id }}"  data-toggle="collapse" data-target="#collapseOne{{ $faq->id }}" aria-expanded="true" aria-controls="collapseOne{{ $faq->id }}">
                                        <h5 class="mb-0">
                                            {{ $faq->title }}
                                        </h5>
                                        <img src="{{ asset('web/img/arrow.svg') }}" alt="">
                                    </div>

                                    <div id="collapseOne{{ $faq->id }}" class="collapse show" aria-labelledby="headingOne{{ $faq->id }}" data-parent="#accordionExample">
                                        <div class="card-body">
                                            {!! $faq->description !!}
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="body-t" id="my-coount4">
                        <div class="chat">
                            <h2>Chat with the admin</h2>


                            <div class="chat-body">
                                <div class="chat-body-l">
                                    <h3>If you have any questions, feel
                                        free to chat with the admin.</h3>
                                </div>
                                <div class="chat-body-r">
                                    <a href="">Chat with the admin</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </div>
    </div>

    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-none">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="content-end">
                        <img src="{{asset('web')}}/img/end-co.svg" alt="">
                        <h6>Logout</h6>
                        <p>This will end your current session and show your results. Do you wish to continue?</p>

                        <div class="try-it">
                            <a href="{{ route('logout') }}" class="try-right">   Confirm</a>
                            <a href="" class=" ">Cancel   </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

@endsection