<?php include 'header.php'; ?>
<?php include '_top-header.php'; ?>

<div class="page">

    <div class="container p-0">

        <div class="profile-layout">

            <div class="start">
                <?php include '_profile-layout-side-menu.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="row mb-3">

                    <div class="col-md-8">

                        <div class="card admin-card h-100">

                            <div class="card-header no-border">
                                <div class="start">
                                    <div class="d-flex align-items-center">
                                        <div class="icon">
                                            <i class="icon icon-wallet-2 icon-xxl color-primary me-3"></i>
                                        </div>
                                        <div class="d-block">
                                            <p class="title"> My Wallet </p>
                                            <h3 class="value"> 255 KWD </h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="end">
                                    <div class="d-flex align-items-center">
                                        <a href="#" class="btn btn-sm btn-gray me-2" data-toggle="modal" data-target="#withdrawModal"> <i class="icon icon-withdraw color-primary icon-lg me-1"></i> Withdraw </a>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body mb-0">
                                <p class="color-warning-light-400 font-light mb-0"> You can withdraw your balance to your bank account after reaching 20 KWD </p>
                            </div>

                        </div>
                    </div>

                    <div class="col-md-4">

                        <div class="card h-100">
                            <div class="d-flex justify-content-center align-items-center">
                                <div class="image-wrapper w-100px">
                                    <img src="assets/img/wallet-1.png" class="h-90px w-auto">
                                </div>
                                <div class="text-wrapper">
                                    <p class="mb-2 font-light"> Now you can purchase cards from kashkom using wallet </p>
                                    <a href="#" class="btn-link p-0 m-0">
                                        Explore Cards
                                        <i class="icon icon-arrow-right icon-sm ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>

                </div> <!-- row -->

                <div class="card mb-3">
                    <div class="row d-flex justify-content-between align-items-center">
                        <div class="col-6"> No Bank Accounts </div>
                        <div class="col-6 text-end">
                            <a href="#" class="btn btn-sm btn-primary-faded" data-toggle="modal" data-target="#addBankAccountModal"> Add Bank Account </a>
                        </div>
                    </div>
                </div> <!-- card -->

                <div class="card mb-3">
                    <div class="row d-flex justify-content-between align-items-center">
                        <div class="col-6">
                            <p class="mb-1"> Personal Account </p>
                            <p class="m-0 color-gray"> National bank of kuwait </p>
                        </div>
                        <div class="col-6 text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2">
                                <a href="#" class="btn btn-sm btn-outline-primary min-w-100" data-toggle="modal" data-target="#addBankAccountModal"> Edit </a>
                                <a href="#" class="btn btn-sm btn-action btn-danger-faded" data-toggle="modal" data-target="#deleteBankAccountModal"> <i class="icon icon-trash icon-lg"></i> </a>
                            </div>
                        </div>
                    </div>
                </div> <!-- card -->

                <div class="card mb-3">

                    <div class="row d-flex justify-content-between align-items-center mb-3">

                        <div class="col-sm-3 d-flex justify-content-center justify-content-sm-start align-items-center mb-2 mb-sm-0">
                            <p class="mb-1"> Transactions </p>
                        </div>

                        <div class="col-sm-9 d-flex justify-content-center justify-content-sm-end align-items-center">
                            <div class="form-group m-0">
                                <div class="relative flatpickr-date-range-wrapper">
                                    <input type="text" class="form-control flatpickr-daterange" placeholder="From                                               To ">
                                    <div class="end-content">
                                        <i class="icon icon-lg icon-calendar color-gray"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="custom-tabs-wrapper style4">

                        <div class="nav-tabs-wrapper">


                            <ul class="nav nav-tabs justify-content-start mb-2">

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm active" id="all-tab" data-toggle="tab" data-target="#all"> All </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="posts-tab" data-toggle="tab" data-target="#posts"> Posts </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="shop-tab" data-toggle="tab" data-target="#shop"> Shop </button>
                                </li>
                            </ul>

                            <div class="tab-content" id="myTabContent">

                                <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">

                                    <table class="table table-sm custom-table vertical-align-middle">

                                        <tr>
                                            <td>
                                                <span class="btn btn-sm btn-gray cursor-auto me-2"> <i class="icon icon-post-payment icon-lg me-1"></i> </span>
                                            </td>
                                            <td>
                                                <span class="color-danger me-2"> 0.5 KWD </span>
                                                <span class="badge badge-xxs badge-danger-faded">
                                                    <i class="icon icon-up-right icon-xxs"></i>
                                                </span>
                                            </td>
                                            <td>
                                                <span> Post payment </span>
                                            </td>
                                            <td>
                                                <span class="color-gray"> 4 Sep, 2024 </span>
                                            </td>
                                            <td class="text-end">
                                                <a href="#" class="btn btn-link btn-sm p-0"> View Post </a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <span class="btn btn-sm btn-gray cursor-auto me-2"> <i class="icon icon-share icon-lg me-1"></i> </span>
                                            </td>
                                            <td>
                                                <span class="color-success me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-success-faded"> <i class="icon icon-down-left icon-xxs"></i> </span>
                                            </td>
                                            <td>
                                                <span> Share </span>
                                            </td>
                                            <td>
                                                <span class="color-gray"> 4 Sep, 2024 </span>
                                            </td>
                                            <td class="text-end">
                                                <a href="#" class="btn btn-link btn-sm p-0"> View Post </a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <span class="btn btn-sm btn-gray cursor-auto me-2"> <i class="icon icon-view icon-lg me-1"></i> </span>
                                            </td>
                                            <td>
                                                <span class="color-success me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-success-faded"> <i class="icon icon-down-left icon-xxs"></i> </span>
                                            </td>
                                            <td>
                                                <span> View </span>
                                            </td>
                                            <td>
                                                <span class="color-gray"> 4 Sep, 2024 </span>
                                            </td>
                                            <td class="text-end">
                                                <a href="#" class="btn btn-link btn-sm p-0"> View Post </a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <span class="btn btn-sm btn-gray cursor-auto me-2"> <i class="icon icon-budget-increase icon-lg me-1"></i> </span>
                                            </td>
                                            <td>
                                                <span class="color-danger me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-danger-faded"> <i class="icon icon-up-right icon-xxs"></i> </span>
                                            </td>
                                            <td>
                                                <span> budget increase </span>
                                            </td>
                                            <td>
                                                <span class="color-gray"> 4 Sep, 2024 </span>
                                            </td>
                                            <td class="text-end">
                                                <a href="#" class="btn btn-link btn-sm p-0"> View Post </a>
                                            </td>
                                        </tr>

                                        <?php foreach (range(0, 3) as $i) { ?>
                                            <tr>
                                                <td>
                                                    <span class="btn btn-sm btn-gray cursor-auto me-2"> <i class="icon icon-order-purchased icon-lg me-1"></i> </span>
                                                </td>
                                                <td>
                                                    <span class="color-danger me-2"> 0.5 KWD </span> <span class="badge badge-xxs badge-danger-faded"> <i class="icon icon-up-right icon-xxs"></i> </span>
                                                </td>
                                                <td>
                                                    <span> Order purchased </span>
                                                </td>
                                                <td>
                                                    <span class="color-gray"> 4 Sep, 2024 </span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="#" class="btn btn-link btn-sm p-0"> View Post </a>
                                                </td>
                                            </tr>
                                        <?php } ?>


                                    </table>

                                </div>

                                <div class="tab-pane fade" id="posts" role="tabpanel" aria-labelledby="posts-tab">
                                    <div class="no-data">
                                        <img src="assets/img/no-data.svg" class="no-data-image">
                                        <p class="m-0"> No Transactions here </p>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="shop" role="tabpanel" aria-labelledby="shop-tab">
                                    <div class="no-data">
                                        <img src="assets/img/no-data.svg" class="no-data-image">
                                        <p class="m-0"> No Transactions here </p>
                                    </div>
                                </div>

                            </div>

                        </div> <!-- nav-tabs-wrapper -->
                    </div> <!-- custom-tabs-wrapper -->


                </div> <!-- card -->

            </div> <!-- end -->

        </div> <!-- profile-layout -->

    </div> <!-- container -->

</div> <!-- page -->

<?php include 'footer.php'; ?>

<div class="modal fade" id="addBankAccountModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Add new bank account </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

            <div class="modal-body">

                <div class="form-group mb-3">
                    <label> Choose Bank </label>
                    <select class="form-control select2">
                        <option value="01">Bank 01</option>
                        <option value="02">Bank 02</option>
                        <option value="03">Bank 03</option>
                    </select>
                </div>

                <div class="form-group">
                    <label> Title </label>
                    <input type="text" class="form-control" placeholder="Title">
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label> First name </label>
                            <input type="text" class="form-control" placeholder="First name">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label> Last name </label>
                            <input type="text" class="form-control" placeholder="Last name">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label> IBAN </label>
                    <input type="text" class="form-control" placeholder="IBAN">
                </div>

                <div class="form-group">
                    <label> Civil ID </label>
                    <input type="text" class="form-control" placeholder="Civil ID">
                </div>

                <div class="modal-buttons text-center">
                    <button class="btn btn-primary w-100" data-dismiss="modal"> Add </button>
                </div>

            </div>

        </div> <!-- modal-content -->
    </div> <!-- modal-dialog -->
</div> <!-- modal -->

<div class="modal fade" id="deleteBankAccountModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-body">
                <h6 class="bold text-center mb-3"> Are you sure you want to delete your bank account ? </h6>
                <p class="text-center color-gray"> Once you hit the delete button, there's no way to recover it, Take a moment to think about it and make sure you're 100% sure before you proceed </p>

                <div class="modal-buttons text-center">
                    <button class="btn btn-primary w-100 mb-2" data-dismiss="modal"> Keep your Account </button>
                    <button class="btn btn-outline-primary w-100" data-dismiss="modal"> Yes, Delete </button>
                </div>

            </div>




        </div> <!-- modal-content -->
    </div> <!-- modal-dialog -->
</div> <!-- modal -->

<div class="modal fade" id="withdrawModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Withdraw </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

            <div class="modal-body">

                <div class="withdraw-box mb-2" data-max-amount="70" data-min-amount="30">
                    <p class="mb-3 color-gray font-light lead"> Enter amount </p>
                    <div class="withdraw-amount-wrapper">
                        <input type="text" class="withdraw-number" id="withdraw-amount" value="30" placeholder="0" />
                        <p class="withdraw-currency"> KWD </p>
                    </div><!-- withdraw-amount -->
                </div><!-- withdraw-box -->

                <div class="d-flex justify-content-between align-items-start mb-1">
                    <div class="start">
                        <p class="mb-0"> Enter amount between </p>
                        <p class="m-0 color-primary"> 30 to 70 KWD </p>
                    </div>
                    <div class="end">
                        <p class="m-0"> balance : <span class="color-primary"> 17 KWD </span></p>
                    </div>
                </div>

                <hr />

                <p class="mb-2"> Bank account </p>

                <div class="mb-3 base-border base-border-radius p-2 flex-between">

                    <div class="start">
                        <p class="mb-1"> Personal Account </p>
                        <p class="m-0 color-gray"> National bank of kuwait </p>
                    </div>

                    <div class="end">

                        <div class="dropdown cursor-pointer">

                            <a data-toggle="dropdown">
                                <i class="icon icon-ellipsis color-gray icon-lg"></i>
                            </a>

                            <div class="dropdown-menu p-0 m-0">

                                <a class="py-2 dropdown-item border-bottom" href="#"> Edit </a>

                                <a class="py-2 dropdown-item color-danger" href="#"> Delete </a>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-buttons text-center">
                    <button class="btn btn-primary w-100" data-dismiss="modal" id="withdraw-submit"> Continue </button>
                </div>

            </div> <!-- modal-body -->



        </div> <!-- modal-content -->
    </div> <!-- modal-dialog -->
</div> <!-- modal -->