@extends('admin.main')

@section('main')

<div id="kt_content_container" class="container-xxl">

    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Layout-->

            @if ($errors->any())
            <div class="alert alert-danger mt-5">
                @foreach ($errors->all() as $error)
                    {{ $error }}
                @endforeach
            </div>
            @endif

            @if (session()->has('success'))

                <div class="alert alert-success">Success</div>

            @endif

            <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-150px symbol-circle mb-7">
                                    {{-- <img src="{{ asset('admin/media/avatars/300-1.jpg') }}" alt="image" /> --}}
                                </div>
                                <!--end::Avatar-->
                                <!--begin::Name-->
                                <a class="fs-3 text-gray-800 text-hover-primary fw-bolder mb-1">{{ $customerData->customer_name }}</a>
                                <!--end::Name-->
                                <!--begin::Email-->
                                {{-- <a href="tel:{{ mask_tel($customerData->phone) }}" class="fs-5 fw-bold text-muted text-hover-primary mb-6">{{ mask_tel($customerData->phone) }}</a> --}}
                                <!--end::Email-->
                            </div>
                            <!--end::Summary-->
                            <!--begin::Details toggle-->
                            <div class="d-flex flex-stack fs-4 py-3">
                                <div class="fw-bolder">Details</div>
                                <!--begin::Badge-->


                                <!--begin::Badge-->
                            </div>
                            <!--end::Details toggle-->
                            <div class="separator separator-dashed my-3"></div>
                            <!--begin::Details content-->
                            <div class="pb-5 fs-6">

                                <!--begin::Details item-->
                                <!--begin::Details item-->
                                <div class="fw-bolder mt-5">Email</div>
                                <div class="text-gray-600">
                                    <a class="text-gray-600 text-hover-primary">{{ $customerData->email }}</a>
                                </div>
                                <!--begin::Details item-->
                                <!--begin::Details item-->
                                <div class="fw-bolder mt-5">Registred At</div>
                                <div class="text-gray-600">{{ maskDate($customerData->created_at, 'Y/m/d') }}</div>
                                <!--begin::Details item-->
                                <!--begin::Details item-->

                                <!--begin::Details item-->
                                <!--begin::Details item-->
                                {{-- @if (count($customerOrders) > 0)
                                    <div class="fw-bolder mt-5">Última compra</div>
                                    <div class="text-gray-600">
                                        <a href="{{ route('panel.orders.view',$customerOrders->last()->id) }}" class="text-gray-600 text-hover-primary">#{{ $customerOrders->last()->id }}</a>
                                    </div>
                                @endif --}}
                                <!--begin::Details item-->
                                <div class="mt-5">
                                    <button data-bs-toggle="modal" data-bs-target="#kt_modal_update_password" class="btn btn-custom btn-light-primary w-100" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss-="click" title="Altarar senha do cliente">
                                        <!--begin::Svg Icon | path: icons/duotune/general/gen005.svg-->
                                        <i class="fas fa-key"></i>
                                        <!--end::Svg Icon-->
                                        <span class="btn-label">Change Password</span>
                                    </button>
                                </div>
                            </div>
                            <!--end::Details content-->
                        </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-bold mb-8 d-none">
                        <!--begin:::Tab item-->
                        {{-- <li class="nav-item">
                            <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_ecommerce_customer_overview">Geral</a>
                        </li> --}}
                        <!--end:::Tab item-->
                        <!--begin:::Tab item-->
                        {{-- <li class="nav-item">
                            <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_customer_general">Endereços</a>
                        </li> --}}
                        <!--end:::Tab item-->
                        <!--begin:::Tab item-->
                        <!--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_ecommerce_customer_overview" role="tabpanel">

                            <!--begin::Card-->
                            <div class="card pt-4 mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header border-0">
                                    <!--begin::Card title-->
                                    <div class="card-title">
                                        <h2>Historic</h2>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body pt-0 pb-5">
                                    <!--begin::Table-->
                                    <table class="table align-middle table-row-dashed gy-5" id="kt_table_customers_payment">
                                        <!--begin::Table head-->
                                        <thead class="border-bottom border-gray-200 fs-7 fw-bolder">
                                            <!--begin::Table row-->
                                            <tr class="text-start text-muted text-uppercase gs-0">
                                                <th class="min-w-100px">Id.</th>
                                                {{-- <th>Order Status</th> --}}
                                                {{-- <th>Payment Status</th>
                                                <th class="">Purchase Value</th>
                                                <th class="">Shipping Value</th> --}}
                                                <th class="min-w-100px">Date</th>
                                                <th class=""></th>
                                            </tr>
                                            <!--end::Table row-->
                                        </thead>
                                        <!--end::Table head-->
                                        <!--begin::Table body-->
                                        <tbody class="fs-6 fw-bold text-gray-600">

                                            @forelse ($customerData->ordersExisting as $order)
                                                <tr>
                                                    <!--begin::order=-->
                                                    <td>
                                                        <a href="{{ route('admin.sales.view', $order->id) }}"  class="text-gray-600 text-hover-primary">#{{ $order->id }}</a>
                                                    </td>
                                                    <!--end::order=-->
                                                    <!--begin::Status=-->
                                                    {{-- <td>
                                                        @if ($order->payment_status == '1')
                                                            @switch($order->sale_status)
                                                                @case('0')
                                                                    <small style="color: orange;">Waiting Confirmation</small>
                                                                @break

                                                                @case('1')
                                                                    <small style="color: #142d7e;">Preparing package</small>
                                                                @break

                                                                @case('2')
                                                                    <small style="color: #23b100;">Shipping</small>
                                                                @break
                                                                @case('3')
                                                                    <small style="color: #d3002e;">Returned</small>
                                                                @break

                                                                @default
                                                            @endswitch
                                                        @elseif ($order->payment_status == 3)
                                                            <small style="color: #d3002e;">Refunded</small>
                                                        @else
                                                            <small style="color: orange;">Waiting Payment</small>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @switch($order->payment_status)
                                                        @case(0)
                                                            <span class="badge badge-light-warning fs-8 fw-bolder">Waiting Payment</span>
                                                            @break
                                                        @case(1)
                                                        <span class="badge badge-light-success fs-8 fw-bolder">Paid</span>
                                                            @break
                                                        @case(2)
                                                            <span class="badge badge-light-danger fs-8 fw-bolder">Payment not approved</span>
                                                            @break
                                                        @case(3)
                                                            <span class="badge badge-light-info fs-8 fw-bolder">Refunded</span>
                                                            @break
                                                        @default
                                                            Not Found
                                                            @break
                                                    @endswitch
                                                    </td>
                                                    <!--end::Status=-->
                                                    <!--begin::Amount=-->
                                                    <td>{{ formatMoney($order->value_purchase, true) }}</td>
                                                    <td>{{ formatMoney($order->value_shipping, true) }}</td>
                                                    <!--end::Amount=--> --}}
                                                    <!--begin::Amount=-->
                                                    <td>{{ maskDate($order->created_at, 'Y/m/d') }}</td>
                                                    <!--end::Amount=-->
                                                    <!--begin::Date=-->
                                                    <td>
                                                        <a href="{{ route('admin.sales.view', $order->id) }}"><i class="fas fa-eye"></i></a>
                                                    </td>
                                                    <!--end::Date=-->
                                                </tr>
                                                <!--end::Table row-->
                                            @empty
                                                <div class="alert alert-danger">The customer did not make any purchases.</div>
                                            @endforelse

                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end:::Tab pane-->
                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade" id="kt_ecommerce_customer_general" role="tabpanel">
                            <!--begin::Card-->
                            <div style="display: none;" class="card pt-4 mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header border-0">
                                    <!--begin::Card title-->
                                    <div class="card-title">
                                        <h2>Profile</h2>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body pt-0 pb-5">
                                    <!--begin::Form-->
                                    <form class="form" action="#" id="kt_ecommerce_customer_profile">
                                        <!--begin::Input group-->
                                        <div class="mb-7">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-bold mb-2">
                                                <span>Update Avatar</span>
                                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Allowed file types: png, jpg, jpeg."></i>
                                            </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('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::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" title="Change avatar">
                                                        <i class="bi bi-pencil-fill 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" title="Cancel avatar">
                                                        <i class="bi bi-x 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" title="Remove avatar">
                                                        <i class="bi bi-x 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-bold mb-2 required">Name</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" class="form-control form-control-solid" placeholder="" name="name" value="Max Smith" />
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Row-->
                                        <div class="row row-cols-1 row-cols-md-2">
                                            <!--begin::Col-->
                                            <div class="col">
                                                <!--begin::Input group-->
                                                <div class="fv-row mb-7">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-bold mb-2">
                                                        <span class="required">General Email</span>
                                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Email address must be active"></i>
                                                    </label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <input type="email" class="form-control form-control-solid" placeholder="" name="gen_email" value="max@kt.com" />
                                                    <!--end::Input-->
                                                </div>
                                                <!--end::Input group-->
                                            </div>
                                            <!--end::Col-->
                                            <!--begin::Col-->
                                            <div class="col">
                                                <!--begin::Input group-->
                                                <div class="fv-row mb-7">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-bold mb-2">
                                                        <span>Billing Email</span>
                                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Email address must be active"></i>
                                                    </label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <input type="email" class="form-control form-control-solid" placeholder="" name="bill_email" value="info@keenthemes.com" />
                                                    <!--end::Input-->
                                                </div>
                                                <!--end::Input group-->
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Row-->
                                        <div class="d-flex justify-content-end">
                                            <!--begin::Button-->
                                            <button type="submit" id="kt_ecommerce_customer_profile_submit" class="btn btn-light-primary">
                                                <span class="indicator-label">Save</span>
                                                <span class="indicator-progress">Please wait...
                                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                            </button>
                                            <!--end::Button-->
                                        </div>
                                    </form>
                                    <!--end::Form-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                            <!--begin::Card-->
                            <div class="card pt-4 mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header border-0">
                                    <!--begin::Card title-->
                                    <div class="card-title">
                                        <h2>Endereços</h2>
                                    </div>
                                    <!--end::Card title-->
                                    <!--begin::Card toolbar-->
                                    <div class="card-toolbar">
                                        {{-- <a href="#" class="btn btn-sm btn-flex btn-light-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_address">
                                        <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                        <span class="svg-icon svg-icon-3">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor" />
                                                <rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="currentColor" />
                                                <rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="currentColor" />
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->Add new address</a> --}}
                                    </div>
                                    <!--end::Card toolbar-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div id="kt_ecommerce_customer_addresses" class="card-body pt-0 pb-5">
                                    <!--begin::Addresses-->
                                    <!--begin::Address-->

                                    {{-- @foreach ($customerData->addresses as $key => $address) --}}
                                    @foreach ([] as $key => $address)
                                    <div class="py-0">
                                        <!--begin::Header-->
                                        <div class="py-3 d-flex flex-stack flex-wrap">
                                            <!--begin::Toggle-->
                                            <div class="d-flex align-items-center collapsible collapsed rotate" data-bs-toggle="collapse" href="#kt_ecommerce_customer_addresses_{{$key}}" role="button" aria-expanded="false" aria-controls="kt_customer_view_payment_method_1">
                                                <!--begin::Arrow-->
                                                <div class="me-3 rotate-90">
                                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr071.svg-->
                                                    <span class="svg-icon svg-icon-3">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                            <path d="M12.6343 12.5657L8.45001 16.75C8.0358 17.1642 8.0358 17.8358 8.45001 18.25C8.86423 18.6642 9.5358 18.6642 9.95001 18.25L15.4929 12.7071C15.8834 12.3166 15.8834 11.6834 15.4929 11.2929L9.95001 5.75C9.5358 5.33579 8.86423 5.33579 8.45001 5.75C8.0358 6.16421 8.0358 6.83579 8.45001 7.25L12.6343 11.4343C12.9467 11.7467 12.9467 12.2533 12.6343 12.5657Z" fill="currentColor" />
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->
                                                </div>
                                                <!--end::Arrow-->
                                                <!--begin::Summary-->
                                                <div class="me-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="fs-4 fw-bolder">
                                                            {{ ($address->title)??'Sem titulo' }}
                                                        </div>
                                                    </div>
                                                    <div class="text-muted">{{ $address->number }} {{ $address->street }}</div>
                                                </div>
                                                <!--end::Summary-->
                                            </div>
                                            <!--end::Toggle-->
                                        </div>
                                        <!--end::Header-->
                                        <!--begin::Body-->
                                        <div id="kt_ecommerce_customer_addresses_{{$key}}" class="collapse fs-6 ps-9" data-bs-parent="#kt_ecommerce_customer_addresses">
                                            <!--begin::Details-->
                                            <div class="d-flex flex-column pb-5">
                                                {{-- <div class="fw-bolder text-gray-600">Max Smith</div> --}}
                                                <div class="text-muted">Rua {{ $address->street }} {{ ($address->number)?'Nº'.$address->number:'' }},
                                                <br />Bairro {{ $address->district }}, {{ $address->city }},
                                                <br />{{ mask_cep($address->zipcode) }}</div>
                                            </div>
                                            <!--end::Details-->
                                        </div>
                                        <!--end::Body-->
                                    </div>
                                    @endforeach

                                    <!--end::Address-->

                                    <!--end::Addresses-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end:::Tab pane-->
                        <!--begin:::Tab pane-->
                        <div class="tab-pane fade" id="kt_ecommerce_customer_advanced" role="tabpanel">
                            <!--begin::Card-->
                            <div class="card pt-4 mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header border-0">
                                    <!--begin::Card title-->
                                    <div class="card-title">
                                        <h2>Indicados</h2>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body pt-0 pb-5">
                                    <!--begin::Table wrapper-->
                                    <div class="table-responsive">
                                        <!--begin::Table-->

                                        <table id="table_childs" class="mydatatable table table-striped table-row-bordered gy-5 gs-7">
                                            <thead>
                                                <tr class="fw-bold fs-6 text-gray-800">
                                                    <th>Nome</th>
                                                    <th>Data de cadastro</th>
                                                    <th>Ver</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                            <tfoot>
                                                <tr class="fw-bold fs-6 text-gray-800">
                                                    <th>Nome</th>
                                                    <th>Data de cadastro</th>
                                                    <th>Ver</th>
                                                </tr>
                                            </tfoot>
                                        </table>

                                        <!--end::Table-->
                                    </div>
                                    <!--end::Table wrapper-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                            <!--begin::Card-->
                            <div class="card pt-4 mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header border-0">
                                    <!--begin::Card title-->
                                    <div class="card-title flex-column">
                                        <h2 class="mb-1">Extrato</h2>
                                        <div class="fs-6 fw-bold text-muted">Movimentações do cliente.</div>
                                    </div>
                                    <!--end::Card title-->
                                    <!--begin::Card toolbar-->
                                    <div class="card-toolbar">

                                    </div>
                                    <!--end::Card toolbar-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body pb-5">
                                    <!--begin::Item-->
                                    <table id="table_extracts" class="mydatatable table table-striped table-row-bordered gy-5 gs-7">
                                        <thead>
                                            <tr class="fw-bold fs-6 text-gray-800">
                                                <th>Tipo</th>
                                                <th>Valor</th>
                                                <th>Descrição</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                        <tfoot>
                                            <tr class="fw-bold fs-6 text-gray-800">
                                                <th>Tipo</th>
                                                <th>Valor</th>
                                                <th>Descrição</th>
                                                <th>Status</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <!--end::Item-->
                                    <!--begin:Separator-->
                                    <div class="separator separator-dashed my-5"></div>
                                    <!--end:Separator-->
                                    <!--begin::Disclaimer-->
                                    {{-- <div class="text-gray-600">Lista de saques desse cliente. Você poderá acompanhar em <a href="#">Pedidos de saques</a> de todos os clientes.</div> --}}
                                    <!--end::Disclaimer-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Card-->
                            <!--begin::Card-->
                            <div class="card pt-4 mb-6 mb-xl-9">
                                <!--begin::Card header-->
                                <div class="card-header border-0">
                                    <!--begin::Card title-->
                                    <div class="card-title">
                                        <h2 class="fw-bolder mb-0">Contas para saque</h2>
                                    </div>
                                    <!--end::Card title-->
                                    <!--begin::Card toolbar-->
                                    <div class="card-toolbar">

                                    </div>
                                    <!--end::Card toolbar-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div id="kt_customer_view_payment_method" class="card-body pt-0">
                                    <!--begin::Option-->

                                    @foreach ([] as $account)
                                    <div class="py-0" data-kt-customer-payment-method="row">
                                        <!--begin::Header-->
                                        <div class="py-3 d-flex flex-stack flex-wrap">
                                            <!--begin::Toggle-->
                                            <div class="d-flex align-items-center collapsible rotate" data-bs-toggle="collapse" href="#kt_customer_view_payment_method_{{$account->id}}" role="button" aria-expanded="false" aria-controls="kt_customer_view_payment_method_{{$account->id}}">
                                                <!--begin::Arrow-->
                                                <div class="me-3 rotate-90">
                                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr071.svg-->
                                                    <span class="svg-icon svg-icon-3">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                            <path d="M12.6343 12.5657L8.45001 16.75C8.0358 17.1642 8.0358 17.8358 8.45001 18.25C8.86423 18.6642 9.5358 18.6642 9.95001 18.25L15.4929 12.7071C15.8834 12.3166 15.8834 11.6834 15.4929 11.2929L9.95001 5.75C9.5358 5.33579 8.86423 5.33579 8.45001 5.75C8.0358 6.16421 8.0358 6.83579 8.45001 7.25L12.6343 11.4343C12.9467 11.7467 12.9467 12.2533 12.6343 12.5657Z" fill="currentColor" />
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->
                                                </div>
                                                <!--end::Arrow-->
                                                <!--begin::Logo-->
                                                <img src="assets/media/svg/card-logos/mastercard.svg" class="w-40px me-3" alt="" />
                                                <!--end::Logo-->
                                                <!--begin::Summary-->
                                                <div class="me-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="text-gray-800 fw-bolder">{{ $account->institution }}</div>
                                                        {{-- <div class="badge badge-light-primary ms-5">Primary</div> --}}
                                                    </div>
                                                    <div class="text-muted">Criado em: {{ maskDate($account->created_at) }}</div>
                                                </div>
                                                <!--end::Summary-->
                                            </div>
                                            <!--end::Toggle-->
                                        </div>
                                        <!--end::Header-->
                                        <!--begin::Body-->
                                        <div id="kt_customer_view_payment_method_{{$account->id}}" class="collapse  fs-6 ps-10" data-bs-parent="#kt_customer_view_payment_method">
                                            <!--begin::Details-->
                                            <div class="d-flex flex-wrap py-5">
                                                <!--begin::Col-->
                                                <div class="flex-equal me-5">
                                                    <table class="table table-flush fw-bold gy-1">
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">Titular</td>
                                                            <td class="text-gray-800">{{ $account->holder_name }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">Documento</td>
                                                            <td class="text-gray-800">{{ $account->document_number }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">Instituição</td>
                                                            <td class="text-gray-800">{{ $account->institution }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">Tipo de conta</td>
                                                            <td class="text-gray-800">
                                                                @switch($account->account_type)
                                                                    @case('savings')
                                                                        Poupança
                                                                        @break
                                                                    @case('checking')
                                                                        Corrente
                                                                        @break
                                                                    @default
                                                                @endswitch
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">ID</td>
                                                            <td class="text-gray-800">#{{ $account->id }}</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <!--end::Col-->
                                                <!--begin::Col-->
                                                <div class="flex-equal">
                                                    <table class="table table-flush fw-bold gy-1">
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">Conta bancária</td>
                                                            <td class="text-gray-800">{{ $account->number_account }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">Agência</td>
                                                            <td class="text-gray-800">{{ $account->agency }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-muted min-w-125px w-125px">Chave Pix</td>
                                                            <td class="text-gray-800">
                                                                {{ $account->key_pix }}
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <!--end::Col-->
                                            </div>
                                            <!--end::Details-->
                                        </div>
                                        <!--end::Body-->
                                    </div>
                                    @endforeach

                                    <!--end::Option-->
                                    <div class="separator separator-dashed"></div>

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

                    </div>
                    <!--end:::Tab content-->
                </div>
                <!--end::Content-->
            </div>
            <!--end::Layout-->
            <!--begin::Modals-->


            <div class="modal  fade" tabindex="-1" id="kt_modal_update_password">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                Update Password
                            </h5>

                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                                <span class="svg-icon svg-icon-2x"></span>
                            </div>
                            <!--end::Close-->
                        </div>

                        <div class="modal-body">
                            <form id="kt_modal_update_password_form_sb" class="form" method="POST" action="{{ route('admin.customers.update-password', $customerData->id) }}">
                                <!--begin::Input group-->
                                <div class="mb-10 fv-row" data-kt-password-meter="true">
                                    <!--begin::Wrapper-->
                                    <div class="mb-1">
                                        <!--begin::Label-->
                                        <label class="form-label fw-bold fs-6 mb-2">Password</label>
                                        <!--end::Label-->
                                        <!--begin::Input wrapper-->
                                        <div class="position-relative mb-3">
                                            <input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="password" autocomplete="off" />
                                            <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                                <i class="bi bi-eye-slash fs-2"></i>
                                                <i class="bi bi-eye fs-2 d-none"></i>
                                            </span>
                                        </div>
                                        <!--end::Input wrapper-->
                                        <!--begin::Meter-->
                                        <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                                            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                                        </div>
                                        <!--end::Meter-->
                                    </div>
                                    <!--end::Wrapper-->
                                    <!--begin::Hint-->
                                    <div class="text-muted">Use 8 or more characters with combination of letters, numbers & symbols.</div>
                                    <!--end::Hint-->
                                </div>
                                <!--end::Input group=-->
                                <!--begin::Input group=-->
                                <div class="fv-row mb-10">
                                    <label class="form-label fw-bold fs-6 mb-2">Confirm Password</label>
                                    <input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="password_confirmation" autocomplete="off" />
                                </div>
                                <!--end::Input group=-->
                                <input type="hidden" name="uId" value="{{ $customerData->id }}">
                                @csrf
                            </form>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>

                            <button onclick="document.querySelector('#kt_modal_update_password_form_sb').submit()" type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
                                <span class="indicator-label">Save</span>
                                <span class="indicator-progress">Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>

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


            <!--end::Modals-->
        </div>
        <!--end::Container-->
    </div>

</div>

@endsection

@section('footer')

@endsection

@push('css')

@endpush