@extends('layouts.new')

@section('title')
    หน้าแรก :: LT-99
@endsection

@section('content')
    <!-- App Header -->
    {{--
    <div class="appHeader bg-luxury text-light border-0">
        <div class="left">
            <a href="#" class="headerButton" data-toggle="modal" data-target="#sidebarPanel">
                <ion-icon name="menu-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">
            <!-- <img src="assets/img/logo.png" alt="logo" class="logo"> -->
            <!-- <img src="assets/img/ikai_2.png" alt="logo" class="logo"> -->
            <img src="assets/img/lt-168.png" alt="logo" class="logo">
        </div>
        <div class="right">
            <a href="app-notifications.html" class="headerButton">
                <ion-icon class="icon" name="notifications-outline"></ion-icon>
                <span class="badge badge-danger">1</span>
            </a>
            <a href="app-settings.html" class="headerButton">
                <img src="assets/img/sample/avatar/avatar1.jpg?v=0.0.1" alt="image" class="imaged w32">
                <span class="badge badge-danger">6</span>
            </a>
        </div>
    </div>
    --}}
    <div class="appHeader bg-luxury border-0 text-light">
        <div class="no-gutters position-fixed row w-100" style="top: 0; height: 56px;">
            <div
                class="align-items-center col-sm-10 col-md-7 col-lg-6 col-xl-4 d-flex justify-content-center mx-auto position-relative">
                <div class="left">
                    <a href="#" class="headerButton" data-toggle="modal" data-target="#sidebarPanel">
                        <ion-icon name="menu-outline" role="img" class="md hydrated" aria-label="menu outline"></ion-icon>
                    </a>
                </div>
                <div class="pageTitle">
                    <!-- <img src="assets/img/logo.png" alt="logo" class="logo"> -->
                    <!-- <img src="assets/img/ikai_2.png" alt="logo" class="logo"> -->
                    <img src="assets/img/lt-168.png" alt="logo" class="logo">
                </div>
                <div class="right">
                    <a href="app-notifications.html" class="headerButton">
                        <ion-icon class="icon md hydrated" name="notifications-outline" role="img"
                            aria-label="notifications outline"></ion-icon>
                        <span class="badge badge-danger">1</span>
                    </a>
                    <a href="app-settings.html" class="headerButton">
                        <img src="assets/img/sample/avatar/avatar1.jpg?v=0.0.1" alt="image" class="imaged w32">
                        <span class="badge badge-danger">6</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- * App Header -->


    <!-- App Capsule -->
    <div id="appCapsule">
                <div class="section wallet-card-section pt-1">
            <div class="row no-gutters m-0">
                <div class="col-sm-10 col-md-7 col-lg-6 col-xl-4 mx-auto">
                    <form id="loginForm">
                        <div class="card">
                            <div class="card-body pb-1">
                                <h5 class="card-title text-yellow font-weight-bold">เข้าสู่ระบบ</h5>
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <input type="username" class="form-control" name="username"
                                            placeholder="ชื่อผู้ใช้">
                                        <i class="clear-input">
                                            <ion-icon name="close-circle" role="img" class="md hydrated"
                                                aria-label="close circle">
                                            </ion-icon>
                                        </i>
                                    </div>
                                </div>

                                <div class="form-group basic mb-2">
                                    <div class="input-wrapper">
                                        <input type="password" class="form-control" name="password" placeholder="รหัสผ่าน">
                                        <i class="clear-input">
                                            <ion-icon name="close-circle" role="img" class="md hydrated"
                                                aria-label="close circle">
                                            </ion-icon>
                                        </i>
                                    </div>
                                </div>

                                <button type="submit"
                                    class="btn btn-luxury-reverse btn-lg btn-block font-weight-bold">เข้าสู่ระบบ</button>

                                <div class="ant-divider ant-divider-horizontal ant-divider-with-text-center"
                                    style="opacity: 0.4;" role="separator"><span class="ant-divider-inner-text">หรือ</span>
                                </div>

                                <a href="{{ route('register') }}"
                                    class="btn btn-luxury btn-block font-weight-bold">เปิดบัญชีใหม่</a>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
                <!-- Wallet Card -->
                <!-- Wallet Card -->

        <!-- Deposit Action Sheet -->
        <div class="modal fade action-sheet" id="depositActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">ฝากเครดิต</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="account1">บัญชี</label>
                                        <select class="form-control custom-select" id="account1">
                                            <option value="0">Savings (*** 5019)</option>
                                            <option value="1">Investment (*** 6212)</option>
                                            <option value="2">Mortgage (*** 5021)</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <label class="label">จำนวนเงินที่ต้องการฝาก</label>
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input2">฿</span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg" value="100">
                                    </div>
                                </div>


                                <div class="form-group basic">
                                    <button type="button" class="btn btn-luxury btn-block btn-lg"
                                        data-dismiss="modal">เช็คยอดเงิน</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Deposit Action Sheet -->

        <!-- Withdraw Action Sheet -->
        <div class="modal fade action-sheet" id="withdrawActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">ถอนเครดิต</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="account2d">หมายเลขบัญชี</label>
                                        <select class="form-control custom-select" id="account2d">
                                            <option value="0">Savings (*** 5019)</option>
                                            <option value="1">Investment (*** 6212)</option>
                                            <option value="2">Mortgage (*** 5021)</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <label class="label">จำนวนเงิน</label>
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input14d">$</span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg" placeholder="0">
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <button type="button" class="btn btn-luxury btn-block btn-lg"
                                        data-dismiss="modal">ยืนยันการถอนเครดิต</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Withdraw Action Sheet -->

        <!-- Send Action Sheet -->
        <div class="modal fade action-sheet" id="sendActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Send Money</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="account2">From</label>
                                        <select class="form-control custom-select" id="account2">
                                            <option value="0">Savings (*** 5019)</option>
                                            <option value="1">Investment (*** 6212)</option>
                                            <option value="2">Mortgage (*** 5021)</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="text11">To</label>
                                        <input type="email" class="form-control" id="text11" placeholder="Enter bank ID">
                                        <i class="clear-input">
                                            <ion-icon name="close-circle"></ion-icon>
                                        </i>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <label class="label">Enter Amount</label>
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input14">$</span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg" placeholder="0">
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <button type="button" class="btn btn-primary btn-block btn-lg"
                                        data-dismiss="modal">Send</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Send Action Sheet -->

        <!-- Exchange Action Sheet -->
        <div class="modal fade action-sheet" id="exchangeActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Exchange</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group basic">
                                            <div class="input-wrapper">
                                                <label class="label" for="currency1">From</label>
                                                <select class="form-control custom-select" id="currency1">
                                                    <option value="1">EUR</option>
                                                    <option value="2">USD</option>
                                                    <option value="3">AUD</option>
                                                    <option value="4">CAD</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group basic">
                                            <div class="input-wrapper">
                                                <label class="label" for="currency2">To</label>
                                                <select class="form-control custom-select" id="currency2">
                                                    <option value="1">USD</option>
                                                    <option value="1">EUR</option>
                                                    <option value="2">AUD</option>
                                                    <option value="3">CAD</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group basic">
                                    <label class="label">Enter Amount</label>
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input1">$</span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg" value="100">
                                    </div>
                                </div>



                                <div class="form-group basic">
                                    <button type="button" class="btn btn-primary btn-block btn-lg"
                                        data-dismiss="modal">Deposit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Exchange Action Sheet -->

        <!-- Stats -->
        <!-- <div class="section">
                                    <div class="row mt-2">
                                        <div class="col-6">
                                            <div class="stat-box">
                                                <div class="title">Income</div>
                                                <div class="value text-success">$ 552.95</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="stat-box">
                                                <div class="title">Expenses</div>
                                                <div class="value text-danger">$ 86.45</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-6">
                                            <div class="stat-box">
                                                <div class="title">Total Bills</div>
                                                <div class="value">$ 53.25</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="stat-box">
                                                <div class="title">Savings</div>
                                                <div class="value">$ 120.99</div>
                                            </div>
                                        </div>
                                    </div>
                                </div> -->
        <!-- * Stats -->

        <!-- Transactions -->
        <div class="section mt-4">
            <div class="section-heading">
                <h2 class="title">หวยออนไลน์</h2>
                <a href="app-transactions.html" class="link">ดูทั้งหมด</a>
            </div>
            <div class="transactions row">
                <!-- item -->
                <div class="col-md-6 col-xl-4 mb-1 mb-md-3">
                    <a href="app-transaction-detail.html" class="item">
                        <div class="detail">
                            <img src="assets/img/icon/thailand.png" alt="img" class="image-block imaged w48">
                            <div>
                                <strong>หวยไทย</strong>
                                <!-- <p>Shopping</p> -->
                            </div>
                        </div>
                        <div class="right">
                            <button type="button" class="btn btn-luxury btn-block btn-lg font-weight-bold"
                                data-dismiss="modal">แทงหวย</button>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="col-md-6 col-xl-4 mb-1 mb-md-3">
                    <a href="app-transaction-detail.html" class="item">
                        <div class="detail">
                            <img src="assets/img/icon/thailand.png" alt="img" class="image-block imaged w48">
                            <div>
                                <strong>หวยล็อตเตอรี่</strong>
                                <!-- <p>Shopping</p> -->
                            </div>
                        </div>
                        <div class="right">
                            <button type="button" class="btn btn-luxury btn-block btn-lg font-weight-bold"
                                data-dismiss="modal">แทงหวย</button>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="col-md-6 col-xl-4 mb-1 mb-md-3">
                    <a href="app-transaction-detail.html" class="item">
                        <div class="detail">
                            <img src="assets/img/sample/brand/1.jpg" alt="img" class="image-block imaged w48">
                            <div>
                                <strong>หวยยี่กี่</strong>
                                <!-- <p>Shopping</p> -->
                            </div>
                        </div>
                        <div class="right">
                            <button type="button" class="btn btn-luxury btn-block btn-lg font-weight-bold"
                                data-dismiss="modal">แทงหวย</button>
                        </div>
                    </a>
                </div>
                <!-- * item -->
            </div>
        </div>
        <!-- * Transactions -->

        <!-- my cards -->
        <div class="section full mt-4">
            <div class="section-heading padding">
                <h2 class="title">My Cards</h2>
                <a href="app-cards.html" class="link">View All</a>
            </div>
            <div class="carousel-single owl-carousel owl-theme shadowfix">
                <div class="item">
                    <!-- card block -->
                    <div class="card-block bg-luxury">
                        <div class="card-main">
                            <div class="card-button dropdown">
                                <button type="button" class="btn btn-link btn-icon" data-toggle="dropdown">
                                    <ion-icon name="ellipsis-horizontal"></ion-icon>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="pencil-outline"></ion-icon>Edit
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="close-outline"></ion-icon>Remove
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="arrow-up-circle-outline"></ion-icon>Upgrade
                                    </a>
                                </div>
                            </div>
                            <div class="balance">
                                <span class="label">BALANCE</span>
                                <h1 class="title">$ 1,256,90</h1>
                            </div>
                            <div class="in">
                                <div class="card-number">
                                    <span class="label">Card Number</span>
                                    •••• 9905
                                </div>
                                <div class="bottom">
                                    <div class="card-expiry">
                                        <span class="label">Expiry</span>
                                        12 / 25
                                    </div>
                                    <div class="card-ccv">
                                        <span class="label">CCV</span>
                                        553
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- * card block -->
                </div>
                <div class="item">
                    <!-- card block -->
                    <div class="card-block bg-dark">
                        <div class="card-main">
                            <div class="card-button dropdown">
                                <button type="button" class="btn btn-link btn-icon" data-toggle="dropdown">
                                    <ion-icon name="ellipsis-horizontal"></ion-icon>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="pencil-outline"></ion-icon>Edit
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="close-outline"></ion-icon>Remove
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="arrow-up-circle-outline"></ion-icon>Upgrade
                                    </a>
                                </div>
                            </div>
                            <div class="balance">
                                <span class="label">BALANCE</span>
                                <h1 class="title">$ 1,256,90</h1>
                            </div>
                            <div class="in">
                                <div class="card-number">
                                    <span class="label">Card Number</span>
                                    •••• 9905
                                </div>
                                <div class="bottom">
                                    <div class="card-expiry">
                                        <span class="label">Expiry</span>
                                        12 / 25
                                    </div>
                                    <div class="card-ccv">
                                        <span class="label">CCV</span>
                                        553
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- * card block -->
                </div>
                <div class="item">
                    <!-- card block -->
                    <div class="card-block bg-secondary">
                        <div class="card-main">
                            <div class="card-button dropdown">
                                <button type="button" class="btn btn-link btn-icon" data-toggle="dropdown">
                                    <ion-icon name="ellipsis-horizontal"></ion-icon>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="pencil-outline"></ion-icon>Edit
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="close-outline"></ion-icon>Remove
                                    </a>
                                    <a class="dropdown-item" href="javacript:;">
                                        <ion-icon name="arrow-up-circle-outline"></ion-icon>Upgrade
                                    </a>
                                </div>
                            </div>
                            <div class="balance">
                                <span class="label">BALANCE</span>
                                <h1 class="title">$ 1,256,90</h1>
                            </div>
                            <div class="in">
                                <div class="card-number">
                                    <span class="label">Card Number</span>
                                    •••• 9905
                                </div>
                                <div class="bottom">
                                    <div class="card-expiry">
                                        <span class="label">Expiry</span>
                                        12 / 25
                                    </div>
                                    <div class="card-ccv">
                                        <span class="label">CCV</span>
                                        553
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- * card block -->
                </div>
            </div>
        </div>
        <!-- * my cards -->

        <!-- Send Money -->
        <div class="section full mt-4">
            <div class="section-heading padding">
                <h2 class="title">Send Money</h2>
                <a href="javascript:;" class="link">Add New</a>
            </div>
            <div class="shadowfix carousel-small owl-carousel owl-theme">
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar2.jpg" alt="img" class="imaged w-48">
                            <strong>Jurrien</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar3.jpg" alt="img" class="imaged w-48">
                            <strong>Elwin</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar4.jpg" alt="img" class="imaged w-48">
                            <strong>Alma</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar5.jpg" alt="img" class="imaged w-48">
                            <strong>Justine</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar6.jpg" alt="img" class="imaged w-48">
                            <strong>Maria</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar7.jpg" alt="img" class="imaged w-48">
                            <strong>Pamela</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar8.jpg" alt="img" class="imaged w-48">
                            <strong>Neville</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar9.jpg" alt="img" class="imaged w-48">
                            <strong>Alex</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <a href="#">
                        <div class="user-card">
                            <img src="assets/img/sample/avatar/avatar10.jpg" alt="img" class="imaged w-48">
                            <strong>Stina</strong>
                        </div>
                    </a>
                </div>
                <!-- * item -->
            </div>
        </div>
        <!-- * Send Money -->

        <!-- Monthly Bills -->
        <div class="section full mt-4">
            <div class="section-heading padding">
                <h2 class="title">Monthly Bills</h2>
                <a href="app-bills.html" class="link">View All</a>
            </div>
            <div class="carousel-multiple owl-carousel owl-theme shadowfix">
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <img src="assets/img/sample/brand/1.jpg" alt="img" class="image-block imaged w48">
                        </div>
                        <div class="price">$ 14</div>
                        <p>Prime Monthly Subscription</p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <img src="assets/img/sample/brand/2.jpg" alt="img" class="image-block imaged w48">
                        </div>
                        <div class="price">$ 9</div>
                        <p>Music Monthly Subscription</p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <div class="iconbox bg-danger">
                                <ion-icon name="medkit-outline"></ion-icon>
                            </div>
                        </div>
                        <div class="price">$ 299</div>
                        <p>Monthly Health Insurance</p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="bill-box">
                        <div class="img-wrapper">
                            <div class="iconbox">
                                <ion-icon name="card-outline"></ion-icon>
                            </div>
                        </div>
                        <div class="price">$ 962</div>
                        <p>Credit Card Statement
                        </p>
                        <a href="#" class="btn btn-primary btn-block btn-sm">PAY NOW</a>
                    </div>
                </div>
                <!-- * item -->
            </div>
        </div>
        <!-- * Monthly Bills -->


        <!-- Saving Goals -->
        <div class="section mt-4">
            <div class="section-heading">
                <h2 class="title">Saving Goals</h2>
                <a href="app-savings.html" class="link">View All</a>
            </div>
            <div class="goals">
                <!-- item -->
                <div class="item">
                    <div class="in">
                        <div>
                            <h4>Gaming Console</h4>
                            <p>Gaming</p>
                        </div>
                        <div class="price">$ 499</div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85"
                            aria-valuemin="0" aria-valuemax="100">85%</div>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="in">
                        <div>
                            <h4>New House</h4>
                            <p>Living</p>
                        </div>
                        <div class="price">$ 100,000</div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55"
                            aria-valuemin="0" aria-valuemax="100">55%</div>
                    </div>
                </div>
                <!-- * item -->
                <!-- item -->
                <div class="item">
                    <div class="in">
                        <div>
                            <h4>Sport Car</h4>
                            <p>Lifestyle</p>
                        </div>
                        <div class="price">$ 42,500</div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 15%;" aria-valuenow="15"
                            aria-valuemin="0" aria-valuemax="100">15%</div>
                    </div>
                </div>
                <!-- * item -->
            </div>
        </div>
        <!-- * Saving Goals -->


        <!-- News -->
        <div class="section full mt-4 mb-3">
            <div class="section-heading padding">
                <h2 class="title">Lastest News</h2>
                <a href="app-blog.html" class="link">View All</a>
            </div>
            <div class="shadowfix carousel-multiple owl-carousel owl-theme">

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/1.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">What will be the value of bitcoin in the next...</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/2.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">Rules you need to know in business</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/3.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">10 easy ways to save your money</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

                <!-- item -->
                <div class="item">
                    <a href="app-blog-post.html">
                        <div class="blog-card">
                            <img src="assets/img/sample/photo/4.jpg" alt="image" class="imaged w-100">
                            <div class="text">
                                <h4 class="title">Follow the financial agenda with...</h4>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- * item -->

            </div>
        </div>
        <!-- * News -->


        <!-- app footer -->
        <div class="appFooter">
            <div class="footer-title">
                Copyright © NiSK-Dev 2020. All Rights Reserved.
            </div>
        </div>
        <!-- * app footer -->

    </div>
    <!-- * App Capsule -->


    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <a href="app-index.html" class="item active">
            <div class="col">
                <ion-icon name="home"></ion-icon>
                <strong>หน้าแรก</strong>
            </div>
        </a>
        <a href="app-pages.html" class="item">
            <div class="col">
                <ion-icon name="document-text-outline"></ion-icon>
                <strong>โพยหวย</strong>
            </div>
        </a>
        <a href="app-components.html" class="item">
            <div class="col">
                <ion-icon name="apps-outline"></ion-icon>
                <strong>แทงหวย</strong>
            </div>
        </a>
        <a href="app-cards.html" class="item">
            <div class="col">
                <ion-icon name="card-outline"></ion-icon>
                <strong>บัญชี</strong>
            </div>
        </a>
        <a href="app-settings.html" class="item">
            <div class="col">
                <ion-icon name="settings-outline"></ion-icon>
                <strong>ตั้งค่า</strong>
            </div>
        </a>
    </div>
    <!-- * App Bottom Menu -->

    <!-- App Sidebar -->
    <div class="modal fade panelbox panelbox-left" id="sidebarPanel" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <!-- profile box -->
                    <div class="profileBox pt-2 pb-2">
                        <div class="image-wrapper">
                            <img src="assets/img/sample/avatar/avatar1.jpg" alt="image" class="imaged  w36">
                        </div>
                        <div class="in">
                            <strong>Sebastian Doe</strong>
                            <div class="text-muted">4029209</div>
                        </div>
                        <a href="#" class="btn btn-link btn-icon sidebar-close text-luxury" data-dismiss="modal">
                            <ion-icon name="close-outline"></ion-icon>
                        </a>
                    </div>
                    <!-- * profile box -->
                    <!-- balance -->
                    <div class="sidebar-balance">
                        <div class="listview-title">เครดิตคงเหลือ</div>
                        <div class="in">
                            <h1 class="amount">2,562.50</h1>
                        </div>
                    </div>
                    <!-- * balance -->

                    <!-- action group -->
                    <div class="action-group">
                        <a href="app-index.html" class="action-button">
                            <div class="in">
                                <div class="iconbox text-yellow">
                                    <ion-icon name="add-outline"></ion-icon>
                                </div>
                                ฝากเครดิต
                            </div>
                        </a>
                        <a href="app-index.html" class="action-button">
                            <div class="in">
                                <div class="iconbox text-yellow">
                                    <ion-icon name="arrow-down-outline"></ion-icon>
                                </div>
                                ถอนเครดิต
                            </div>
                        </a>
                        <a href="app-cards.html" class="action-button">
                            <div class="in">
                                <div class="iconbox text-yellow">
                                    <ion-icon name="card-outline"></ion-icon>
                                </div>
                                บัญชี
                            </div>
                        </a>
                        <a href="app-index.html" class="action-button">
                            <div class="in">
                                <div class="iconbox text-yellow">
                                    <ion-icon name="swap-vertical"></ion-icon>
                                </div>
                                ประวัติ
                            </div>
                        </a>
                    </div>
                    <!-- * action group -->

                    <!-- menu -->
                    <div class="listview-title mt-1">Menu</div>
                    <ul class="listview flush transparent no-line image-listview">
                        <li>
                            <a href="app-index.html" class="item">
                                <div class="icon-box bg-primary">
                                    <ion-icon name="pie-chart-outline"></ion-icon>
                                </div>
                                <div class="in">
                                    Overview
                                    <span class="badge badge-primary">10</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="app-pages.html" class="item">
                                <div class="icon-box bg-primary">
                                    <ion-icon name="document-text-outline"></ion-icon>
                                </div>
                                <div class="in">
                                    Pages
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="app-components.html" class="item">
                                <div class="icon-box bg-primary">
                                    <ion-icon name="apps-outline"></ion-icon>
                                </div>
                                <div class="in">
                                    Components
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="app-cards.html" class="item">
                                <div class="icon-box bg-primary">
                                    <ion-icon name="card-outline"></ion-icon>
                                </div>
                                <div class="in">
                                    My Cards
                                </div>
                            </a>
                        </li>
                    </ul>
                    <!-- * menu -->

                    <!-- others -->
                    <div class="listview-title mt-1">Others</div>
                    <ul class="listview flush transparent no-line image-listview">
                        <li>
                            <a href="app-settings.html" class="item">
                                <div class="icon-box bg-primary">
                                    <ion-icon name="settings-outline"></ion-icon>
                                </div>
                                <div class="in">
                                    Settings
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="component-messages.html" class="item">
                                <div class="icon-box bg-primary">
                                    <ion-icon name="chatbubble-outline"></ion-icon>
                                </div>
                                <div class="in">
                                    Support
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="app-login.html" class="item">
                                <div class="icon-box bg-primary">
                                    <ion-icon name="log-out-outline"></ion-icon>
                                </div>
                                <div class="in">
                                    Log out
                                </div>
                            </a>
                        </li>
                    </ul>
                    <!-- * others -->

                    <!-- send money -->
                    <div class="listview-title mt-1">Send Money</div>
                    <ul class="listview image-listview flush transparent no-line">
                        <li>
                            <a href="#" class="item">
                                <img src="assets/img/sample/avatar/avatar2.jpg" alt="image" class="image">
                                <div class="in">
                                    <div>Artem Sazonov</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="item">
                                <img src="assets/img/sample/avatar/avatar4.jpg" alt="image" class="image">
                                <div class="in">
                                    <div>Sophie Asveld</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="item">
                                <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="image">
                                <div class="in">
                                    <div>Kobus van de Vegte</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <!-- * send money -->

                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const loginForm = document.forms['loginForm'];
            loginForm.addEventListener('submit', async e => {
                e.preventDefault();
                try {
                    switchSubmitBtnState(loginForm);
                    const formData = new FormData(loginForm);
                    const result = await fetchJson('/login', 'POST', formData);
                    if (!result) return;
                    location.href = "/";
                } catch (err) {
                    swal({
                        title: err.title || 'ขออภัย',
                        text: err.text ||
                            'พบข้อบกพร่องทางเทคนิค โปรดลองอีกครั้ง หรือติดต่อเจ้าหน้าที่เพื่อขอรับความช่วยเหลือ',
                        icon: err.icon || 'error',
                        buttons: ['ปิด', 'แจ้งปัญหา'],
                    }).then(redirect => redirect && location.assign('/report'));
                } finally {
                    switchSubmitBtnState(loginForm);
                }
            });
        });


        $(function() {

            var loginForm = $('#loginForm');
            var btnLogout = $('#btnLogout');

            // loginForm.on('submit', function(e) {
            //     e.preventDefault();
            //     var url = '../Portal/main.php?cm=member_login';
            //     var formData = $(this).serialize();
            //     $.post(url, formData, function(response) {
            //         if (response.success) {
            //             swal('เข้าสู่ระบบเรียบร้อย', 'ยินดีต้อนรับ: ' + response.name,
            //                 'success', {
            //                     buttons: false,
            //                     timer: 1000
            //                 });
            //             setTimeout(function() {
            //                 location.reload();
            //             }, 1000);
            //         } else {
            //             swal('ผิดพลาด', response.code, 'error', {
            //                 buttons: false
            //             });
            //         }
            //     }, 'json')
            // });

            btnLogout.on('click', function(e) {
                e.preventDefault();
                swal('ออกจากระบบ', 'ยืนยันการออกจากระบบ?', 'warning', {
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                    dangerMode: true
                }).then((sure) => {
                    if (sure) {
                        var url = '../Portal/main.php?cm=front_logout';
                        $.post(url, {}, function(response) {
                            location.reload();
                        });
                    }
                });
            });

            fetchCredit();

            function fetchCredit() {
                var url = '../Portal/main.php?cm=fetchViewAmount';
                $.get(url, {}, function(response) {
                    $('#displayCredit').html(response);
                });
            }

        });

    </script>
@endsection