<?php
        $first_name = (!empty(Auth::user()->first_name)) ? Auth::user()->first_name : '';
        $last_name = (!empty(Auth::user()->last_name)) ? Auth::user()->last_name : '';
        $email = (!empty(Auth::user()->email)) ? Auth::user()->email : '';
        $phone = (!empty(Auth::user()->phone)) ? Auth::user()->phone : '';
?>

<?php if (isset($component)) { $__componentOriginal1d82783c246b53da9bd54777b9e76c22 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal1d82783c246b53da9bd54777b9e76c22 = $attributes; } ?>
<?php $component = App\View\Components\Backoffice\BackLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('backoffice.back-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(App\View\Components\Backoffice\BackLayout::class))->getConstructor()): ?>
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
<?php endif; ?>
<?php $component->withAttributes(['title' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($title),'breadcrumb' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($breadcrumb)]); ?>

    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
        <!--begin::Layout-->
        <div class="d-flex flex-column flex-xl-row ">
            <!--begin::Sidebar-->
            <div class="flex-column flex-lg-row-auto w-100 w-xl-350px mb-10">
                <!--begin::Card-->
                <div class="card mb-5 mb-xl-8">
                    <!--begin::Card body-->
                    <div class="card-body pt-15">
                        <!--begin::Summary-->
                        <div class="d-flex flex-center flex-column mb-5">
                            <!--begin::Avatar-->
                            <div class="symbol symbol-100px symbol-circle mb-7">
                                <img src="assets/media/avatars/300-1.jpg" alt="image">
                            </div>
                            <!--end::Avatar-->

                            <!--begin::Name-->
                            <a href="#" class="fs-3 text-gray-800 text-hover-primary fw-bold mb-1">
                                Max Smith </a>
                            <!--end::Name-->

                            <!--begin::Position-->
                            <div class="fs-5 fw-semibold text-muted mb-6">
                                Software Enginer </div>
                            <!--end::Position-->
                        </div>
                        <!--end::Summary-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Sidebar-->

            <!--begin::Content-->
            <div class="flex-lg-row-fluid ms-lg-15">
                <!--begin:::Tabs-->
                <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-8"
                    role="tablist">
                    <!--begin:::Tab item-->
                    <li class="nav-item" role="presentation">
                        <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab"
                            href="#kt_customer_view_overview_tab" aria-selected="true" role="tab">Profil</a>
                    </li>
                    <!--end:::Tab item-->

                    <!--begin:::Tab item-->
                    <li class="nav-item" role="presentation">
                        <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab"
                            href="#kt_customer_view_overview_events_and_logs_tab" aria-selected="false" tabindex="-1"
                            role="tab">Securité</a>
                    </li>
                    <!--end:::Tab item-->

                    <!--begin:::Tab item-->
                    <li class="nav-item ms-auto d-none">
                        <!--begin::Action menu-->
                        <a href="#" class="btn btn-primary ps-7" data-kt-menu-trigger="click"
                            data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
                            Actions
                            <i class="ki-outline ki-down fs-2 me-0"></i> </a>
                        <!--begin::Menu-->
                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold py-4 w-250px fs-6"
                            data-kt-menu="true">
                            <!--begin::Menu item-->
                            <div class="menu-item px-5">
                                <div class="menu-content text-muted pb-2 px-5 fs-7 text-uppercase">
                                    Payments
                                </div>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-5">
                                <a href="#" class="menu-link px-5">
                                    Create invoice
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-5">
                                <a href="#" class="menu-link flex-stack px-5">
                                    Create payments

                                    <span class="ms-2" data-bs-toggle="tooltip"
                                        aria-label="Specify a target name for future usage and reference"
                                        data-bs-original-title="Specify a target name for future usage and reference"
                                        data-kt-initialized="1">
                                        <i class="ki-outline ki-information fs-7"></i> </span>
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-5" data-kt-menu-trigger="hover"
                                data-kt-menu-placement="left-start">
                                <a href="#" class="menu-link px-5">
                                    <span class="menu-title">Subscription</span>
                                    <span class="menu-arrow"></span>
                                </a>

                                <!--begin::Menu sub-->
                                <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-5">
                                            Apps
                                        </a>
                                    </div>
                                    <!--end::Menu item-->

                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-5">
                                            Billing
                                        </a>
                                    </div>
                                    <!--end::Menu item-->

                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-5">
                                            Statements
                                        </a>
                                    </div>
                                    <!--end::Menu item-->

                                    <!--begin::Menu separator-->
                                    <div class="separator my-2"></div>
                                    <!--end::Menu separator-->

                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <div class="menu-content px-3">
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input w-30px h-20px" type="checkbox"
                                                    value="" name="notifications" checked=""
                                                    id="kt_user_menu_notifications">
                                                <span class="form-check-label text-muted fs-6"
                                                    for="kt_user_menu_notifications">
                                                    Notifications
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                    <!--end::Menu item-->
                                </div>
                                <!--end::Menu sub-->
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu separator-->
                            <div class="separator my-3"></div>
                            <!--end::Menu separator-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-5">
                                <div class="menu-content text-muted pb-2 px-5 fs-7 text-uppercase">
                                    Account
                                </div>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-5">
                                <a href="#" class="menu-link px-5">
                                    Reports
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-5 my-1">
                                <a href="#" class="menu-link px-5">
                                    Account Settings
                                </a>
                            </div>
                            <!--end::Menu item-->

                            <!--begin::Menu item-->
                            <div class="menu-item px-5">
                                <a href="#" class="menu-link text-danger px-5">
                                    Delete customer
                                </a>
                            </div>
                            <!--end::Menu item-->
                        </div>
                        <!--end::Menu-->
                        <!--end::Menu-->
                    </li>
                    <!--end:::Tab item-->

                </ul>
                <!--end:::Tabs-->

                <!--begin:::Tab content-->
                <div class="tab-content" id="myTabContent">
                    <!--begin:::Tab pane-->
                    <div class="tab-pane fade show active" id="kt_customer_view_overview_tab" role="tabpanel">
                        <div class="card pt-4 mb-6 mb-xl-9">
                            <!--begin::Card-->
                            <form>
                                <!--begin::Card body-->
                                <div class="card-body p-20 pb-0 pt-1">
                                    <!--begin::Input group-->
                                    <div class="row mb-6">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 col-form-label fw-semibold fs-6">Photo</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <!--begin::Image input-->
                                            <div class="image-input image-input-outline" data-kt-image-input="true"
                                                style="background-image: url('assets/media/svg/avatars/blank.svg')">
                                                <!--begin::Preview existing avatar-->
                                                <div class="image-input-wrapper w-125px h-125px"
                                                    style="background-image: url(assets/media/avatars/300-1.jpg)">
                                                </div>
                                                <!--end::Preview existing avatar-->

                                                <!--begin::Label-->
                                                <label
                                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                    aria-label="Change avatar" data-bs-original-title="Change avatar"
                                                    data-kt-initialized="1">
                                                    <i class="ki-outline ki-pencil fs-7"></i>
                                                    <!--begin::Inputs-->
                                                    <input type="file" name="avatar" accept=".png, .jpg, .jpeg">
                                                    <input type="hidden" name="avatar_remove" wfd-invisible="true">
                                                    <!--end::Inputs-->
                                                </label>
                                                <!--end::Label-->

                                                <!--begin::Cancel-->
                                                <span
                                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                                    aria-label="Cancel avatar" data-bs-original-title="Cancel avatar"
                                                    data-kt-initialized="1" wfd-invisible="true">
                                                    <i class="ki-outline ki-cross fs-2"></i> </span>
                                                <!--end::Cancel-->

                                                <!--begin::Remove-->
                                                <span
                                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                                    aria-label="Remove avatar" data-bs-original-title="Remove avatar"
                                                    data-kt-initialized="1">
                                                    <i class="ki-outline ki-cross fs-2"></i> </span>
                                                <!--end::Remove-->
                                            </div>
                                            <!--end::Image input-->

                                            <!--begin::Hint-->
                                            <div class="form-text">Fichiers acceptés: png, jpg, jpeg.</div>
                                            <!--end::Hint-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row mb-6">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 col-form-label required fw-semibold fs-6">Nom &
                                            Prénoms</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <!--begin::Row-->
                                            <div class="row">
                                                <!--begin::Col-->
                                                <div class="col-lg-6 fv-row fv-plugins-icon-container">
                                                    <input type="text" name="last-name"
                                                        class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
                                                        placeholder="Nom" value="<?php echo e($last_name); ?>">
                                                </div>
                                                <!--end::Col-->

                                                <!--begin::Col-->
                                                <div class="col-lg-6 fv-row fv-plugins-icon-container">
                                                    <input type="text" name="last_name"
                                                        class="form-control form-control-lg form-control-solid"
                                                        placeholder="Prénoms" value="<?php echo e($first_name); ?>">
                                                </div>
                                                <!--end::Col-->
                                            </div>
                                            <!--end::Row-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row mb-6">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 col-form-label required fw-semibold fs-6">Email</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <input type="email" name="email"
                                                class="form-control form-control-lg form-control-solid"
                                                placeholder="Email" value="<?php echo e($email); ?>">
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row mb-6">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 col-form-label fw-semibold fs-6">
                                            <span class="required">Contact téléphone</span>
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <input type="tel" name="phone"
                                                class="form-control form-control-lg form-control-solid"
                                                placeholder="Numéro de téléphone" value="<?php echo e($phone); ?>">
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->
                                </div>
                                <!--end::Card body-->
                                <!--begin::Actions-->
                                <div class="d-flex justify-content-center py-6 px-9">
                                    <button type="submit"
                                        class="btn btn-primary w-400px rounded-4">Enregistrer</button>
                                </div>
                            </form>
                            <!--end::Card-->
                        </div>
                    </div>
                    <!--end:::Tab pane-->

                    <!--begin:::Tab pane-->
                    <div class="tab-pane fade" id="kt_customer_view_overview_events_and_logs_tab" role="tabpanel">
                        <div class="card pt-4 mb-6 mb-xl-9">

                            <!--begin::Card-->
                            <form>
                                <!--begin::Card body-->
                                <div class="card-body p-20 pb-0">
                                    <!--begin::Input group-->
                                    <div class="row mb-6">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 col-form-label required fw-semibold fs-6">Mot de passe
                                            actuel</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <input type="password" name="email"
                                                class="form-control form-control-lg form-control-solid"
                                                value="****">
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row mb-6">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 col-form-label fw-semibold fs-6">
                                            <span class="required">Nouveau mot de passe</span>
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <input type="password" name="phone"
                                                class="form-control form-control-lg form-control-solid"
                                                value="">
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row mb-6">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 col-form-label fw-semibold fs-6">
                                            <span class="required">Confirmation du mot de passe</span>
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <input type="password" name="phone"
                                                class="form-control form-control-lg form-control-solid"
                                                value="">
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->
                                </div>
                                <!--end::Card body-->
                                <!--begin::Actions-->
                                <div class="d-flex justify-content-center py-6 px-9">
                                    <button type="submit" class="btn btn-primary w-400px">Enregistrer</button>
                                </div>
                            </form>
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end:::Tab pane-->

                    <!--begin:::Tab pane-->
                    <div class="tab-pane fade" id="kt_customer_view_overview_statements" role="tabpanel">
                        <!--begin::Earnings-->
                        <div class="card mb-6 mb-xl-9">
                            <!--begin::Header-->
                            <div class="card-header border-0">
                                <div class="card-title">
                                    <h2>Earnings</h2>
                                </div>
                            </div>
                            <!--end::Header-->

                            <!--begin::Body-->
                            <div class="card-body py-0">
                                <div class="fs-5 fw-semibold text-gray-500 mb-4">
                                    Last 30 day earnings calculated. Apart from arranging the order of topics.
                                </div>

                                <!--begin::Left Section-->
                                <div class="d-flex flex-wrap flex-stack mb-5">
                                    <!--begin::Row-->
                                    <div class="d-flex flex-wrap">
                                        <!--begin::Col-->
                                        <div
                                            class="border border-dashed border-gray-300 w-150px rounded my-3 p-4 me-6">
                                            <span class="fs-1 fw-bold text-gray-800 lh-1">
                                                <span data-kt-countup="true" data-kt-countup-value="6,840"
                                                    data-kt-countup-prefix="$">0</span>
                                                <i class="ki-outline ki-arrow-up fs-1 text-success"></i> </span>
                                            <span class="fs-6 fw-semibold text-muted d-block lh-1 pt-2">Net
                                                Earnings</span>
                                        </div>
                                        <!--end::Col-->

                                        <!--begin::Col-->
                                        <div
                                            class="border border-dashed border-gray-300 w-125px rounded my-3 p-4 me-6">
                                            <span class="fs-1 fw-bold text-gray-800 lh-1">
                                                <span class="" data-kt-countup="true"
                                                    data-kt-countup-value="16">0</span>%
                                                <i class="ki-outline ki-arrow-down fs-1 text-danger"></i> </span>
                                            <span class="fs-6 fw-semibold text-muted d-block lh-1 pt-2">Change</span>
                                        </div>
                                        <!--end::Col-->

                                        <!--begin::Col-->
                                        <div
                                            class="border border-dashed border-gray-300 w-150px rounded my-3 p-4 me-6">
                                            <span class="fs-1 fw-bold text-gray-800 lh-1">
                                                <span data-kt-countup="true" data-kt-countup-value="1,240"
                                                    data-kt-countup-prefix="$">0</span>
                                                <span class="text-primary">--</span>
                                            </span>
                                            <span class="fs-6 fw-semibold text-muted d-block lh-1 pt-2">Fees</span>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Row-->

                                    <a href="#" class="btn btn-sm btn-light-primary flex-shrink-0">Withdraw
                                        Earnings</a>
                                </div>
                                <!--end::Left Section-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Earnings-->


                        <!--begin::Statements-->
                        <div class="card mb-6 mb-xl-9">
                            <!--begin::Header-->
                            <div class="card-header">
                                <!--begin::Title-->
                                <div class="card-title">
                                    <h2>Statement</h2>
                                </div>
                                <!--end::Title-->

                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Tab nav-->
                                    <ul class="nav nav-stretch fs-5 fw-semibold nav-line-tabs nav-line-tabs-2x border-transparent"
                                        role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link text-active-primary active" data-bs-toggle="tab"
                                                role="tab" href="#kt_customer_view_statement_1"
                                                aria-selected="true">
                                                This Year
                                            </a>
                                        </li>

                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link text-active-primary ms-3" data-bs-toggle="tab"
                                                role="tab" href="#kt_customer_view_statement_2"
                                                aria-selected="false" tabindex="-1">
                                                2020
                                            </a>
                                        </li>

                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link text-active-primary ms-3" data-bs-toggle="tab"
                                                role="tab" href="#kt_customer_view_statement_3"
                                                aria-selected="false" tabindex="-1">
                                                2019
                                            </a>
                                        </li>

                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link text-active-primary ms-3" data-bs-toggle="tab"
                                                role="tab" href="#kt_customer_view_statement_4"
                                                aria-selected="false" tabindex="-1">
                                                2018
                                            </a>
                                        </li>
                                    </ul>
                                    <!--end::Tab nav-->
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Card body-->
                            <div class="card-body pb-5">
                                <!--begin::Tab Content-->
                                <div id="kt_customer_view_statement_tab_content" class="tab-content">
                                    <!--begin::Tab panel-->
                                    <div id="kt_customer_view_statement_1" class="py-0 tab-pane fade show active"
                                        role="tabpanel">
                                        <!--begin::Table-->
                                        <div id="kt_customer_view_statement_table_1_wrapper"
                                            class="dataTables_wrapper dt-bootstrap4 no-footer">
                                            <div class="table-responsive">
                                                <table id="kt_customer_view_statement_table_1"
                                                    class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable no-footer">
                                                    <thead class="border-bottom border-gray-200">
                                                        <tr
                                                            class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                            <th class="w-125px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_1"
                                                                rowspan="1" colspan="1" style="width: 125px;"
                                                                aria-label="Date: activate to sort column ascending">
                                                                Date</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_1"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Order ID: activate to sort column ascending">
                                                                Order ID</th>
                                                            <th class="w-300px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_1"
                                                                rowspan="1" colspan="1" style="width: 300px;"
                                                                aria-label="Details: activate to sort column ascending">
                                                                Details</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_1"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Amount: activate to sort column ascending">
                                                                Amount</th>
                                                            <th class="w-100px text-end pe-7 sorting_disabled"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Invoice">Invoice
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>


















                                                        <tr class="odd">
                                                            <td data-order="2021-01-01T00:00:00+00:00">Nov 01, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">102445788</a>
                                                            </td>
                                                            <td>Darknight transparency 36 Icons Pack</td>
                                                            <td class="text-success">$38.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2021-01-24T00:00:00+00:00">Oct 24, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">423445721</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-2.60</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2021-01-08T00:00:00+00:00">Oct 08, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Cartoon Mobile Emoji Phone Pack</td>
                                                            <td class="text-success">$76.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2021-01-15T00:00:00+00:00">Sep 15, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Iphone 12 Pro Mockup Mega Bundle</td>
                                                            <td class="text-success">$5.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2021-01-30T00:00:00+00:00">May 30, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">523445943</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-1.30</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2021-01-22T00:00:00+00:00">Apr 22, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">231445943</a>
                                                            </td>
                                                            <td>Parcel Shipping / Delivery Service App</td>
                                                            <td class="text-success">$204.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2021-01-09T00:00:00+00:00">Feb 09, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">426445943</a>
                                                            </td>
                                                            <td>Visual Design Illustration</td>
                                                            <td class="text-success">$31.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2021-01-01T00:00:00+00:00">Nov 01, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">984445943</a>
                                                            </td>
                                                            <td>Abstract Vusial Pack</td>
                                                            <td class="text-success">$52.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2021-01-04T00:00:00+00:00">Jan 04, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">324442313</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-0.80</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2021-01-01T00:00:00+00:00">Nov 01, 2021
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">102445788</a>
                                                            </td>
                                                            <td>Darknight transparency 36 Icons Pack</td>
                                                            <td class="text-success">$38.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="row">
                                                <div
                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                </div>
                                                <div
                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                    <div class="dataTables_paginate paging_simple_numbers"
                                                        id="kt_customer_view_statement_table_1_paginate">
                                                        <ul class="pagination">
                                                            <li class="paginate_button page-item previous disabled"
                                                                id="kt_customer_view_statement_table_1_previous"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_1"
                                                                    data-dt-idx="0" tabindex="0"
                                                                    class="page-link"><i class="previous"></i></a>
                                                            </li>
                                                            <li class="paginate_button page-item active"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_1"
                                                                    data-dt-idx="1" tabindex="0"
                                                                    class="page-link">1</a></li>
                                                            <li class="paginate_button page-item "><a href="#"
                                                                    aria-controls="kt_customer_view_statement_table_1"
                                                                    data-dt-idx="2" tabindex="0"
                                                                    class="page-link">2</a></li>
                                                            <li class="paginate_button page-item next"
                                                                id="kt_customer_view_statement_table_1_next"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_1"
                                                                    data-dt-idx="3" tabindex="0"
                                                                    class="page-link"><i class="next"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Table-->
                                    </div>
                                    <!--end::Tab panel-->
                                    <!--begin::Tab panel-->
                                    <div id="kt_customer_view_statement_2" class="py-0 tab-pane fade "
                                        role="tabpanel">
                                        <!--begin::Table-->
                                        <div id="kt_customer_view_statement_table_2_wrapper"
                                            class="dataTables_wrapper dt-bootstrap4 no-footer">
                                            <div class="table-responsive">
                                                <table id="kt_customer_view_statement_table_2"
                                                    class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable no-footer">
                                                    <thead class="border-bottom border-gray-200">
                                                        <tr
                                                            class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                            <th class="w-125px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_2"
                                                                rowspan="1" colspan="1" style="width: 125px;"
                                                                aria-label="Date: activate to sort column ascending">
                                                                Date</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_2"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Order ID: activate to sort column ascending">
                                                                Order ID</th>
                                                            <th class="w-300px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_2"
                                                                rowspan="1" colspan="1" style="width: 300px;"
                                                                aria-label="Details: activate to sort column ascending">
                                                                Details</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_2"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Amount: activate to sort column ascending">
                                                                Amount</th>
                                                            <th class="w-100px text-end pe-7 sorting_disabled"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Invoice">Invoice
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>


















                                                        <tr class="odd">
                                                            <td data-order="2020-01-30T00:00:00+00:00">May 30, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">523445943</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-1.30</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2020-01-22T00:00:00+00:00">Apr 22, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">231445943</a>
                                                            </td>
                                                            <td>Parcel Shipping / Delivery Service App</td>
                                                            <td class="text-success">$204.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2020-01-09T00:00:00+00:00">Feb 09, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">426445943</a>
                                                            </td>
                                                            <td>Visual Design Illustration</td>
                                                            <td class="text-success">$31.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2020-01-01T00:00:00+00:00">Nov 01, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">984445943</a>
                                                            </td>
                                                            <td>Abstract Vusial Pack</td>
                                                            <td class="text-success">$52.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2020-01-04T00:00:00+00:00">Jan 04, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">324442313</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-0.80</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2020-01-01T00:00:00+00:00">Nov 01, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">102445788</a>
                                                            </td>
                                                            <td>Darknight transparency 36 Icons Pack</td>
                                                            <td class="text-success">$38.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2020-01-24T00:00:00+00:00">Oct 24, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">423445721</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-2.60</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2020-01-08T00:00:00+00:00">Oct 08, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Cartoon Mobile Emoji Phone Pack</td>
                                                            <td class="text-success">$76.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2020-01-15T00:00:00+00:00">Sep 15, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Iphone 12 Pro Mockup Mega Bundle</td>
                                                            <td class="text-success">$5.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2020-01-30T00:00:00+00:00">May 30, 2020
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">523445943</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-1.30</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="row">
                                                <div
                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                </div>
                                                <div
                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                    <div class="dataTables_paginate paging_simple_numbers"
                                                        id="kt_customer_view_statement_table_2_paginate">
                                                        <ul class="pagination">
                                                            <li class="paginate_button page-item previous disabled"
                                                                id="kt_customer_view_statement_table_2_previous"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_2"
                                                                    data-dt-idx="0" tabindex="0"
                                                                    class="page-link"><i class="previous"></i></a>
                                                            </li>
                                                            <li class="paginate_button page-item active"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_2"
                                                                    data-dt-idx="1" tabindex="0"
                                                                    class="page-link">1</a></li>
                                                            <li class="paginate_button page-item "><a href="#"
                                                                    aria-controls="kt_customer_view_statement_table_2"
                                                                    data-dt-idx="2" tabindex="0"
                                                                    class="page-link">2</a></li>
                                                            <li class="paginate_button page-item next"
                                                                id="kt_customer_view_statement_table_2_next"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_2"
                                                                    data-dt-idx="3" tabindex="0"
                                                                    class="page-link"><i class="next"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Table-->
                                    </div>
                                    <!--end::Tab panel-->
                                    <!--begin::Tab panel-->
                                    <div id="kt_customer_view_statement_3" class="py-0 tab-pane fade "
                                        role="tabpanel">
                                        <!--begin::Table-->
                                        <div id="kt_customer_view_statement_table_3_wrapper"
                                            class="dataTables_wrapper dt-bootstrap4 no-footer">
                                            <div class="table-responsive">
                                                <table id="kt_customer_view_statement_table_3"
                                                    class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable no-footer">
                                                    <thead class="border-bottom border-gray-200">
                                                        <tr
                                                            class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                            <th class="w-125px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_3"
                                                                rowspan="1" colspan="1" style="width: 125px;"
                                                                aria-label="Date: activate to sort column ascending">
                                                                Date</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_3"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Order ID: activate to sort column ascending">
                                                                Order ID</th>
                                                            <th class="w-300px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_3"
                                                                rowspan="1" colspan="1" style="width: 300px;"
                                                                aria-label="Details: activate to sort column ascending">
                                                                Details</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_3"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Amount: activate to sort column ascending">
                                                                Amount</th>
                                                            <th class="w-100px text-end pe-7 sorting_disabled"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Invoice">Invoice
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>


















                                                        <tr class="odd">
                                                            <td data-order="2019-01-09T00:00:00+00:00">Feb 09, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">426445943</a>
                                                            </td>
                                                            <td>Visual Design Illustration</td>
                                                            <td class="text-success">$31.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2019-01-01T00:00:00+00:00">Nov 01, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">984445943</a>
                                                            </td>
                                                            <td>Abstract Vusial Pack</td>
                                                            <td class="text-success">$52.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2019-01-04T00:00:00+00:00">Jan 04, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">324442313</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-0.80</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2019-01-15T00:00:00+00:00">Sep 15, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Iphone 12 Pro Mockup Mega Bundle</td>
                                                            <td class="text-success">$5.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2019-01-01T00:00:00+00:00">Nov 01, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">102445788</a>
                                                            </td>
                                                            <td>Darknight transparency 36 Icons Pack</td>
                                                            <td class="text-success">$38.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2019-01-24T00:00:00+00:00">Oct 24, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">423445721</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-2.60</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2019-01-08T00:00:00+00:00">Oct 08, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Cartoon Mobile Emoji Phone Pack</td>
                                                            <td class="text-success">$76.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2019-01-30T00:00:00+00:00">May 30, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">523445943</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-1.30</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2019-01-22T00:00:00+00:00">Apr 22, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">231445943</a>
                                                            </td>
                                                            <td>Parcel Shipping / Delivery Service App</td>
                                                            <td class="text-success">$204.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2019-01-09T00:00:00+00:00">Feb 09, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">426445943</a>
                                                            </td>
                                                            <td>Visual Design Illustration</td>
                                                            <td class="text-success">$31.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="row">
                                                <div
                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                </div>
                                                <div
                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                    <div class="dataTables_paginate paging_simple_numbers"
                                                        id="kt_customer_view_statement_table_3_paginate">
                                                        <ul class="pagination">
                                                            <li class="paginate_button page-item previous disabled"
                                                                id="kt_customer_view_statement_table_3_previous"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_3"
                                                                    data-dt-idx="0" tabindex="0"
                                                                    class="page-link"><i class="previous"></i></a>
                                                            </li>
                                                            <li class="paginate_button page-item active"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_3"
                                                                    data-dt-idx="1" tabindex="0"
                                                                    class="page-link">1</a></li>
                                                            <li class="paginate_button page-item "><a href="#"
                                                                    aria-controls="kt_customer_view_statement_table_3"
                                                                    data-dt-idx="2" tabindex="0"
                                                                    class="page-link">2</a></li>
                                                            <li class="paginate_button page-item next"
                                                                id="kt_customer_view_statement_table_3_next"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_3"
                                                                    data-dt-idx="3" tabindex="0"
                                                                    class="page-link"><i class="next"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Table-->
                                    </div>
                                    <!--end::Tab panel-->
                                    <!--begin::Tab panel-->
                                    <div id="kt_customer_view_statement_4" class="py-0 tab-pane fade "
                                        role="tabpanel">
                                        <!--begin::Table-->
                                        <div id="kt_customer_view_statement_table_4_wrapper"
                                            class="dataTables_wrapper dt-bootstrap4 no-footer">
                                            <div class="table-responsive">
                                                <table id="kt_customer_view_statement_table_4"
                                                    class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semibold gy-4 dataTable no-footer">
                                                    <thead class="border-bottom border-gray-200">
                                                        <tr
                                                            class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                            <th class="w-125px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_4"
                                                                rowspan="1" colspan="1" style="width: 125px;"
                                                                aria-label="Date: activate to sort column ascending">
                                                                Date</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_4"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Order ID: activate to sort column ascending">
                                                                Order ID</th>
                                                            <th class="w-300px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_4"
                                                                rowspan="1" colspan="1" style="width: 300px;"
                                                                aria-label="Details: activate to sort column ascending">
                                                                Details</th>
                                                            <th class="w-100px sorting" tabindex="0"
                                                                aria-controls="kt_customer_view_statement_table_4"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Amount: activate to sort column ascending">
                                                                Amount</th>
                                                            <th class="w-100px text-end pe-7 sorting_disabled"
                                                                rowspan="1" colspan="1" style="width: 100px;"
                                                                aria-label="Invoice">Invoice
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>


















                                                        <tr class="odd">
                                                            <td data-order="2018-01-01T00:00:00+00:00">Nov 01, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">102445788</a>
                                                            </td>
                                                            <td>Darknight transparency 36 Icons Pack</td>
                                                            <td class="text-success">$38.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2018-01-24T00:00:00+00:00">Oct 24, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">423445721</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-2.60</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2018-01-01T00:00:00+00:00">Nov 01, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">102445788</a>
                                                            </td>
                                                            <td>Darknight transparency 36 Icons Pack</td>
                                                            <td class="text-success">$38.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2018-01-24T00:00:00+00:00">Oct 24, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">423445721</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-2.60</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2018-01-09T00:00:00+00:00">Feb 09, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">426445943</a>
                                                            </td>
                                                            <td>Visual Design Illustration</td>
                                                            <td class="text-success">$31.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2018-01-01T00:00:00+00:00">Nov 01, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">984445943</a>
                                                            </td>
                                                            <td>Abstract Vusial Pack</td>
                                                            <td class="text-success">$52.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2018-01-04T00:00:00+00:00">Jan 04, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">324442313</a>
                                                            </td>
                                                            <td>Seller Fee</td>
                                                            <td class="text-danger">$-0.80</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2018-01-08T00:00:00+00:00">Oct 08, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Cartoon Mobile Emoji Phone Pack</td>
                                                            <td class="text-success">$76.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="odd">
                                                            <td data-order="2018-01-08T00:00:00+00:00">Oct 08, 2018
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">312445984</a>
                                                            </td>
                                                            <td>Cartoon Mobile Emoji Phone Pack</td>
                                                            <td class="text-success">$76.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                        <tr class="even">
                                                            <td data-order="2019-01-09T00:00:00+00:00">Feb 09, 2019
                                                            </td>
                                                            <td><a href="#"
                                                                    class="text-gray-600 text-hover-primary">426445943</a>
                                                            </td>
                                                            <td>Visual Design Illustration</td>
                                                            <td class="text-success">$31.00</td>
                                                            <td class="text-end"><button
                                                                    class="btn btn-sm btn-light btn-active-light-primary">Download</button>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="row">
                                                <div
                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                </div>
                                                <div
                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                    <div class="dataTables_paginate paging_simple_numbers"
                                                        id="kt_customer_view_statement_table_4_paginate">
                                                        <ul class="pagination">
                                                            <li class="paginate_button page-item previous disabled"
                                                                id="kt_customer_view_statement_table_4_previous"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_4"
                                                                    data-dt-idx="0" tabindex="0"
                                                                    class="page-link"><i class="previous"></i></a>
                                                            </li>
                                                            <li class="paginate_button page-item active"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_4"
                                                                    data-dt-idx="1" tabindex="0"
                                                                    class="page-link">1</a></li>
                                                            <li class="paginate_button page-item "><a href="#"
                                                                    aria-controls="kt_customer_view_statement_table_4"
                                                                    data-dt-idx="2" tabindex="0"
                                                                    class="page-link">2</a></li>
                                                            <li class="paginate_button page-item next"
                                                                id="kt_customer_view_statement_table_4_next"><a
                                                                    href="#"
                                                                    aria-controls="kt_customer_view_statement_table_4"
                                                                    data-dt-idx="3" tabindex="0"
                                                                    class="page-link"><i class="next"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Table-->
                                    </div>
                                    <!--end::Tab panel-->
                                </div>
                                <!--end::Tab Content-->
                            </div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Statements-->
                    </div>
                    <!--end:::Tab pane-->
                </div>
                <!--end:::Tab content-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Layout-->

        <!--begin::Modals-->
        <!--begin::Modal - Add Payment-->
        <div class="modal fade" id="kt_modal_add_payment" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold">Add a Payment Record</h2>
                        <!--end::Modal title-->

                        <!--begin::Close-->
                        <div id="kt_modal_add_payment_close" class="btn btn-icon btn-sm btn-active-icon-primary">
                            <i class="ki-outline ki-cross fs-1"></i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->

                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Form-->
                        <form id="kt_modal_add_payment_form" class="form fv-plugins-bootstrap5 fv-plugins-framework"
                            action="#">
                            <!--begin::Input group-->
                            <div class="fv-row mb-7 fv-plugins-icon-container">
                                <!--begin::Label-->
                                <label class="fs-6 fw-semibold form-label mb-2">
                                    <span class="required">Invoice Number</span>

                                    <span class="ms-2" data-bs-toggle="tooltip"
                                        aria-label="The invoice number must be unique."
                                        data-bs-original-title="The invoice number must be unique."
                                        data-kt-initialized="1">
                                        <i class="ki-outline ki-information fs-7"></i> </span>
                                </label>
                                <!--end::Label-->

                                <!--begin::Input-->
                                <input type="text" class="form-control form-control-solid" name="invoice"
                                    value="">
                                <!--end::Input-->
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="fv-row mb-7 fv-plugins-icon-container">
                                <!--begin::Label-->
                                <label class="required fs-6 fw-semibold form-label mb-2">Status</label>
                                <!--end::Label-->

                                <!--begin::Input-->
                                <select class="form-select form-select-solid fw-bold select2-hidden-accessible"
                                    name="status" data-control="select2" data-placeholder="Select an option"
                                    data-hide-search="true" data-select2-id="select2-data-1-24d8" tabindex="-1"
                                    aria-hidden="true" data-kt-initialized="1">
                                    <option data-select2-id="select2-data-3-3jyi"></option>
                                    <option value="0">Approved</option>
                                    <option value="1">Pending</option>
                                    <option value="2">Rejected</option>
                                    <option value="3">In progress</option>
                                    <option value="4">Completed</option>
                                </select><span class="select2 select2-container select2-container--bootstrap5"
                                    dir="ltr" data-select2-id="select2-data-2-niik" style="width: 100%;"><span
                                        class="selection"><span
                                            class="select2-selection select2-selection--single form-select form-select-solid fw-bold"
                                            role="combobox" aria-haspopup="true" aria-expanded="false"
                                            tabindex="0" aria-disabled="false"
                                            aria-labelledby="select2-status-6y-container"
                                            aria-controls="select2-status-6y-container"><span
                                                class="select2-selection__rendered" id="select2-status-6y-container"
                                                role="textbox" aria-readonly="true" title="Select an option"><span
                                                    class="select2-selection__placeholder">Select an
                                                    option</span></span><span class="select2-selection__arrow"
                                                role="presentation"><b
                                                    role="presentation"></b></span></span></span><span
                                        class="dropdown-wrapper" aria-hidden="true"></span></span>
                                <!--end::Input-->
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="fv-row mb-7 fv-plugins-icon-container">
                                <!--begin::Label-->
                                <label class="required fs-6 fw-semibold form-label mb-2">Invoice Amount</label>
                                <!--end::Label-->

                                <!--begin::Input-->
                                <input type="text" class="form-control form-control-solid" name="amount"
                                    value="">
                                <!--end::Input-->
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="fv-row mb-15">
                                <!--begin::Label-->
                                <label class="fs-6 fw-semibold form-label mb-2">
                                    <span class="required">Additional Information</span>

                                    <span class="ms-2" data-bs-toggle="tooltip"
                                        aria-label="Information such as description of invoice or product purchased."
                                        data-bs-original-title="Information such as description of invoice or product purchased."
                                        data-kt-initialized="1">
                                        <i class="ki-outline ki-information fs-7"></i> </span>
                                </label>
                                <!--end::Label-->

                                <!--begin::Input-->
                                <textarea class="form-control form-control-solid rounded-3" name="additional_info"></textarea>
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->

                            <!--begin::Actions-->
                            <div class="text-center">
                                <button type="reset" id="kt_modal_add_payment_cancel" class="btn btn-light me-3">
                                    Discard
                                </button>

                                <button type="submit" id="kt_modal_add_payment_submit" class="btn btn-primary">
                                    <span class="indicator-label">
                                        Submit
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span
                                            class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - New Card--><!--begin::Modal - Adjust Balance-->
        <div class="modal fade" id="kt_modal_adjust_balance" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold">Adjust Balance</h2>
                        <!--end::Modal title-->

                        <!--begin::Close-->
                        <div id="kt_modal_adjust_balance_close" class="btn btn-icon btn-sm btn-active-icon-primary">
                            <i class="ki-outline ki-cross fs-1"></i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->

                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Balance preview-->
                        <div class="d-flex text-center mb-9">
                            <div class="w-50 border border-dashed border-gray-300 rounded mx-2 p-4">
                                <div class="fs-6 fw-semibold mb-2 text-muted">Current Balance</div>
                                <div class="fs-2 fw-bold" kt-modal-adjust-balance="current_balance">US$ 32,487.57
                                </div>
                            </div>
                            <div class="w-50 border border-dashed border-gray-300 rounded mx-2 p-4">
                                <div class="fs-6 fw-semibold mb-2 text-muted">
                                    New Balance

                                    <span class="ms-2" data-bs-toggle="tooltip"
                                        aria-label="Enter an amount to preview the new balance."
                                        data-bs-original-title="Enter an amount to preview the new balance."
                                        data-kt-initialized="1">
                                        <i class="ki-outline ki-information fs-7"></i> </span>
                                </div>
                                <div class="fs-2 fw-bold" kt-modal-adjust-balance="new_balance">--</div>
                            </div>
                        </div>
                        <!--end::Balance preview-->

                        <!--begin::Form-->
                        <form id="kt_modal_adjust_balance_form"
                            class="form fv-plugins-bootstrap5 fv-plugins-framework" action="#">
                            <!--begin::Input group-->
                            <div class="fv-row mb-7 fv-plugins-icon-container">
                                <!--begin::Label-->
                                <label class="required fs-6 fw-semibold form-label mb-2">Adjustment type</label>
                                <!--end::Label-->

                                <!--begin::Dropdown-->
                                <select class="form-select form-select-solid fw-bold select2-hidden-accessible"
                                    name="adjustment" aria-label="Select an option" data-control="select2"
                                    data-dropdown-parent="#kt_modal_adjust_balance"
                                    data-placeholder="Select an option" data-hide-search="true"
                                    data-select2-id="select2-data-4-h0oe" tabindex="-1" aria-hidden="true"
                                    data-kt-initialized="1">
                                    <option data-select2-id="select2-data-6-0ll7"></option>
                                    <option value="1">Credit</option>
                                    <option value="2">Debit</option>
                                </select><span class="select2 select2-container select2-container--bootstrap5"
                                    dir="ltr" data-select2-id="select2-data-5-6d79"
                                    style="width: 100%;"><span class="selection"><span
                                            class="select2-selection select2-selection--single form-select form-select-solid fw-bold"
                                            role="combobox" aria-haspopup="true" aria-expanded="false"
                                            tabindex="0" aria-disabled="false"
                                            aria-labelledby="select2-adjustment-h9-container"
                                            aria-controls="select2-adjustment-h9-container"><span
                                                class="select2-selection__rendered"
                                                id="select2-adjustment-h9-container" role="textbox"
                                                aria-readonly="true" title="Select an option"><span
                                                    class="select2-selection__placeholder">Select an
                                                    option</span></span><span class="select2-selection__arrow"
                                                role="presentation"><b
                                                    role="presentation"></b></span></span></span><span
                                        class="dropdown-wrapper" aria-hidden="true"></span></span>
                                <!--end::Dropdown-->
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="fv-row mb-7 fv-plugins-icon-container">
                                <!--begin::Label-->
                                <label class="required fs-6 fw-semibold form-label mb-2">Amount</label>
                                <!--end::Label-->

                                <!--begin::Input-->
                                <input id="kt_modal_inputmask" type="text"
                                    class="form-control form-control-solid" name="amount" value=""
                                    inputmode="text">
                                <!--end::Input-->
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="fv-row mb-7">
                                <!--begin::Label-->
                                <label class="fs-6 fw-semibold form-label mb-2">Add adjustment note</label>
                                <!--end::Label-->

                                <!--begin::Input-->
                                <textarea class="form-control form-control-solid rounded-3 mb-5"></textarea>
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->

                            <!--begin::Disclaimer-->
                            <div class="fs-7 text-muted mb-15">
                                Please be aware that all manual balance changes will be audited by the financial team
                                every fortnight. Please maintain your invoices and receipts until then. Thank you.
                            </div>
                            <!--end::Disclaimer-->

                            <!--begin::Actions-->
                            <div class="text-center">
                                <button type="reset" id="kt_modal_adjust_balance_cancel"
                                    class="btn btn-light me-3">
                                    Discard
                                </button>

                                <button type="submit" id="kt_modal_adjust_balance_submit"
                                    class="btn btn-primary">
                                    <span class="indicator-label">
                                        Submit
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span
                                            class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - New Card--><!--begin::Modal - New Address-->
        <div class="modal fade" id="kt_modal_update_customer" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                    <form class="form" action="#" id="kt_modal_update_customer_form">
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_update_customer_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Update Customer</h2>
                            <!--end::Modal title-->

                            <!--begin::Close-->
                            <div id="kt_modal_update_customer_close"
                                class="btn btn-icon btn-sm btn-active-icon-primary">
                                <i class="ki-outline ki-cross fs-1"></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->

                        <!--begin::Modal body-->
                        <div class="modal-body py-10 px-lg-17">
                            <!--begin::Scroll-->
                            <div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_update_customer_scroll"
                                data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}"
                                data-kt-scroll-max-height="auto"
                                data-kt-scroll-dependencies="#kt_modal_update_customer_header"
                                data-kt-scroll-wrappers="#kt_modal_update_customer_scroll"
                                data-kt-scroll-offset="300px" style="max-height: 397px;">
                                <!--begin::Notice-->

                                <!--begin::Notice-->
                                <div
                                    class="notice d-flex bg-light-primary rounded border-primary border border-dashed mb-9 p-6">
                                    <!--begin::Icon-->
                                    <i class="ki-outline ki-information fs-2tx text-primary me-4"></i>
                                    <!--end::Icon-->

                                    <!--begin::Wrapper-->
                                    <div class="d-flex flex-stack flex-grow-1 ">
                                        <!--begin::Content-->
                                        <div class=" fw-semibold">

                                            <div class="fs-6 text-gray-700 ">Updating customer details will receive a
                                                privacy audit. For more info, please read our <a
                                                    href="#">Privacy Policy</a></div>
                                        </div>
                                        <!--end::Content-->

                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::Notice-->
                                <!--end::Notice-->

                                <!--begin::User toggle-->
                                <div class="fw-bold fs-3 rotate collapsible mb-7" data-bs-toggle="collapse"
                                    href="#kt_modal_update_customer_user_info" role="button"
                                    aria-expanded="false" aria-controls="kt_modal_update_customer_user_info">
                                    User Information
                                    <span class="ms-2 rotate-180">
                                        <i class="ki-outline ki-down fs-3"></i> </span>
                                </div>
                                <!--end::User toggle-->

                                <!--begin::User form-->
                                <div id="kt_modal_update_customer_user_info" class="collapse show">
                                    <!--begin::Input group-->
                                    <div class="mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span>Update Avatar</span>

                                            <span class="ms-1" data-bs-toggle="tooltip"
                                                aria-label="Fichiers acceptés: png, jpg, jpeg."
                                                data-bs-original-title="Fichiers acceptés: png, jpg, jpeg."
                                                data-kt-initialized="1">
                                                <i class="ki-outline ki-information fs-7"></i> </span>
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Image input wrapper-->
                                        <div class="mt-1">
                                            <!--begin::Image input-->
                                            <div class="image-input image-input-outline" data-kt-image-input="true"
                                                style="background-image: url('/metronic8/demo58/assets/media/svg/avatars/blank.svg')">
                                                <!--begin::Preview existing avatar-->
                                                <div class="image-input-wrapper w-125px h-125px"
                                                    style="background-image: url(/metronic8/demo58/assets/media/avatars/300-1.jpg)">
                                                </div>
                                                <!--end::Preview existing avatar-->

                                                <!--begin::Edit-->
                                                <label
                                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                    aria-label="Change avatar"
                                                    data-bs-original-title="Change avatar" data-kt-initialized="1">
                                                    <i class="ki-outline ki-pencil fs-7"></i>
                                                    <!--begin::Inputs-->
                                                    <input type="file" name="avatar"
                                                        accept=".png, .jpg, .jpeg">
                                                    <input type="hidden" name="avatar_remove">
                                                    <!--end::Inputs-->
                                                </label>
                                                <!--end::Edit-->

                                                <!--begin::Cancel-->
                                                <span
                                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                                    aria-label="Cancel avatar"
                                                    data-bs-original-title="Cancel avatar" data-kt-initialized="1">
                                                    <i class="ki-outline ki-cross fs-2"></i> </span>
                                                <!--end::Cancel-->

                                                <!--begin::Remove-->
                                                <span
                                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                    data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                                    aria-label="Remove avatar"
                                                    data-bs-original-title="Remove avatar" data-kt-initialized="1">
                                                    <i class="ki-outline ki-cross fs-2"></i> </span>
                                                <!--end::Remove-->
                                            </div>
                                            <!--end::Image input-->
                                        </div>
                                        <!--end::Image input wrapper-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Name</label>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid"
                                            placeholder="" name="name" value="Sean Bean">
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span>Email</span>

                                            <span class="ms-1" data-bs-toggle="tooltip"
                                                aria-label="Email address must be active"
                                                data-bs-original-title="Email address must be active"
                                                data-kt-initialized="1">
                                                <i class="ki-outline ki-information fs-7"></i> </span>
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <input type="email" class="form-control form-control-solid"
                                            placeholder="" name="email" value="sean@dellito.com">
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="fv-row mb-15">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Description</label>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid"
                                            placeholder="" name="description">
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->
                                </div>
                                <!--end::User form-->

                                <!--begin::Billing toggle-->
                                <div class="fw-bold fs-3 rotate collapsible collapsed mb-7"
                                    data-bs-toggle="collapse" href="#kt_modal_update_customer_billing_info"
                                    role="button" aria-expanded="false"
                                    aria-controls="kt_modal_update_customer_billing_info">
                                    Shipping Information
                                    <span class="ms-2 rotate-180">
                                        <i class="ki-outline ki-down fs-3"></i> </span>
                                </div>
                                <!--end::Billing toggle-->

                                <!--begin::Billing form-->
                                <div id="kt_modal_update_customer_billing_info" class="collapse">
                                    <!--begin::Input group-->
                                    <div class="d-flex flex-column mb-7 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Address Line 1</label>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <input class="form-control form-control-solid" placeholder=""
                                            name="address1" value="101, Collins Street">
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="d-flex flex-column mb-7 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Address Line 2</label>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <input class="form-control form-control-solid" placeholder=""
                                            name="address2">
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="d-flex flex-column mb-7 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Town</label>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <input class="form-control form-control-solid" placeholder=""
                                            name="city" value="Melbourne">
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">State / Province</label>
                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" placeholder=""
                                                name="state" value="Victoria">
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->

                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Post Code</label>
                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" placeholder=""
                                                name="postcode" value="3000">
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="d-flex flex-column mb-7 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span>Country</span>

                                            <span class="ms-1" data-bs-toggle="tooltip"
                                                aria-label="Country of origination"
                                                data-bs-original-title="Country of origination"
                                                data-kt-initialized="1">
                                                <i class="ki-outline ki-information fs-7"></i> </span>
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Input-->
                                        <select name="country" aria-label="Select a Country"
                                            data-control="select2" data-placeholder="Select a Country..."
                                            data-dropdown-parent="#kt_modal_update_customer"
                                            class="form-select form-select-solid fw-bold select2-hidden-accessible"
                                            data-select2-id="select2-data-7-e31t" tabindex="-1"
                                            aria-hidden="true" data-kt-initialized="1">
                                            <option value="" data-select2-id="select2-data-9-zv7t">Select a
                                                Country...</option>
                                            <option value="AF">Afghanistan</option>
                                            <option value="AX">Aland Islands</option>
                                            <option value="AL">Albania</option>
                                            <option value="DZ">Algeria</option>
                                            <option value="AS">American Samoa</option>
                                            <option value="AD">Andorra</option>
                                            <option value="AO">Angola</option>
                                            <option value="AI">Anguilla</option>
                                            <option value="AG">Antigua and Barbuda</option>
                                            <option value="AR">Argentina</option>
                                            <option value="AM">Armenia</option>
                                            <option value="AW">Aruba</option>
                                            <option value="AU">Australia</option>
                                            <option value="AT">Austria</option>
                                            <option value="AZ">Azerbaijan</option>
                                            <option value="BS">Bahamas</option>
                                            <option value="BH">Bahrain</option>
                                            <option value="BD">Bangladesh</option>
                                            <option value="BB">Barbados</option>
                                            <option value="BY">Belarus</option>
                                            <option value="BE">Belgium</option>
                                            <option value="BZ">Belize</option>
                                            <option value="BJ">Benin</option>
                                            <option value="BM">Bermuda</option>
                                            <option value="BT">Bhutan</option>
                                            <option value="BO">Bolivia, Plurinational State of</option>
                                            <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                                            <option value="BA">Bosnia and Herzegovina</option>
                                            <option value="BW">Botswana</option>
                                            <option value="BR">Brazil</option>
                                            <option value="IO">British Indian Ocean Territory</option>
                                            <option value="BN">Brunei Darussalam</option>
                                            <option value="BG">Bulgaria</option>
                                            <option value="BF">Burkina Faso</option>
                                            <option value="BI">Burundi</option>
                                            <option value="KH">Cambodia</option>
                                            <option value="CM">Cameroon</option>
                                            <option value="CA">Canada</option>
                                            <option value="CV">Cape Verde</option>
                                            <option value="KY">Cayman Islands</option>
                                            <option value="CF">Central African Republic</option>
                                            <option value="TD">Chad</option>
                                            <option value="CL">Chile</option>
                                            <option value="CN">China</option>
                                            <option value="CX">Christmas Island</option>
                                            <option value="CC">Cocos (Keeling) Islands</option>
                                            <option value="CO">Colombia</option>
                                            <option value="KM">Comoros</option>
                                            <option value="CK">Cook Islands</option>
                                            <option value="CR">Costa Rica</option>
                                            <option value="CI">Côte d'Ivoire</option>
                                            <option value="HR">Croatia</option>
                                            <option value="CU">Cuba</option>
                                            <option value="CW">Curaçao</option>
                                            <option value="CZ">Czech Republic</option>
                                            <option value="DK">Denmark</option>
                                            <option value="DJ">Djibouti</option>
                                            <option value="DM">Dominica</option>
                                            <option value="DO">Dominican Republic</option>
                                            <option value="EC">Ecuador</option>
                                            <option value="EG">Egypt</option>
                                            <option value="SV">El Salvador</option>
                                            <option value="GQ">Equatorial Guinea</option>
                                            <option value="ER">Eritrea</option>
                                            <option value="EE">Estonia</option>
                                            <option value="ET">Ethiopia</option>
                                            <option value="FK">Falkland Islands (Malvinas)</option>
                                            <option value="FJ">Fiji</option>
                                            <option value="FI">Finland</option>
                                            <option value="FR">France</option>
                                            <option value="PF">French Polynesia</option>
                                            <option value="GA">Gabon</option>
                                            <option value="GM">Gambia</option>
                                            <option value="GE">Georgia</option>
                                            <option value="DE">Germany</option>
                                            <option value="GH">Ghana</option>
                                            <option value="GI">Gibraltar</option>
                                            <option value="GR">Greece</option>
                                            <option value="GL">Greenland</option>
                                            <option value="GD">Grenada</option>
                                            <option value="GU">Guam</option>
                                            <option value="GT">Guatemala</option>
                                            <option value="GG">Guernsey</option>
                                            <option value="GN">Guinea</option>
                                            <option value="GW">Guinea-Bissau</option>
                                            <option value="HT">Haiti</option>
                                            <option value="VA">Holy See (Vatican City State)</option>
                                            <option value="HN">Honduras</option>
                                            <option value="HK">Hong Kong</option>
                                            <option value="HU">Hungary</option>
                                            <option value="IS">Iceland</option>
                                            <option value="IN">India</option>
                                            <option value="ID">Indonesia</option>
                                            <option value="IR">Iran, Islamic Republic of</option>
                                            <option value="IQ">Iraq</option>
                                            <option value="IE">Ireland</option>
                                            <option value="IM">Isle of Man</option>
                                            <option value="IL">Israel</option>
                                            <option value="IT">Italy</option>
                                            <option value="JM">Jamaica</option>
                                            <option value="JP">Japan</option>
                                            <option value="JE">Jersey</option>
                                            <option value="JO">Jordan</option>
                                            <option value="KZ">Kazakhstan</option>
                                            <option value="KE">Kenya</option>
                                            <option value="KI">Kiribati</option>
                                            <option value="KP">Korea, Democratic People's Republic of</option>
                                            <option value="KW">Kuwait</option>
                                            <option value="KG">Kyrgyzstan</option>
                                            <option value="LA">Lao People's Democratic Republic</option>
                                            <option value="LV">Latvia</option>
                                            <option value="LB">Lebanon</option>
                                            <option value="LS">Lesotho</option>
                                            <option value="LR">Liberia</option>
                                            <option value="LY">Libya</option>
                                            <option value="LI">Liechtenstein</option>
                                            <option value="LT">Lithuania</option>
                                            <option value="LU">Luxembourg</option>
                                            <option value="MO">Macao</option>
                                            <option value="MG">Madagascar</option>
                                            <option value="MW">Malawi</option>
                                            <option value="MY">Malaysia</option>
                                            <option value="MV">Maldives</option>
                                            <option value="ML">Mali</option>
                                            <option value="MT">Malta</option>
                                            <option value="MH">Marshall Islands</option>
                                            <option value="MQ">Martinique</option>
                                            <option value="MR">Mauritania</option>
                                            <option value="MU">Mauritius</option>
                                            <option value="MX">Mexico</option>
                                            <option value="FM">Micronesia, Federated States of</option>
                                            <option value="MD">Moldova, Republic of</option>
                                            <option value="MC">Monaco</option>
                                            <option value="MN">Mongolia</option>
                                            <option value="ME">Montenegro</option>
                                            <option value="MS">Montserrat</option>
                                            <option value="MA">Morocco</option>
                                            <option value="MZ">Mozambique</option>
                                            <option value="MM">Myanmar</option>
                                            <option value="NA">Namibia</option>
                                            <option value="NR">Nauru</option>
                                            <option value="NP">Nepal</option>
                                            <option value="NL">Netherlands</option>
                                            <option value="NZ">New Zealand</option>
                                            <option value="NI">Nicaragua</option>
                                            <option value="NE">Niger</option>
                                            <option value="NG">Nigeria</option>
                                            <option value="NU">Niue</option>
                                            <option value="NF">Norfolk Island</option>
                                            <option value="MP">Northern Mariana Islands</option>
                                            <option value="NO">Norway</option>
                                            <option value="OM">Oman</option>
                                            <option value="PK">Pakistan</option>
                                            <option value="PW">Palau</option>
                                            <option value="PS">Palestinian Territory, Occupied</option>
                                            <option value="PA">Panama</option>
                                            <option value="PG">Papua New Guinea</option>
                                            <option value="PY">Paraguay</option>
                                            <option value="PE">Peru</option>
                                            <option value="PH">Philippines</option>
                                            <option value="PL">Poland</option>
                                            <option value="PT">Portugal</option>
                                            <option value="PR">Puerto Rico</option>
                                            <option value="QA">Qatar</option>
                                            <option value="RO">Romania</option>
                                            <option value="RU">Russian Federation</option>
                                            <option value="RW">Rwanda</option>
                                            <option value="BL">Saint Barthélemy</option>
                                            <option value="KN">Saint Kitts and Nevis</option>
                                            <option value="LC">Saint Lucia</option>
                                            <option value="MF">Saint Martin (French part)</option>
                                            <option value="VC">Saint Vincent and the Grenadines</option>
                                            <option value="WS">Samoa</option>
                                            <option value="SM">San Marino</option>
                                            <option value="ST">Sao Tome and Principe</option>
                                            <option value="SA">Saudi Arabia</option>
                                            <option value="SN">Senegal</option>
                                            <option value="RS">Serbia</option>
                                            <option value="SC">Seychelles</option>
                                            <option value="SL">Sierra Leone</option>
                                            <option value="SG">Singapore</option>
                                            <option value="SX">Sint Maarten (Dutch part)</option>
                                            <option value="SK">Slovakia</option>
                                            <option value="SI">Slovenia</option>
                                            <option value="SB">Solomon Islands</option>
                                            <option value="SO">Somalia</option>
                                            <option value="ZA">South Africa</option>
                                            <option value="KR">South Korea</option>
                                            <option value="SS">South Sudan</option>
                                            <option value="ES">Spain</option>
                                            <option value="LK">Sri Lanka</option>
                                            <option value="SD">Sudan</option>
                                            <option value="SR">Suriname</option>
                                            <option value="SZ">Swaziland</option>
                                            <option value="SE">Sweden</option>
                                            <option value="CH">Switzerland</option>
                                            <option value="SY">Syrian Arab Republic</option>
                                            <option value="TW">Taiwan, Province of China</option>
                                            <option value="TJ">Tajikistan</option>
                                            <option value="TZ">Tanzania, United Republic of</option>
                                            <option value="TH">Thailand</option>
                                            <option value="TG">Togo</option>
                                            <option value="TK">Tokelau</option>
                                            <option value="TO">Tonga</option>
                                            <option value="TT">Trinidad and Tobago</option>
                                            <option value="TN">Tunisia</option>
                                            <option value="TR">Turkey</option>
                                            <option value="TM">Turkmenistan</option>
                                            <option value="TC">Turks and Caicos Islands</option>
                                            <option value="TV">Tuvalu</option>
                                            <option value="UG">Uganda</option>
                                            <option value="UA">Ukraine</option>
                                            <option value="AE">United Arab Emirates</option>
                                            <option value="GB">United Kingdom</option>
                                            <option value="US">United States</option>
                                            <option value="UY">Uruguay</option>
                                            <option value="UZ">Uzbekistan</option>
                                            <option value="VU">Vanuatu</option>
                                            <option value="VE">Venezuela, Bolivarian Republic of</option>
                                            <option value="VN">Vietnam</option>
                                            <option value="VI">Virgin Islands</option>
                                            <option value="YE">Yemen</option>
                                            <option value="ZM">Zambia</option>
                                            <option value="ZW">Zimbabwe</option>
                                        </select><span class="select2 select2-container select2-container--bootstrap5"
                                            dir="ltr" data-select2-id="select2-data-8-bts7"
                                            style="width: 100%;"><span class="selection"><span
                                                    class="select2-selection select2-selection--single form-select form-select-solid fw-bold"
                                                    role="combobox" aria-haspopup="true" aria-expanded="false"
                                                    tabindex="0" aria-disabled="false"
                                                    aria-labelledby="select2-country-2d-container"
                                                    aria-controls="select2-country-2d-container"><span
                                                        class="select2-selection__rendered"
                                                        id="select2-country-2d-container" role="textbox"
                                                        aria-readonly="true" title="Select a Country..."><span
                                                            class="select2-selection__placeholder">Select a
                                                            Country...</span></span><span
                                                        class="select2-selection__arrow" role="presentation"><b
                                                            role="presentation"></b></span></span></span><span
                                                class="dropdown-wrapper" aria-hidden="true"></span></span>
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Wrapper-->
                                        <div class="d-flex flex-stack">
                                            <!--begin::Label-->
                                            <div class="me-5">
                                                <!--begin::Label-->
                                                <label class="fs-6 fw-semibold">Use as a billing adderess?</label>
                                                <!--end::Label-->

                                                <!--begin::Input-->
                                                <div class="fs-7 fw-semibold text-muted">If you need more info, please
                                                    check budget planning</div>
                                                <!--end::Input-->
                                            </div>
                                            <!--end::Label-->

                                            <!--begin::Switch-->
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <!--begin::Input-->
                                                <input class="form-check-input" name="billing" type="checkbox"
                                                    value="1" id="kt_modal_update_customer_billing"
                                                    checked="checked">
                                                <!--end::Input-->

                                                <!--begin::Label-->
                                                <span class="form-check-label fw-semibold text-muted"
                                                    for="kt_modal_update_customer_billing">
                                                    Yes
                                                </span>
                                                <!--end::Label-->
                                            </label>
                                            <!--end::Switch-->
                                        </div>
                                        <!--begin::Wrapper-->
                                    </div>
                                    <!--end::Input group-->
                                </div>
                                <!--end::Billing form-->
                            </div>
                            <!--end::Scroll-->
                        </div>
                        <!--end::Modal body-->

                        <!--begin::Modal footer-->
                        <div class="modal-footer flex-center">
                            <!--begin::Button-->
                            <button type="reset" id="kt_modal_update_customer_cancel"
                                class="btn btn-light me-3">
                                Discard
                            </button>
                            <!--end::Button-->

                            <!--begin::Button-->
                            <button type="submit" id="kt_modal_update_customer_submit" class="btn btn-primary">
                                <span class="indicator-label">
                                    Submit
                                </span>
                                <span class="indicator-progress">
                                    Please wait... <span
                                        class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                            <!--end::Button-->
                        </div>
                        <!--end::Modal footer-->
                    </form>
                    <!--end::Form-->
                </div>
            </div>
        </div>
        <!--end::Modal - New Address--><!--begin::Modal - New Card-->
        <div class="modal fade" id="kt_modal_new_card" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2>Add New Card</h2>
                        <!--end::Modal title-->

                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <i class="ki-outline ki-cross fs-1"></i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->

                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Form-->
                        <form id="kt_modal_new_card_form" class="form fv-plugins-bootstrap5 fv-plugins-framework"
                            action="#">
                            <!--begin::Input group-->
                            <div class="d-flex flex-column mb-7 fv-row fv-plugins-icon-container">
                                <!--begin::Label-->
                                <label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
                                    <span class="required">Name On Card</span>


                                    <span class="ms-1" data-bs-toggle="tooltip"
                                        aria-label="Specify a card holder's name"
                                        data-bs-original-title="Specify a card holder's name"
                                        data-kt-initialized="1">
                                        <i class="ki-outline ki-information-5 text-gray-500 fs-6"></i></span> </label>
                                <!--end::Label-->

                                <input type="text" class="form-control form-control-solid" placeholder=""
                                    name="card_name" value="Max Doe">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="d-flex flex-column mb-7 fv-row fv-plugins-icon-container">
                                <!--begin::Label-->
                                <label class="required fs-6 fw-semibold form-label mb-2">Card Number</label>
                                <!--end::Label-->

                                <!--begin::Input wrapper-->
                                <div class="position-relative">
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid"
                                        placeholder="Enter card number" name="card_number"
                                        value="4111 1111 1111 1111">
                                    <!--end::Input-->

                                    <!--begin::Card logos-->
                                    <div class="position-absolute translate-middle-y top-50 end-0 me-5">
                                        <img src="/metronic8/demo58/assets/media/svg/card-logos/visa.svg"
                                            alt="" class="h-25px">
                                        <img src="/metronic8/demo58/assets/media/svg/card-logos/mastercard.svg"
                                            alt="" class="h-25px">
                                        <img src="/metronic8/demo58/assets/media/svg/card-logos/american-express.svg"
                                            alt="" class="h-25px">
                                    </div>
                                    <!--end::Card logos-->
                                </div>
                                <!--end::Input wrapper-->
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="row mb-10">
                                <!--begin::Col-->
                                <div class="col-md-8 fv-row">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-semibold form-label mb-2">Expiration Date</label>
                                    <!--end::Label-->

                                    <!--begin::Row-->
                                    <div class="row fv-row fv-plugins-icon-container">
                                        <!--begin::Col-->
                                        <div class="col-6">
                                            <select name="card_expiry_month"
                                                class="form-select form-select-solid select2-hidden-accessible"
                                                data-control="select2" data-hide-search="true"
                                                data-placeholder="Month" data-select2-id="select2-data-10-wx85"
                                                tabindex="-1" aria-hidden="true" data-kt-initialized="1">
                                                <option data-select2-id="select2-data-12-edoo"></option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                            </select><span
                                                class="select2 select2-container select2-container--bootstrap5"
                                                dir="ltr" data-select2-id="select2-data-11-owu9"
                                                style="width: 100%;"><span class="selection"><span
                                                        class="select2-selection select2-selection--single form-select form-select-solid"
                                                        role="combobox" aria-haspopup="true" aria-expanded="false"
                                                        tabindex="0" aria-disabled="false"
                                                        aria-labelledby="select2-card_expiry_month-eq-container"
                                                        aria-controls="select2-card_expiry_month-eq-container"><span
                                                            class="select2-selection__rendered"
                                                            id="select2-card_expiry_month-eq-container"
                                                            role="textbox" aria-readonly="true"
                                                            title="Month"><span
                                                                class="select2-selection__placeholder">Month</span></span><span
                                                            class="select2-selection__arrow" role="presentation"><b
                                                                role="presentation"></b></span></span></span><span
                                                    class="dropdown-wrapper" aria-hidden="true"></span></span>
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>
                                        <!--end::Col-->

                                        <!--begin::Col-->
                                        <div class="col-6">
                                            <select name="card_expiry_year"
                                                class="form-select form-select-solid select2-hidden-accessible"
                                                data-control="select2" data-hide-search="true"
                                                data-placeholder="Year" data-select2-id="select2-data-13-mtnt"
                                                tabindex="-1" aria-hidden="true" data-kt-initialized="1">
                                                <option data-select2-id="select2-data-15-io5d"></option>
                                                <option value="2024">2024</option>
                                                <option value="2025">2025</option>
                                                <option value="2026">2026</option>
                                                <option value="2027">2027</option>
                                                <option value="2028">2028</option>
                                                <option value="2029">2029</option>
                                                <option value="2030">2030</option>
                                                <option value="2031">2031</option>
                                                <option value="2032">2032</option>
                                                <option value="2033">2033</option>
                                                <option value="2034">2034</option>
                                            </select><span
                                                class="select2 select2-container select2-container--bootstrap5"
                                                dir="ltr" data-select2-id="select2-data-14-ld7i"
                                                style="width: 100%;"><span class="selection"><span
                                                        class="select2-selection select2-selection--single form-select form-select-solid"
                                                        role="combobox" aria-haspopup="true" aria-expanded="false"
                                                        tabindex="0" aria-disabled="false"
                                                        aria-labelledby="select2-card_expiry_year-ev-container"
                                                        aria-controls="select2-card_expiry_year-ev-container"><span
                                                            class="select2-selection__rendered"
                                                            id="select2-card_expiry_year-ev-container"
                                                            role="textbox" aria-readonly="true"
                                                            title="Year"><span
                                                                class="select2-selection__placeholder">Year</span></span><span
                                                            class="select2-selection__arrow" role="presentation"><b
                                                                role="presentation"></b></span></span></span><span
                                                    class="dropdown-wrapper" aria-hidden="true"></span></span>
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Row-->
                                </div>
                                <!--end::Col-->

                                <!--begin::Col-->
                                <div class="col-md-4 fv-row fv-plugins-icon-container">
                                    <!--begin::Label-->
                                    <label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
                                        <span class="required">CVV</span>


                                        <span class="ms-1" data-bs-toggle="tooltip"
                                            aria-label="Enter a card CVV code"
                                            data-bs-original-title="Enter a card CVV code" data-kt-initialized="1">
                                            <i class="ki-outline ki-information-5 text-gray-500 fs-6"></i></span>
                                    </label>
                                    <!--end::Label-->

                                    <!--begin::Input wrapper-->
                                    <div class="position-relative">
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid"
                                            minlength="3" maxlength="4" placeholder="CVV" name="card_cvv">
                                        <!--end::Input-->

                                        <!--begin::CVV icon-->
                                        <div class="position-absolute translate-middle-y top-50 end-0 me-3">
                                            <i class="ki-outline ki-credit-cart fs-2hx"></i>
                                        </div>
                                        <!--end::CVV icon-->
                                    </div>
                                    <!--end::Input wrapper-->
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Input group-->

                            <!--begin::Input group-->
                            <div class="d-flex flex-stack">
                                <!--begin::Label-->
                                <div class="me-5">
                                    <label class="fs-6 fw-semibold form-label">Save Card for further billing?</label>
                                    <div class="fs-7 fw-semibold text-muted">If you need more info, please check
                                        budget planning</div>
                                </div>
                                <!--end::Label-->

                                <!--begin::Switch-->
                                <label class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input" type="checkbox" value="1"
                                        checked="checked">
                                    <span class="form-check-label fw-semibold text-muted">
                                        Save Card
                                    </span>
                                </label>
                                <!--end::Switch-->
                            </div>
                            <!--end::Input group-->


                            <!--begin::Actions-->
                            <div class="text-center pt-15">
                                <button type="reset" id="kt_modal_new_card_cancel" class="btn btn-light me-3">
                                    Discard
                                </button>

                                <button type="submit" id="kt_modal_new_card_submit" class="btn btn-primary">
                                    <span class="indicator-label">
                                        Submit
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span
                                            class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - New Card--><!--end::Modals-->
    </div>
    <!--end::Container-->

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal1d82783c246b53da9bd54777b9e76c22)): ?>
<?php $attributes = $__attributesOriginal1d82783c246b53da9bd54777b9e76c22; ?>
<?php unset($__attributesOriginal1d82783c246b53da9bd54777b9e76c22); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal1d82783c246b53da9bd54777b9e76c22)): ?>
<?php $component = $__componentOriginal1d82783c246b53da9bd54777b9e76c22; ?>
<?php unset($__componentOriginal1d82783c246b53da9bd54777b9e76c22); ?>
<?php endif; ?>
<?php /**PATH C:\laragon\www\car-rend\resources\views/backoffice/profile/index.blade.php ENDPATH**/ ?>