@extends('backend.layouts.app')
@section('content')
    <div class="app-main flex-column flex-row-fluid " id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">

            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">

                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">


                    <!--begin::Page title-->
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                            {{translate('Account')}}
                        </h1>
                        <!--end::Title-->


                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                <a class="text-muted text-hover-primary">
                                    {{translate('Marketers')}} </a>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-500 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->

                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                {{translate('Account')}}
                            </li>
                            <!--end::Item-->

                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                    <!--end::Page title-->
                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->

            <!--begin::Content-->
            <div id="kt_app_content" class="app-content  flex-column-fluid ">


                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container  container-xxl ">

                    <!--begin::Navbar-->
                    <div class="card mb-5 mb-xl-10">
                        <div class="card-body pt-9 pb-0">
                            <!--begin::Details-->
                            <div class="d-flex flex-wrap flex-sm-nowrap">
                                <!--begin: Pic-->
                                <div class="me-7 mb-4">
                                    <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
                                        @if($user->avatar)
                                            <img src="/metronic8/demo1/assets/media/avatars/300-1.jpg" alt="image">
                                        @else
                                            <i class="fa-solid fa-circle-user fs-100"></i>
                                        @endif
                                        <div
                                            class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-body h-20px w-20px"></div>
                                    </div>
                                </div>
                                <!--end::Pic-->

                                <!--begin::Info-->
                                <div class="flex-grow-1">
                                    <!--begin::Title-->
                                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                        <!--begin::User-->
                                        <div class="d-flex flex-column">
                                            <!--begin::Name-->
                                            <div class="d-flex align-items-center mb-2">
                                                <a class="text-gray-900 text-hover-primary fs-2 fw-bold me-1">{{$user->name}}</a>


                                                @if($user->kyc && $user->kyc->status)
                                                    <a><i class="ki-duotone ki-verify fs-1 text-primary"><span
                                                                class="path1"></span><span class="path2"></span></i></a>
                                                @endif
                                            </div>
                                            <!--end::Name-->

                                            <!--begin::Info-->
                                            <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
                                                <a
                                                    class="d-flex align-items-center text-gray-500 text-hover-primary mb-2">
                                                    <i class="ki-duotone ki-sms fs-4"><span class="path1"></span><span
                                                            class="path2"></span></i> {{$user->email}}
                                                </a>
                                            </div>
                                            <!--end::Info-->
                                        </div>
                                        <!--end::User-->

                                        <!--begin::Actions-->
                                        <div class="d-flex my-4">
                                            <a href="#" class="btn btn-sm btn-primary me-3" data-bs-toggle="modal"
                                               data-bs-target="#kt_modal_offer_a_deal">{{translate('Login')}}</a>

                                            <!--begin::Menu-->
                                            <div class="me-0">
                                                <button
                                                    class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary"
                                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                    <i class="ki-solid ki-dots-horizontal fs-2x"></i></button>

                                                <!--begin::Menu 3-->
                                                <div
                                                    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3"
                                                    data-kt-menu="true">
                                                    <!--begin::Heading-->
                                                    <!--end::Heading-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a data-bs-toggle="modal"
                                                           data-bs-target="#kt_modal_update" class="menu-link px-3">
                                                            {{translate('Update')}}
                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->

                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a class="menu-link flex-stack px-3  user-ban">
                                                            <span class="ban">{{translate('Ban')}}</span>
                                                            <span class="unban">{{translate('Unban')}}</span>

                                                        </a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu 3-->
                                            </div>
                                            <!--end::Menu-->
                                        </div>
                                        <!--end::Actions-->
                                    </div>
                                    <!--end::Title-->

                                    <!--begin::Stats-->
                                    <div class="d-flex flex-wrap flex-stack">
                                        <!--begin::Wrapper-->
                                        <div class="d-flex flex-column flex-grow-1 pe-8">
                                            <!--begin::Stats-->
                                            <div class="d-flex flex-wrap">
                                                <!--begin::Stat-->
                                                <div
                                                    class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                                    <!--begin::Number-->
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-arrow-up fs-3 text-success me-2"><span
                                                                class="path1"></span><span class="path2"></span></i>
                                                        <div class="fs-2 fw-bold counted">{{formatCurrency($user->wallets->sum('amount'),$user->id)}}
                                                        </div>
                                                    </div>


                                                    <!--begin::Label-->
                                                    <div
                                                        class="fw-semibold fs-6 text-gray-500">{{translate('Wallet')}}</div>
                                                    <!--end::Label-->
                                                </div>
                                                <!--end::Stat-->

                                                <!--begin::Stat-->
                                                <div
                                                    class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                                    <!--begin::Number-->
                                                    <div class="d-flex align-items-center">
                                                        <div class="fs-2 fw-bold counted" data-kt-countup="true"
                                                             data-kt-countup-value="{{count(referred_by($user->id))}}"
                                                             data-kt-initialized="1">{{count(referred_by($user->id))}}
                                                        </div>
                                                    </div>
                                                    <!--end::Number-->

                                                    <!--begin::Label-->
                                                    <div
                                                        class="fw-semibold fs-6 text-gray-500">{{translate('Team Count')}}</div>
                                                    <!--end::Label-->
                                                </div>
                                                <!--end::Stat-->

                                                <!--begin::Stat-->
                                                <div
                                                    class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                                    <!--begin::Number-->
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-arrow-up fs-3 text-success me-2"><span
                                                                class="path1"></span><span class="path2"></span></i>
                                                        <div class="fs-2 fw-bold counted" data-kt-countup="true"
                                                             data-kt-countup-value="60" data-kt-countup-prefix="%"
                                                             data-kt-initialized="1">%60
                                                        </div>
                                                    </div>
                                                    <!--end::Number-->

                                                    <!--begin::Label-->
                                                    <div class="fw-semibold fs-6 text-gray-500">Success Rate</div>
                                                    <!--end::Label-->
                                                </div>
                                                <!--end::Stat-->
                                            </div>
                                            <!--end::Stats-->
                                        </div>
                                        <!--end::Wrapper-->

                                    </div>
                                    <!--end::Stats-->
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Details-->

                            <!--begin::Navs-->

                            <ul class="nav nav-stretch nav-tabs nav-line-tabs  nav-line-tabs-2x border-transparent fs-5 fw-bold">
                                <li class="nav-item mt-2">
                                    <a class="nav-link text-active-primary ms-0 me-10 py-5 active" data-bs-toggle="tab"
                                       href="#kt_tab_pane_1">{{translate('Profile')}}</a>
                                </li>

                                <li class="nav-item mt-2">
                                    <a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab"
                                       href="#kt_tab_pane_2">{{translate('Wallet')}}</a>
                                </li>
                                <li class="nav-item mt-2">
                                    <a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab"
                                       href="#kt_tab_pane_3">{{translate('Kyc')}}</a>
                                </li>

                                <li class="nav-item mt-2">
                                    <a class="nav-link text-active-primary ms-0 me-10 py-5"
                                       data-bs-toggle="modal"
                                       data-bs-target="#kt_modal_team">{{translate('Team')}}</a>
                                </li>

                            </ul>
                            <!--begin::Navs-->
                        </div>
                    </div>
                    <!--end::Navbar-->
                    <!--begin::details View-->
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel">
                            <div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
                                <!--begin::Card header-->
                                <div class="card-header cursor-pointer">
                                    <!--begin::Card title-->
                                    <div class="card-title m-0">
                                        <h3 class="fw-bold m-0">{{translate('Profile Details')}}</h3>
                                    </div>

                                </div>
                                <!--begin::Card header-->

                                <!--begin::Card body-->
                                <div class="card-body p-9">
                                    <!--begin::Row-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="col-lg-4 fw-semibold text-muted">{{translate('Full Name')}}</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <span
                                                class="fw-bold fs-6 text-gray-800 text-capitalize">{{$user->name}}</span>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Row-->

                                    <!--begin::Input group-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">{{translate('Email')}}</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8 fv-row">
                                            <span class="fw-semibold text-gray-800 fs-6">{{$user->email}}</span>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">
                                            {{translate('Contact Phone')}}

                                            <span class="ms-1" data-bs-toggle="tooltip"
                                                  aria-label="Phone number must be active"
                                                  data-bs-original-title="Phone number must be active"
                                                  data-kt-initialized="1">
                    <i class="ki-duotone ki-information fs-7"><span class="path1"></span><span
                            class="path2"></span><span class="path3"></span></i>                </span>
                                        </label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8 d-flex align-items-center">
                                            <span class="fw-bold fs-6 text-gray-800 me-2">{{$user->phone}}</span>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <!--begin::Input group-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="col-lg-4 fw-semibold text-muted">{{translate('Referral Code')}}</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <a
                                                class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{$user->marketer?$user->marketer->referral_code:''}}</a>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->

                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="col-lg-4 fw-semibold text-muted">{{translate('Referral Link')}}</label>
                                        <!--end::Label-->

                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <a class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{env('APP_URL')}}
                                                /{{$user->marketer?$user->marketer->referral_link:''}}</a>
                                        </div>
                                        <!--end::Col-->
                                    </div>

                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="col-lg-4 fw-semibold text-muted">{{translate('Referred By')}}</label>
                                        <!--end::Label-->
                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <a class="fw-semibold fs-6 text-gray-800 text-hover-primary">{!! $user->marketer && getUser($user->marketer->referred_by)?getUser($user->marketer->referred_by)->name:'<span class="badge badge-danger">'.translate("not found").'</span>' !!}  </a>
                                        </div>
                                        <!--end::Col-->
                                    </div>

                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">{{translate('Country')}}</label>
                                        <!--end::Label-->
                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <a class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{$user->marketer?country($user->marketer->country_id):translate('not found')}}</a>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                </div>
                                <!--end::Card body-->
                            </div>
                        </div>

                        {{--                    wallet--}}


                        <div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">
                            <div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
                                <!--begin::Card header-->
                                <div class="card-header cursor-pointer">
                                    <!--begin::Card title-->
                                    <div class="card-title m-0">
                                        <h3 class="fw-bold m-0">{{translate('Wallet')}}</h3>
                                    </div>

                                </div>
                                <!--begin::Card header-->

                                <!--begin::Card body-->
                                <div class="card-body p-9">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                            <tr class="fw-bold fs-6 text-gray-800">
                                                <th>{{translate('Amount')}}</th>
                                                <th>{{translate('Description')}}</th>
                                                <th>{{translate('Date')}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            @foreach($user->wallets as $wallet)
                                                <tr>
                                                    <td><a href="">{{formatCurrency($wallet->amount,$user->id)}}</a></td>
                                                    <td>{{$wallet->description}}</td>
                                                    <td>{{$wallet->created_at}}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>

                                    </div>
                                    <!--end::Card body-->
                                </div>
                            </div>
                        </div>

{{--                        Kyc--}}
                        <div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel">
                            <div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
                                <!--begin::Card header-->
                                <div class="card-header cursor-pointer">
                                    <!--begin::Card title-->
                                    <div class="card-title m-0">
                                        <h3 class="fw-bold m-0">{{translate('Kyc')}}</h3>
                                    </div>

                                </div>
                                <!--begin::Card header-->

                                <!--begin::Card body-->
                                <div class="card-body p-9">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                            <tr class="fw-bold fs-6 text-gray-800">
                                                <th>{{translate('Amount')}}</th>
                                                <th>{{translate('Description')}}</th>
                                                <th>{{translate('Date')}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            @foreach($user->wallets as $wallet)
                                                <tr>
                                                    <td><a href="">{{formatCurrency($wallet->amount,$user->id)}}</a></td>
                                                    <td>{{$wallet->description}}</td>
                                                    <td>{{$wallet->created_at}}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>

                                    </div>
                                    <!--end::Card body-->
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--end::Content-->

                </div>
                <!--end::Content wrapper-->

            </div>


            <div class="modal fade" id="kt_modal_update" tabindex="-1">
                <!--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" id="kt_modal_add_user_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">{{translate('User Update')}} </h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                                 aria-label="Close">
                                <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span
                                        class="path2"></span></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <form id="kt_modal_add_user_form" class="form" action="{{route('marketer.update')}}"
                              method="post"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="modal-body px-5 my-7">
                                <input type="hidden" value="{{$user->id}}" name="id">

                                <!--begin::Scroll-->
                                <div class="d-flex flex-column scroll-y px-5 px-lg-10"
                                     id="kt_modal_add_user_scroll" data-kt-scroll="true"
                                     data-kt-scroll-activate="true" data-kt-scroll-max-height="auto"
                                     data-kt-scroll-dependencies="#kt_modal_add_user_header"
                                     data-kt-scroll-wrappers="#kt_modal_add_user_scroll"
                                     data-kt-scroll-offset="300px">

                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('Name')}}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input value="{{$user->id}}" type="hidden" name="id">
                                        <input type="text" name="name" required value="{{$user->name}}"
                                               class="form-control form-control-solid mb-3 mb-lg-0 marketer-name"
                                               placeholder="{{translate('Name')}}"/>
                                        <!--end::Input-->
                                    </div>
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label
                                            class="required fw-semibold fs-6 mb-2">{{translate('Email')}}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="email" name="email" required value="{{$user->email}}"
                                               class="form-control form-control-solid mb-3 mb-lg-0"
                                               placeholder="{{translate('Email')}}"/>


                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <div class="fv-row mb-7">
                                                <!--begin::Label-->
                                                <label
                                                    class="required fw-semibold fs-6 mb-2">{{translate('Phone')}}</label>
                                                <!--end::Label-->
                                                <!--begin::Input-->
                                                <input type="number" name="phone" required value="{{$user->phone}}"
                                                       class="form-control form-control-solid mb-3 mb-lg-0"
                                                       placeholder="{{translate('Phone')}}"/>


                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="fv-row mb-7">
                                                <!--begin::Label-->
                                                <label
                                                    class="required fw-semibold fs-6 mb-2">{{translate('Country')}}</label>
                                                <!--end::Label-->
                                                <!--begin::Input-->
                                                <input name="country_id" readonly
                                                       value="{{$user->marketer?country($user->marketer->country_id):''}}"
                                                       class="form-control form-control-solid mb-3 mb-lg-0"
                                                       placeholder="{{translate('Country')}}"/>


                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <div class="fv-row mb-7">
                                                <!--begin::Label-->
                                                <label
                                                    class="required fw-semibold fs-6 mb-2">{{translate('Referral Code')}}</label>
                                                <!--end::Label-->
                                                <!--begin::Input-->
                                                <input readonly name="referral_code"
                                                       value="{{$user->marketer?$user->marketer->referral_code:''}}"
                                                       class="form-control form-control-solid mb-3 mb-lg-0"
                                                       placeholder="{{translate('Referral Code')}}"/>


                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="fv-row mb-7">
                                                <!--begin::Label-->
                                                <label
                                                    class="required fw-semibold fs-6 mb-2">{{translate('Referral Link')}}</label>

                                                <input name="referral_link"
                                                       value="{{$user->marketer?$user->marketer->referral_link:''}}"
                                                       class="form-control form-control-solid mb-3 mb-lg-0 marketer-url"
                                                       placeholder="{{translate('Referral Link')}}"/>
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <div class="fv-row mb-7">
                                                <!--begin::Label-->
                                                <label
                                                    class="required fw-semibold fs-6 mb-2">{{translate('Password')}}</label>

                                                <input type="password" name="password"
                                                       class="form-control form-control-solid mb-3 mb-lg-0"
                                                       placeholder="{{translate('Password')}}"/>
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="fv-row mb-7">
                                                <!--begin::Label-->
                                                <label
                                                    class="required fw-semibold fs-6 mb-2">{{translate('Referred By')}}</label>

                                                <select name="role" class="form-select" data-control="select2"
                                                        data-placeholder="Select an option">
                                                    @foreach($marketers as $marketer)
                                                        <option value="{{$marketer->id}}"
                                                                @if($marketer->id == $user->marketer->referred_by) selected @endif>{{$marketer->name}}</option>
                                                    @endforeach
                                                </select>
                                                <!--end::Input-->
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!--end::Scroll-->
                            <!--begin::Actions-->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light"
                                        data-bs-dismiss="modal">{{translate('Close')}}</button>
                                <button type="submit" class="btn btn-primary">{{translate('Save')}}</button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>

            <div class="modal fade" id="kt_modal_team" tabindex="-1">
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-fullscreen">
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_add_user_header">
                            <div class="btn-group">

                                <div class="d-flex align-items-center position-relative my-1">
                                    <span class="svg-icon fs-1 position-absolute ms-4">
                                        <i class="ki-duotone ki-magnifier fs-2 text-gray-500 position-absolute top-50 translate-middle-y"><span
                                                class="path1"></span><span class="path2"></span></i></span>
                                    <input type="search" data-kt-filter="search"
                                           class="form-control form-control-solid w-250px ps-14"
                                           placeholder="Search " oninput="filterChart(event)"/>
                                </div>
                                <!--end::Search-->
                                <!--begin::Export buttons-->
                                <div id="kt_datatable_example_1_export" class="d-none"></div>

                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick='chart.layout(["right","bottom","left","top"][index++%4]).render().fit()'>
                                    <i class="fs-2x ki-duotone  ki-arrow-zigzag"><span class="path1"></span><span
                                            class="path2"></span></i></button>


                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick="chart.zoomIn()"><i class="fs-2x ki-duotone ki-plus-square"><span
                                            class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                </button>
                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick="chart.zoomOut()"><i class="fs-2x ki-duotone ki-minus-square"><span
                                            class="path1"></span><span class="path2"></span></i></button>
                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick="chart.expandAll().fit()"><i
                                        class="fs-2x ki-duotone ki-arrow-two-diagonals"><span class="path1"></span><span
                                            class="path2"></span><span class="path3"></span><span
                                            class="path4"></span><span class="path5"></span></i>
                                </button>
                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick="chart.collapseAll().fit()"><i class="ki-duotone ki-focus fs-2x"><span
                                            class="path1"></span><span class="path2"></span></i></button>
                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick="chart.exportSvg()"><i class="ki-duotone ki-picture fs-2x"><span
                                            class="path1"></span><span class="path2"></span></i></button>
                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick="downloadPdf(chart)"><i class="ki-duotone ki-cloud-download fs-2x"><span
                                            class="path1"></span><span class="path2"></span></i></button>


                                <button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                        onclick="chart.compact(!!(compact++%2)).render().fit()"><i
                                        class="ki-duotone ki-data fs-2x"><span class="path1"></span><span
                                            class="path2"></span><span class="path3"></span><span
                                            class="path4"></span><span class="path5"></span></i></button>

                            </div>
                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                                 aria-label="Close">
                                <i class="ki-duotone ki-cross fs-2x"><span class="path1"></span><span
                                        class="path2"></span></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->

                        <div class="modal-body text-center" style="max-height: 100vh;padding:0;">

                            <div class="chart-container"></div>
                        </div>
                        <!--end::Scroll-->
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
@endsection
@section('script')
    <script>

        $(document).ready(function () {
            var user = '{{$user->banned}}'
            if (user == 0) {
                $('.user-ban .ban').show()
                $('.user-ban .unban').hide()
            } else {
                $('.user-ban .ban').hide()
                $('.user-ban .unban').show()
            }
        });
        $('.btn-danger').on('click', function (event) {
            var id = '{{$user->id}}';
            Swal.fire({
                title: "{{ translate('Are you sure?') }}",
                text: "{{ translate('You will delete this item!') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: "{{ translate('Yes, delete it!') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('marketer.delete') }}',
                        data: {id: id, "_token": "{{ csrf_token() }}"},
                        dataType: "json",
                        success: function (response) {
                            if (response === 'error') {
                                Swal.fire({
                                    icon: "error",
                                    title: "{{ translate('Error') }}...",
                                    text: "{{ translate('Can\'t delete') }}"
                                });
                            } else {
                                Swal.fire({
                                    icon: "success",
                                    title: "{{ translate('Success!') }}",
                                    text: response.success,
                                });
                            }
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            Swal.fire({
                                icon: "error",
                                title: "{{ translate('Error') }}...",
                                text: errorThrown
                            });
                        }
                    });
                }
            });
        });

        $('.user-ban').on('click', function () {

            var id = '{{$user->id}}';
            Swal.fire({
                title: "{{ translate('Are you sure?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: "{{ translate('Yes!') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('marketer.ban') }}',
                        data: {id: id, "_token": "{{ csrf_token() }}"},
                        dataType: "json",
                        success: function (response) {
                            if (response === 'error') {
                                Swal.fire({
                                    icon: "error",
                                    title: "{{ translate('Error') }}...",
                                    text: "{{ translate('Can\'t Ban') }}"
                                });
                            } else {
                                console.log(response)
                                if (response == 1) {
                                    $('.user-ban .ban').show()
                                    $('.user-ban .unban').hide()
                                } else {
                                    $('.user-ban .ban').hide()
                                    $('.user-ban .unban').show()
                                }

                                Swal.fire({
                                    icon: "success",
                                    title: "{{ translate('Success!') }}",
                                    text: response.success,
                                });
                            }
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            Swal.fire({
                                icon: "error",
                                title: "{{ translate('Error') }}...",
                                text: errorThrown
                            });
                        }
                    });
                }
            });
        });
    </script>
    <script>
        $('.marketer-name').change(function () {
            // Get the input value
            var inputValue = $(this).val();
            inputValue = inputValue.toLowerCase();
            var filteredValue = inputValue.replace(/[^a-z0-9]/g, '');
            // Set the filtered value to the .marketer-url input
            $('.marketer-url').val(filteredValue);
        });

        $('.marketer-url').change(function () {
            // Get the input value
            var inputValue = $(this).val();
            // Convert input value to lowercase
            inputValue = inputValue.toLowerCase();
            // Filter out non-alphanumeric characters using regular expression
            var filteredValue = inputValue.replace(/[^a-z0-9]/g, '');
            // Set the filtered value to the .marketer-url input
            $(this).val(filteredValue);
        });
    </script>

    @include('mlm')
@endsection