@extends('front.layout-ref')

<style>
    #search-block {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .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 {
        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;
        }
    }

    .table th,
    .table td {
        padding-top: 1rem !important;
        vertical-align: top;
        border-top: .0625rem solid #d0d0d2
    }

    @media(min-width:1200px){
            body{
                padding-top:70px !important;
            }
        }

        .profile_img_block {
            display:inline-flex;
            justify-content:center;
            align-items:center;
            width:60px;
            height:60px;
            border-radius:100%;
            margin-left:10px;
        }
        
        .profile_img_block img{
            width:100%;
            height:100%;
            border-radius:100%;
        }
</style>
@section('content')
<main id="content" class="container-fluid p-0">



<section class="breadcrump-section">
            <div class="py-0 py-lg-6 mb-0" style="padding:20px 0px!important; background: #DFA326;">
                <div class="container px-md-5 mb-lg-2">
                    <h3 class="hw fw-bold font-size-30 font-weight-semi-bold text-center d-flex align-items-center justify-content-center mb-1">
                        Profile
                        
                        <div class="profile_img_block ms-3"> 
                            @php 
                                $user_profile_image = Auth()->user()->profile_image ?: NULL; 
                                $username = Auth::user()->name;
                            @endphp
                            <img id="thumbnail-image"  src="{{ is_null($user_profile_image) ? "https://ui-avatars.com/api/?background=random&name=$username" : $user_profile_image }}" alt="Profile Image">
                        </div>
                    </h3>
                 </div>

            </div>
        </section>




    <!--overlay-->

    <div class="bg-gray-1100 space-1">
        <div class="container-fluid px-md-6 px-xl-7 px-wd-6 pb-3 pt-1 mt-4" style="max-width:1776px;">
            <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  table-responsive" 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-dark">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