@extends('dashboard.parent')

@section('title',__('pages.user_profile'))

@section('page_name',__('pages.user_profile'))

@section('css')
@endsection

@section('bread_crumb')
<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
    <!--begin::Item-->
    <li class="breadcrumb-item text-muted">
        <a href="{{route('home')}}" class="text-muted text-hover-primary">{{__('pages.home')}}</a>
    </li>
    <!--end::Item-->
    <!--begin::Item-->
    <li class="breadcrumb-item">
        <span class="bullet bg-gray-400 w-5px h-2px"></span>
    </li>
    <!--end::Item-->
    <!--begin::Item-->
    <li class="breadcrumb-item text-muted">{{__('pages.user_profile')}}</li>
    <!--end::Item-->
</ul>
@endsection

@section('actions')

@endsection

@section('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::Basic info-->
        <div class="card mb-5 mb-xl-10">
            <!--begin::Card header-->
            <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                data-bs-target="#kt_account_profile_details" aria-expanded="true"
                aria-controls="kt_account_profile_details">
                <!--begin::Card title-->
                <div class="card-title m-0">
                    <h3 class="fw-bold m-0">@lang('pages.profile_details')</h3>
                </div>
                <!--end::Card title-->
            </div>
            <!--begin::Card header-->
            <!--begin::Content-->
            <div id="kt_account_settings_profile_details" class="collapse show">
                <!--begin::Form-->
                <form id="kt_account_profile_details_form" class="form">
                    <!--begin::Card body-->
                    <div class="card-body border-top p-9">
                        <!--begin::Input group-->
                        {{-- <div class="row mb-6">
                            <!--begin::Label-->
                            <label class="col-lg-4 col-form-label fw-semibold fs-6">Avatar</label>
                            <!--end::Label-->
                            <!--begin::Col-->
                            <div class="col-lg-8">
                                <!--begin::Image input-->
                                <div class="image-input image-input-outline" data-kt-image-input="true"
                                    style="background-image: url('assets/media/svg/avatars/blank.svg')">
                                    <!--begin::Preview existing avatar-->
                                    <div class="image-input-wrapper w-125px h-125px"
                                        style="background-image: url(assets/media/avatars/300-1.jpg)"></div>
                                    <!--end::Preview existing avatar-->
                                    <!--begin::Label-->
                                    <label
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                        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::Label-->
                                    <!--begin::Cancel-->
                                    <span
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                        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-->
                                <!--begin::Hint-->
                                <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
                                <!--end::Hint-->
                            </div>
                            <!--end::Col-->
                        </div> --}}
                        <!--end::Input group-->

                        <!--begin::user name-->
                        <div class="row mb-6">
                            <!--begin::Label-->
                            <label
                                class="col-lg-4 col-form-label required fw-semibold fs-6">@lang('pages.user_name')</label>
                            <!--end::Label-->
                            <!--begin::Col-->
                            <div class="col-lg-8">
                                <!--begin::Row-->
                                <div class="row">
                                    <!--begin::Col-->
                                    <div class="col-lg fv-row">
                                        <input type="text" name="user_name" id="user_name"
                                            value="{{$user->user_name ?? null}}" class="form-control mb-2"
                                            placeholder="{{__('pages.user_name')}}" required />
                                        <span class="error_user_name text-danger">
                                        </span>
                                    </div>
                                    <!--end::Col-->
                                </div>
                                <!--end::Row-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::user name-->

                        <!--begin::name-->
                        <div class="row mb-6">
                            <!--begin::Label-->
                            <label class="col-lg-4 col-form-label required fw-semibold fs-6">@lang('pages.name')</label>
                            <!--end::Label-->
                            <!--begin::Col-->
                            <div class="col-lg-8">
                                <!--begin::Row-->
                                <div class="row">
                                    <!--begin::Col-->
                                    <div class="col-lg-6 fv-row">
                                        <input type="text" name="f_name" id="f_name" value="{{$user->f_name ?? null}}"
                                            class="form-control mb-2" placeholder="{{__('pages.f_name')}}" required />
                                        <span class="error_f_name text-danger">
                                        </span>
                                    </div>
                                    <!--end::Col-->
                                    <!--begin::Col-->
                                    <div class="col-lg-6 fv-row">
                                        <input type="text" name="l_name" id="l_name" value="{{$user->l_name ?? null}}"
                                            class="form-control mb-2" placeholder="{{__('pages.l_name')}}" required />
                                        <span class="error_l_name text-danger">
                                        </span>
                                    </div>
                                    <!--end::Col-->
                                </div>
                                <!--end::Row-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::name-->

                        <!--begin::phone_number-->
                        <div class="row mb-6">
                            <!--begin::Label-->
                            <label
                                class="col-lg-4 col-form-label required fw-semibold fs-6">{{__('pages.phone_number')}}</label>
                            <!--end::Label-->
                            <!--begin::Col-->
                            <div class="col-lg-8 fv-row">
                                <input type="text" name="phone_number" id="phone_number"
                                    value="{{$user->phone_number ?? null}}" class="form-control mb-2"
                                    placeholder="{{__('pages.phone_number')}}" required />
                                <span class="error_phone_number text-danger">
                                </span>
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::phone_number-->

                        <!--begin::type-->
                        <div class="row mb-6">
                            <!--begin::Label-->
                            <label
                                class="col-lg-4 col-form-label required fw-semibold fs-6">{{__('pages.type')}}</label>
                            <!--end::Label-->
                            <!--begin::Col-->
                            <div class="col-lg-8 fv-row">
                                <!--begin::Input-->
                                <select class="form-select mb-2" data-control="select2" data-hide-search="true"
                                    data-placeholder="Select an option" id="type" required>
                                    <option></option>
                                    <option value="1" @selected(($user->type ?? null) == 1)>{{__('pages.employee')}}
                                    </option>
                                    <option value="2" @selected(($user->type ?? null) == 2)>{{__('pages.admin')}}
                                    </option>
                                </select>
                                <!--end::Input-->
                                <!--begin::Hint-->
                                <span class="error_type text-danger">
                                </span>
                                <!--end::Hint-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::type-->

                        <!--begin::status-->
                        <div class="row mb-6">
                            <!--begin::Label-->
                            <label
                                class="col-lg-4 col-form-label required fw-semibold fs-6">{{__('pages.status')}}</label>
                            <!--end::Label-->
                            <!--begin::Col-->
                            <div class="col-lg-8 fv-row">
                                <!--begin::Input-->
                                <select class="form-select mb-2" data-control="select2" data-hide-search="true"
                                    data-placeholder="Select an option" id="status" required>
                                    <option></option>
                                    <option value="1" @selected(($user->status ?? null) == 1)>{{__('pages.active')}}
                                    </option>
                                    <option value="0" @selected(($user->status ?? null) == 0)>{{__('pages.non_active')}}
                                    </option>
                                </select>
                                <!--end::Input-->
                                <!--begin::Hint-->
                                <span class="error_status text-danger">
                                </span>
                                <!--end::Hint-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::status-->


                    </div>
                    <!--end::Card body-->
                    <!--begin::Actions-->
                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                        <button type="reset"
                            class="btn btn-light btn-active-light-primary me-2">@lang('pages.cancel')</button>
                        <button type="button" onclick="updateUserDetails()" class="btn btn-primary"
                            id="kt_account_profile_details_submit">@lang('pages.save')</button>
                    </div>
                    <!--end::Actions-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Basic info-->
        <!--begin::Sign-in Method-->
        <div class="card mb-5 mb-xl-10">
            <!--begin::Card header-->
            <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                data-bs-target="#kt_account_signin_method">
                <div class="card-title m-0">
                    <h3 class="fw-bold m-0">@lang('pages.sign_in_method')</h3>
                </div>
            </div>
            <!--end::Card header-->
            <!--begin::Content-->
            <div id="kt_account_settings_signin_method" class="collapse show">
                <!--begin::Card body-->
                <div class="card-body border-top p-9">
                    <!--begin::Email Address-->
                    <div class="d-flex flex-wrap align-items-center">
                        <!--begin::Label-->
                        <div id="kt_signin_email">
                            <div class="fs-6 fw-bold mb-1">@lang('pages.email_address')</div>
                            <div class="fw-semibold text-gray-600">{{$user->email}}</div>
                        </div>
                        <!--end::Label-->
                        <!--begin::Edit-->
                        <div id="kt_signin_email_edit" class="flex-row-fluid d-none">
                            <!--begin::Form-->
                            <form id="kt_signin_change_email" class="form" novalidate="novalidate">
                                <div class="row mb-6">
                                    <div class="col-lg-6 mb-4 mb-lg-0">
                                        <div class="fv-row mb-0">
                                            <label for="emailaddress"
                                                class="form-label fs-6 fw-bold mb-3">@lang('pages.enter_email')</label>
                                            <input type="email" class="form-control form-control-lg form-control-solid"
                                                id="useremailaddress" placeholder="Email Address" name="emailaddress" />
                                            <span class="error_email text-danger">
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="fv-row mb-0">
                                            <label for="confirmemailpassword"
                                                class="form-label fs-6 fw-bold mb-3">@lang('pages.password_confirmation')</label>
                                            <input type="password"
                                                class="form-control form-control-lg form-control-solid"
                                                name="confirmemailpassword" id="confirmemailpassword" />
                                            <span class="error_password text-danger">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <button id="" type="button" onclick="updateEmail()"
                                        class="btn btn-primary me-2 px-6">@lang('pages.update_email')</button>
                                    <button id="kt_signin_cancel" type="button"
                                        class="btn btn-color-gray-400 btn-active-light-primary px-6">@lang('pages.cancel')</button>
                                </div>
                            </form>
                            <!--end::Form-->
                        </div>
                        <!--end::Edit-->
                        <!--begin::Action-->
                        <div id="kt_signin_email_button" class="ms-auto">
                            <button class="btn btn-light btn-active-light-primary">@lang('pages.change_email')</button>
                        </div>
                        <!--end::Action-->
                    </div>
                    <!--end::Email Address-->
                    <!--begin::Separator-->
                    <div class="separator separator-dashed my-6"></div>
                    <!--end::Separator-->
                    <!--begin::Password-->
                    <div class="d-flex flex-wrap align-items-center mb-10">
                        <!--begin::Label-->
                        <div id="kt_signin_password">
                            <div class="fs-6 fw-bold mb-1">@lang('pages.password')</div>
                            <div class="fw-semibold text-gray-600">************</div>
                        </div>
                        <!--end::Label-->
                        <!--begin::Edit-->
                        <div id="kt_signin_password_edit" class="flex-row-fluid d-none">
                            <!--begin::Form-->
                            <form id="kt_signin_change_password" class="form" novalidate="novalidate">
                                <div class="row mb-1">
                                    <div class="col-lg-4">
                                        <div class="fv-row mb-0">
                                            <label for="currentpassword"
                                                class="form-label fs-6 fw-bold mb-3">@lang('pages.current_password')</label>
                                            <input type="password"
                                                class="form-control form-control-lg form-control-solid"
                                                name="currentpassword" id="currentpassword" />
                                            <span class="error_current_password text-danger">
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="fv-row mb-0">
                                            <label for="newpassword"
                                                class="form-label fs-6 fw-bold mb-3">@lang('pages.new_password')</label>
                                            <input type="password"
                                                class="form-control form-control-lg form-control-solid"
                                                name="newpassword" id="newpassword" />
                                            <span class="error_password text-danger">
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="fv-row mb-0">
                                            <label for="confirmpassword"
                                                class="form-label fs-6 fw-bold mb-3">@lang('pages.confirm_new_password')</label>
                                            <input type="password"
                                                class="form-control form-control-lg form-control-solid"
                                                name="confirmpassword" id="confirmpassword" />
                                            <span class="error_password_confirmation text-danger">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-text mb-5">
                                </div>
                                <div class="d-flex">
                                    <button type="button" onclick="updatePassword()"
                                        class="btn btn-primary me-2 px-6">@lang('pages.update_password')</button>
                                    <button id="kt_password_cancel" type="button"
                                        class="btn btn-color-gray-400 btn-active-light-primary px-6">@lang('pages.cancel')</button>
                                </div>
                            </form>
                            <!--end::Form-->
                        </div>
                        <!--end::Edit-->
                        <!--begin::Action-->
                        <div id="kt_signin_password_button" class="ms-auto">
                            <button class="btn btn-light btn-active-light-primary">
                                @lang('pages.reset_password')</button>
                        </div>
                        <!--end::Action-->
                    </div>
                    <!--end::Password-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Sign-in Method-->
        <!--begin::Connected Accounts-->
        {{-- <div class="card mb-5 mb-xl-10">
            <!--begin::Card header-->
            <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                data-bs-target="#kt_account_connected_accounts" aria-expanded="true"
                aria-controls="kt_account_connected_accounts">
                <div class="card-title m-0">
                    <h3 class="fw-bold m-0">Connected Accounts</h3>
                </div>
            </div>
            <!--end::Card header-->
            <!--begin::Content-->
            <div id="kt_account_settings_connected_accounts" class="collapse show">
                <!--begin::Card body-->
                <div class="card-body border-top p-9">
                    <!--begin::Notice-->
                    <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed mb-9 p-6">
                        <!--begin::Icon-->
                        <!--begin::Svg Icon | path: icons/duotune/art/art006.svg-->
                        <span class="svg-icon svg-icon-2tx svg-icon-primary me-4">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.3"
                                    d="M22 19V17C22 16.4 21.6 16 21 16H8V3C8 2.4 7.6 2 7 2H5C4.4 2 4 2.4 4 3V19C4 19.6 4.4 20 5 20H21C21.6 20 22 19.6 22 19Z"
                                    fill="currentColor" />
                                <path
                                    d="M20 5V21C20 21.6 19.6 22 19 22H17C16.4 22 16 21.6 16 21V8H8V4H19C19.6 4 20 4.4 20 5ZM3 8H4V4H3C2.4 4 2 4.4 2 5V7C2 7.6 2.4 8 3 8Z"
                                    fill="currentColor" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <!--end::Icon-->
                        <!--begin::Wrapper-->
                        <div class="d-flex flex-stack flex-grow-1">
                            <!--begin::Content-->
                            <div class="fw-semibold">
                                <div class="fs-6 text-gray-700">Two-factor authentication adds an extra layer of
                                    security to
                                    your account. To log in, in you'll need to provide a 4 digit amazing code.
                                    <a href="#" class="fw-bold">Learn More</a>
                                </div>
                            </div>
                            <!--end::Content-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Notice-->
                    <!--begin::Items-->
                    <div class="py-2">
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <div class="d-flex">
                                <img src="{{asset('assets/media/svg/brand-logos/google-icon.svg')}}" class="w-30px me-6"
                                    alt="" />
                                <div class="d-flex flex-column">
                                    <a href="#" class="fs-5 text-dark text-hover-primary fw-bold">Google</a>
                                    <div class="fs-6 fw-semibold text-gray-400">Plan properly your workflow</div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <div class="form-check form-check-solid form-check-custom form-switch">
                                    <input class="form-check-input w-45px h-30px" type="checkbox" id="googleswitch"
                                        checked="checked" />
                                    <label class="form-check-label" for="googleswitch"></label>
                                </div>
                            </div>
                        </div>
                        <!--end::Item-->
                        <div class="separator separator-dashed my-5"></div>
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <div class="d-flex">
                                <img src="{{asset('assets/media/svg/brand-logos/github.svg')}}" class="w-30px me-6"
                                    alt="" />
                                <div class="d-flex flex-column">
                                    <a href="#" class="fs-5 text-dark text-hover-primary fw-bold">Github</a>
                                    <div class="fs-6 fw-semibold text-gray-400">Keep eye on on your Repositories</div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <div class="form-check form-check-solid form-check-custom form-switch">
                                    <input class="form-check-input w-45px h-30px" type="checkbox" id="githubswitch"
                                        checked="checked" />
                                    <label class="form-check-label" for="githubswitch"></label>
                                </div>
                            </div>
                        </div>
                        <!--end::Item-->
                        <div class="separator separator-dashed my-5"></div>
                        <!--begin::Item-->
                        <div class="d-flex flex-stack">
                            <div class="d-flex">
                                <img src="{{asset('assets/media/svg/brand-logos/slack-icon.svg')}}" class="w-30px me-6"
                                    alt="" />
                                <div class="d-flex flex-column">
                                    <a href="#" class="fs-5 text-dark text-hover-primary fw-bold">Slack</a>
                                    <div class="fs-6 fw-semibold text-gray-400">Integrate Projects Discussions</div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <div class="form-check form-check-solid form-check-custom form-switch">
                                    <input class="form-check-input w-45px h-30px" type="checkbox" id="slackswitch" />
                                    <label class="form-check-label" for="slackswitch"></label>
                                </div>
                            </div>
                        </div>
                        <!--end::Item-->
                    </div>
                    <!--end::Items-->
                </div>
                <!--end::Card body-->
                <!--begin::Card footer-->
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <button class="btn btn-light btn-active-light-primary me-2">Discard</button>
                    <button class="btn btn-primary">Save Changes</button>
                </div>
                <!--end::Card footer-->
            </div>
            <!--end::Content-->
        </div> --}}
        <!--end::Connected Accounts-->
        <!--begin::Notifications-->
        {{-- <div class="card mb-5 mb-xl-10">
            <!--begin::Card header-->
            <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                data-bs-target="#kt_account_email_preferences" aria-expanded="true"
                aria-controls="kt_account_email_preferences">
                <div class="card-title m-0">
                    <h3 class="fw-bold m-0">Email Preferences</h3>
                </div>
            </div>
            <!--begin::Card header-->
            <!--begin::Content-->
            <div id="kt_account_settings_email_preferences" class="collapse show">
                <!--begin::Form-->
                <form class="form">
                    <!--begin::Card body-->
                    <div class="card-body border-top px-9 py-9">
                        <!--begin::Option-->
                        <label class="form-check form-check-custom form-check-solid align-items-start">
                            <!--begin::Input-->
                            <input class="form-check-input me-3" type="checkbox" name="email-preferences[]" value="1" />
                            <!--end::Input-->
                            <!--begin::Label-->
                            <span class="form-check-label d-flex flex-column align-items-start">
                                <span class="fw-bold fs-5 mb-0">Successful Payments</span>
                                <span class="text-muted fs-6">Receive a notification for every successful
                                    payment.</span>
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <div class="separator separator-dashed my-6"></div>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <label class="form-check form-check-custom form-check-solid align-items-start">
                            <!--begin::Input-->
                            <input class="form-check-input me-3" type="checkbox" name="email-preferences[]"
                                checked="checked" value="1" />
                            <!--end::Input-->
                            <!--begin::Label-->
                            <span class="form-check-label d-flex flex-column align-items-start">
                                <span class="fw-bold fs-5 mb-0">Payouts</span>
                                <span class="text-muted fs-6">Receive a notification for every initiated payout.</span>
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <div class="separator separator-dashed my-6"></div>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <label class="form-check form-check-custom form-check-solid align-items-start">
                            <!--begin::Input-->
                            <input class="form-check-input me-3" type="checkbox" name="email-preferences[]" value="1" />
                            <!--end::Input-->
                            <!--begin::Label-->
                            <span class="form-check-label d-flex flex-column align-items-start">
                                <span class="fw-bold fs-5 mb-0">Fee Collection</span>
                                <span class="text-muted fs-6">Receive a notification each time you collect a fee from
                                    sales</span>
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <div class="separator separator-dashed my-6"></div>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <label class="form-check form-check-custom form-check-solid align-items-start">
                            <!--begin::Input-->
                            <input class="form-check-input me-3" type="checkbox" name="email-preferences[]"
                                checked="checked" value="1" />
                            <!--end::Input-->
                            <!--begin::Label-->
                            <span class="form-check-label d-flex flex-column align-items-start">
                                <span class="fw-bold fs-5 mb-0">Customer Payment Dispute</span>
                                <span class="text-muted fs-6">Receive a notification if a payment is disputed by a
                                    customer
                                    and for dispute purposes.</span>
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <div class="separator separator-dashed my-6"></div>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <label class="form-check form-check-custom form-check-solid align-items-start">
                            <!--begin::Input-->
                            <input class="form-check-input me-3" type="checkbox" name="email-preferences[]" value="1" />
                            <!--end::Input-->
                            <!--begin::Label-->
                            <span class="form-check-label d-flex flex-column align-items-start">
                                <span class="fw-bold fs-5 mb-0">Refund Alerts</span>
                                <span class="text-muted fs-6">Receive a notification if a payment is stated as risk by
                                    the
                                    Finance Department.</span>
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <div class="separator separator-dashed my-6"></div>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <label class="form-check form-check-custom form-check-solid align-items-start">
                            <!--begin::Input-->
                            <input class="form-check-input me-3" type="checkbox" name="email-preferences[]"
                                checked="checked" value="1" />
                            <!--end::Input-->
                            <!--begin::Label-->
                            <span class="form-check-label d-flex flex-column align-items-start">
                                <span class="fw-bold fs-5 mb-0">Invoice Payments</span>
                                <span class="text-muted fs-6">Receive a notification if a customer sends an incorrect
                                    amount
                                    to pay their invoice.</span>
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <div class="separator separator-dashed my-6"></div>
                        <!--end::Option-->
                        <!--begin::Option-->
                        <label class="form-check form-check-custom form-check-solid align-items-start">
                            <!--begin::Input-->
                            <input class="form-check-input me-3" type="checkbox" name="email-preferences[]" value="1" />
                            <!--end::Input-->
                            <!--begin::Label-->
                            <span class="form-check-label d-flex flex-column align-items-start">
                                <span class="fw-bold fs-5 mb-0">Webhook API Endpoints</span>
                                <span class="text-muted fs-6">Receive notifications for consistently failing webhook API
                                    endpoints.</span>
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Option-->
                    </div>
                    <!--end::Card body-->
                    <!--begin::Card footer-->
                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                        <button class="btn btn-light btn-active-light-primary me-2">Discard</button>
                        <button class="btn btn-primary px-6">Save Changes</button>
                    </div>
                    <!--end::Card footer-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content-->
        </div> --}}
        <!--end::Notifications-->
        <!--begin::Notifications-->
        {{-- <div class="card mb-5 mb-xl-10">
            <!--begin::Card header-->
            <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                data-bs-target="#kt_account_notifications" aria-expanded="true"
                aria-controls="kt_account_notifications">
                <div class="card-title m-0">
                    <h3 class="fw-bold m-0">Notifications</h3>
                </div>
            </div>
            <!--begin::Card header-->
            <!--begin::Content-->
            <div id="kt_account_settings_notifications" class="collapse show">
                <!--begin::Form-->
                <form class="form">
                    <!--begin::Card body-->
                    <div class="card-body border-top px-9 pt-3 pb-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table table-row-dashed border-gray-300 align-middle gy-6">
                                <tbody class="fs-6 fw-semibold">
                                    <!--begin::Table row-->
                                    <tr>
                                        <td class="min-w-250px fs-4 fw-bold">Notifications</td>
                                        <td class="w-125px">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="kt_settings_notification_email" checked="checked"
                                                    data-kt-check="true"
                                                    data-kt-check-target="[data-kt-settings-notification=email]" />
                                                <label class="form-check-label ps-2"
                                                    for="kt_settings_notification_email">Email</label>
                                            </div>
                                        </td>
                                        <td class="w-125px">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="kt_settings_notification_phone" checked="checked"
                                                    data-kt-check="true"
                                                    data-kt-check-target="[data-kt-settings-notification=phone]" />
                                                <label class="form-check-label ps-2"
                                                    for="kt_settings_notification_phone">Phone</label>
                                            </div>
                                        </td>
                                    </tr>
                                    <!--begin::Table row-->
                                    <!--begin::Table row-->
                                    <tr>
                                        <td>Billing Updates</td>
                                        <td>
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="1" id="billing1"
                                                    checked="checked" data-kt-settings-notification="email" />
                                                <label class="form-check-label ps-2" for="billing1"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="billing2"
                                                    checked="checked" data-kt-settings-notification="phone" />
                                                <label class="form-check-label ps-2" for="billing2"></label>
                                            </div>
                                        </td>
                                    </tr>
                                    <!--begin::Table row-->
                                    <!--begin::Table row-->
                                    <tr>
                                        <td>New Team Members</td>
                                        <td>
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="team1"
                                                    checked="checked" data-kt-settings-notification="email" />
                                                <label class="form-check-label ps-2" for="team1"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="team2"
                                                    data-kt-settings-notification="phone" />
                                                <label class="form-check-label ps-2" for="team2"></label>
                                            </div>
                                        </td>
                                    </tr>
                                    <!--begin::Table row-->
                                    <!--begin::Table row-->
                                    <tr>
                                        <td>Completed Projects</td>
                                        <td>
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="project1"
                                                    data-kt-settings-notification="email" />
                                                <label class="form-check-label ps-2" for="project1"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="project2"
                                                    checked="checked" data-kt-settings-notification="phone" />
                                                <label class="form-check-label ps-2" for="project2"></label>
                                            </div>
                                        </td>
                                    </tr>
                                    <!--begin::Table row-->
                                    <!--begin::Table row-->
                                    <tr>
                                        <td class="border-bottom-0">Newsletters</td>
                                        <td class="border-bottom-0">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="newsletter1" data-kt-settings-notification="email" />
                                                <label class="form-check-label ps-2" for="newsletter1"></label>
                                            </div>
                                        </td>
                                        <td class="border-bottom-0">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="newsletter2" data-kt-settings-notification="phone" />
                                                <label class="form-check-label ps-2" for="newsletter2"></label>
                                            </div>
                                        </td>
                                    </tr>
                                    <!--begin::Table row-->
                                </tbody>
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                    <!--begin::Card footer-->
                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                        <button class="btn btn-light btn-active-light-primary me-2">Discard</button>
                        <button class="btn btn-primary px-6">Save Changes</button>
                    </div>
                    <!--end::Card footer-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content-->
        </div> --}}
        <!--end::Notifications-->
        <!--begin::Deactivate Account-->
        {{-- <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse"
                data-bs-target="#kt_account_deactivate" aria-expanded="true" aria-controls="kt_account_deactivate">
                <div class="card-title m-0">
                    <h3 class="fw-bold m-0">Deactivate Account</h3>
                </div>
            </div>
            <!--end::Card header-->
            <!--begin::Content-->
            <div id="kt_account_settings_deactivate" class="collapse show">
                <!--begin::Form-->
                <form id="kt_account_deactivate_form" class="form">
                    <!--begin::Card body-->
                    <div class="card-body border-top p-9">
                        <!--begin::Notice-->
                        <div
                            class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6">
                            <!--begin::Icon-->
                            <!--begin::Svg Icon | path: icons/duotune/general/gen044.svg-->
                            <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10"
                                        fill="currentColor" />
                                    <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)"
                                        fill="currentColor" />
                                    <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)"
                                        fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            <!--end::Icon-->
                            <!--begin::Wrapper-->
                            <div class="d-flex flex-stack flex-grow-1">
                                <!--begin::Content-->
                                <div class="fw-semibold">
                                    <h4 class="text-gray-900 fw-bold">You Are Deactivating Your Account</h4>
                                    <div class="fs-6 text-gray-700">For extra security, this requires you to confirm
                                        your
                                        email or phone number when you reset yousignr password.
                                        <br />
                                        <a class="fw-bold" href="#">Learn more</a>
                                    </div>
                                </div>
                                <!--end::Content-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Notice-->
                        <!--begin::Form input row-->
                        <div class="form-check form-check-solid fv-row">
                            <input name="deactivate" class="form-check-input" type="checkbox" value=""
                                id="deactivate" />
                            <label class="form-check-label fw-semibold ps-2 fs-6" for="deactivate">I confirm my account
                                deactivation</label>
                        </div>
                        <!--end::Form input row-->
                    </div>
                    <!--end::Card body-->
                    <!--begin::Card footer-->
                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                        <button id="kt_account_deactivate_account_submit" type="submit"
                            class="btn btn-danger fw-semibold">Deactivate Account</button>
                    </div>
                    <!--end::Card footer-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content-->
        </div> --}}
        <!--end::Deactivate Account-->
    </div>
    <!--end::Content container-->
</div>
@endsection

@section('js')
<script src="{{asset('assets/js/custom/account/settings/signin-methods.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script>
    const slug = @json($user->id);
    const currentRouteName = "{{ Route::currentRouteName() }}";
    const validation_error ="{{__('validation.validation_error')}}";
	const email_changes = "{{__('pages.email_changes')}}";
	const password_changes = "{{__('pages.password_changes')}}";
	const password_not_correct = "{{__('pages.password_not_correct')}}";
	const done = "{{__('pages.done')}}";
</script>
<script src="{{asset('assets/js/profile.js')}}"></script>

@endsection