@extends('layouts.frontend')

@section('content')
    <style>
        .table-full-width {
            margin-left: -15px;
            margin-right: -15px;
        }
        .navbar-toggler[aria-expanded=true] {
            transform: rotateX(180deg);
            transition: 0.3s;
        }
        .navbar-toggler {
            transition: 0.3s;
        }
        #profile-navtab a {
            color: white;
        }
        #profile-navtab a.active {
            background-color: white;
            color: black;
        }
    </style>

    <div class="container-xl">
        @if ($message = Session::get('success'))
            <div class="alert alert-success mt-5 mb-0 font-weight-light" role="alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif
        @if ($message = Session::get('error'))
            <div class="alert alert-danger mt-5 mb-0 font-weight-light" role="alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>ขออภัย, {{ $message }}</strong>
            </div>
        @endif
        <div class="row {{ request()->query('iframe') !== 'true' ? 'py-md-5' : '' }} py-4 justify-content-center ">
            @if (request()->query('iframe') !== 'true')
                <div class="col-sm-12 col-md-4 mb-4 mb-md-0">
                    <div class="card-profile">
                        <div class="border-gold-bottom">
                            <p class="lt-168-header p-3">ยินดีต้อนรับคุณ : {{ Auth::user()->name }}</p>
                        </div>
                        <div class="px-3 pb-md-3 row [flex-column] flex-lg-row no-gutters">
                            <div class="col-auto mx-auto text-center position-relative mb-3" style="min-width: 150px;">
                                <div class="w-100 h-0" style="padding-top: 100%;">
                                    <div class="credit p-0 position-absolute h-100 w-100 d-flex" style="top:0; left: 0;">
                                        <div class="m-auto">
                                            <p class="mb-1 small">เครดิตคงเหลือ</p>
                                            <h4 class="mb-0">{{ number_format(remainBalance(Auth::user()), 2) }}</h4>
                                            <p class="small mb-0 mt-1">บาท</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto m-auto mr-xl-0 info-card d-flex">
                                <ul class="p-0 ul-info-list w-auto my-auto text-nowrap">
                                    <li class="info-list w-auto"><span class="m-auto "><i
                                                class="fa fa-user mr-2"></i>{{ Auth::user()->username }}</span></li>
                                    <li class="info-list w-auto"><span class="m-auto "><i
                                                class="fa fa-phone-square mr-2"></i>{{ Auth::user()->phone == '' ? '-' : Auth::user()->phone }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="navbar-expand-md">
                            <button class="navbar-toggler btn btn-link link-dark btn-block shadow-none py-3" data-toggle="collapse" data-target="#money-details" aria-expanded="false" aria-controls="money-details">
                                <i class="fas fa-chevron-down fa-lg"></i>
                            </button>
                            <div id="money-details" class="collapse navbar-collapse">
                                <div class="w-100">
                                    <div class="gold-hr"></div>
                                    <div class="section-money">
                                        <div class="row m-0">
                                            <div class="col-auto pt-2">
                                                <div class="icon-outline m-auto text-center">
                                                    <i class="fas fa-money-bill-alt"></i>
                                                </div>
                                            </div>
                                            <div class="col pt-2 pb-2">
                                                <ul class="ul-info-list text-left pl-0 mb-0">
                                                    <li class="text-muted">ยอดเงินคงเหลือ</li>
                                                    <li class="">{{ number_format(remainBalance(Auth::user()), 2) }} ฿</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="gold-hr"></div>
                                    <div class="section-money">
                                        <div class="row m-0">
                                            <div class="col-auto pt-2">
                                                <div class="icon-outline m-auto text-center">
                                                    <i style="color: #ff8d00;" class="fas fa-money-bill-alt"></i>
                                                </div>
                                            </div>
                                            <div class="col pt-2 pb-2">
                                                <ul class="ul-info-list text-left pl-0 mb-0">
                                                    <li class="text-muted">ส่วนลด</li>
                                                    <li class="">{{ number_format(sumMemberDiscount(Auth::user()), 2) }} ฿</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="gold-hr"></div>
                                    <div class="section-money">
                                        <div class="row m-0">
                                            <div class="col-auto pt-2">
                                                <div class="icon-outline m-auto text-center">
                                                    <i style="color: #0dad55;" class="fas fa-money-bill-alt"></i>
                                                </div>
                                            </div>
                                            <div class="col pt-2 pb-2">
                                                <ul class="ul-info-list text-left pl-0 mb-0">
                                                    <li class="text-muted">ยอดเงินที่ถอนได้</li>
                                                    <li class="">{{ number_format(remainBalance(Auth::user()), 2) }} ฿</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="col-sm-12 {{ request()->query('iframe') !== 'true' ? 'col-md-8' : '' }}">
                <div class="card-profile ">
                    @if (request()->query('iframe') !== 'true')
                        <nav id="profile-navtab" class="border-gold-bottom mb-1">
                            {{-- <p class="lt-168-header p-3"><i class="fas fa-bars"></i> เมนูบาร์ : www.lt-168.com</p> --}}
                            <ul class="flex-nowrap lt-168-header nav overflow-auto px-2">
                                <li class="active">
                                    <a id="profile.index" href="{{ route('profile.index') }}" class="btn btn-default shadow text-decoration-none icons-nav text-center p-1 {{ request()->route()->getName() === 'profile.index' ? 'active' : '' }}">
                                        <i class="fa fa-user "></i>
                                        โปรไฟล์
                                    </a>
                                </li>
                                <li>
                                    <a id="profile.bankAccount" href="{{ route('profile.bankAccount') }}" class="btn btn-default shadow text-decoration-none icons-nav text-center p-1 {{ request()->route()->getName() === 'profile.bankAccount' ? 'active' : '' }}">
                                        <i class="fa fa-university"></i>
                                        ธนาคาร
                                    </a>
                                </li>
                                <li>
                                    <a id="profile.depositWithdraw" href="{{ route('profile.depositWithdraw') }}" class="btn btn-default shadow text-decoration-none icons-nav text-center p-1 {{ request()->route()->getName() === 'profile.depositWithdraw' ? 'active' : '' }}">
                                        <i class="fa fa-money-check-alt"></i>
                                        ฝาก-ถอน
                                    </a>
                                </li>
                                <li>
                                    <a id="profile.transaction" href="{{ route('profile.transaction') }}" class="btn btn-default shadow text-decoration-none icons-nav text-center p-1 {{ request()->route()->getName() === 'profile.transaction' ? 'active' : '' }}">
                                        <i class="fa fa-money-bill-alt"></i>
                                        ธุรกรรม
                                    </a>
                                </li>
                                <li>
                                    <a id="profile.betHistory" href="{{ route('profile.betHistory') }}" class="btn btn-default shadow text-decoration-none icons-nav text-center p-1 {{ request()->route()->getName() === 'profile.betHistory' ? 'active' : '' }}">
                                        <i class="fa fa-dollar-sign"></i>
                                        รายการแทง
                                    </a>
                                </li>
                                <li>
                                    <a id="profile.resetPassword" href="{{ route('profile.resetPassword') }}" class="btn btn-default shadow text-decoration-none icons-nav text-center p-1 {{ request()->route()->getName() === 'profile.resetPassword' ? 'active' : '' }}">
                                        <i class="fa fa-key"></i>
                                        รหัสผ่าน
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    @endif

                    <div class="tab-content">
                        @yield('profile-content')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (request()->query('iframe') !== 'true')
        <script>
                document.addEventListener('DOMContentLoaded', () => {
                    document.getElementById('{{ request()->route()->getName() }}').scrollIntoViewIfNeeded()
                });
        </script>
    @endif
@endsection