@extends('front.layout')
@section('custom-style')
<style>
    .login-registration-submit-button
    {
        background: #fff!important;
        width:100%;
        color:#000;
    }

    .get-subscription-btn
    {

    }
    .login-registration-submit-button:hover, .get-subscription-btn:hover
    {
        background: #FD1600!important;
    }

    .movies-collection-image
    {
        width:100%;
        height:300px;
    }
     .active{
            color:#292826!important;
        }
        .pages-content
        {
            color:#292826!important;
            margin:0px 50px;
        }

        .breadcrump-section
        {
            padding-top:70px;
            background: #000f1e!important;
        }

        .subscription-column
        {
            background:#f4f4f4;
            padding:10px;
            border-radius: 10px;
            color:#000;
            height:300px;
        }

        #payment-btn-area
        {
            display: none;
            background: #8446E4;
        }
        /* .colour-eac035
        {
            color:#fff;
        } */

        .payment-button-image
        {
            height:70px;
            width:auto;
            border-radius: 5px;
        }
        .btn-payment
        {
            background: #000;
            border:0;
            padding:0;
            padding-right: 10px;
        }

        .nav-tabs .nav-item {
            margin-right: 10px;
        }

        .tab-content
        {
            background: #fff;
            padding:30px 50px;
            color:#000;
        }

        .change-password-link
        {
            color:#000!important;
            text-decoration: underline!important;
            margin-left: 20px;
        }
        
        @media(max-width: 575px){
            .custom-mb-top-div{
                margin-top:2vh !important;
            }
        }
</style>
@endsection
@section('content')
    <main id="content">



        <section class="breadcrump-section">
            <div class="py-6 pt-lg-9 pb-lg-11 mb-lg-10 custom-mb-top-div" style="margin-bottom: 0px!important;padding:20px 0px!important; background: #DFA326;">
                <div class="container px-md-5 mb-lg-2">
                    <h6 class="font-size-30 font-weight-semi-bold text-center mb-1">Profile</h6>
                    <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center p-0">

                    <li class="breadcrumb-item active" aria-current="page">Manage Your Profile</li>

                    </ol>
                    </nav>
                 </div>

            </div>
        </section>



    <!--overlay-->

    <div class="bg-gray-1100 space-1">
        <div class="container px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">
            <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3">
                    <div class="dark">

                        @include('front.my-account.tabs')
                          <div class="tab-content" style="padding:10px !important;">
                            <h3>Your details:</h3>
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <th>Name</th>
                                        <td>{{ Auth::user()->name }}</td>
                                    </tr>
                                    
                                     <tr>
                                        <th>Surname</th>
                                        <td>{{ Auth::user()->surname }}</td>
                                    </tr>

                                    <tr>
                                        <th>Your email</th>
                                        <td>{{ Auth::user()->email }}</td>
                                    </tr>

                                    <tr>
                                        <th>Your phone</th>
                                        <td> @if(isset(Auth::user()->phone)) {{ Auth::user()->phone }} @else Not set @endif</td>
                                    </tr>

                                    <tr>
                                        <th>Password</th>
                                        <td style="font-size:0.8em;">********** <a href="{{ route('front.myaccount.changePassword') }}" class="change-password-link px-0 mx-0">Change password</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Registration</th>
                                        <td>{{ Auth::user()->created_at->format('d M, Y h:i a') }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <a href="{{ route('front.myaccount.profileEdit') }}" class="btn btn-primary">Edit Details</a>

                          </div>

                    </div>
                </div>
            </div>
            <!--Dakar Section End-->




        </div>
    </div>
    
    <style>
    
        /* additional styling */
        /* Small devices (portrait tablets and large phones, 600px and up) */
        @media only screen and (max-width: 500px) {
            #my-account-tabs{
                flex-wrap:nowrap !important;
            }
        }
    </style>

    </main>
@endsection

@section('custom-script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
@endsection