@extends('layouts.master')
@section('style')
    <style>
        .form-switch.form-check-solid .form-check-input:not(:checked) {
            background-color: #818181 !important;
        }
        .switch {

position: relative;

display: block;

vertical-align: top;

width: 85px;

height: 20px;

/* padding: 3px; */

margin: 0 10px 10px 20px;

background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);

background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);

border-radius: 18px;

box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);

cursor: pointer;

box-sizing: content-box;

}



.switch-input {

position: absolute;

top: 0;

left: 0;

opacity: 0;

box-sizing: content-box;

}



.switch-label {

width: 110px;

position: relative;

display: block;

height: 28px;

font-size: 14px;

text-transform: uppercase;

background: red;

border-radius: inherit;

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);

box-sizing: content-box;

}



.switch-label:before,

.switch-label:after {

position: absolute;

top: 50%;

margin-top: -.5em;

line-height: 1;

-webkit-transition: inherit;

-moz-transition: inherit;

-o-transition: inherit;

transition: inherit;

box-sizing: content-box;

}



.switch-label:before {

content: attr(data-off);

right: 11px;

color: #FFFFFF;

text-shadow: 0 1px rgba(255, 255, 255, 0.5);

}



.switch-label:after {

content: attr(data-on);

left: 11px;

color: #FFFFFF;

text-shadow: 0 1px rgba(0, 0, 0, 0.2);

opacity: 0;

}



.switch-input:checked~.switch-label {

background: green;

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);

}



.switch-input:checked~.switch-label:before {

opacity: 0;

}



.switch-input:checked~.switch-label:after {

opacity: 1;

}



.switch-handle {

position: absolute;

top: 2px;

right: 60px;

width: 24px;

height: 24px;

background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);

background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);

border-radius: 100%;

box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

}



.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}



.switch-input:checked~.switch-handle {
left: 84px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}



.switch-label,
.switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
    </style>
@endsection()
@section('content')
@php
        $getAuthUserTypeId = getAuthUserTypeId();
    @endphp
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-wrap flex-stack pb-7">
                <div class="d-flex flex-wrap align-items-center my-1">
                    <h3 class="fw-bold me-5 my-1">My Profile
                    </h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x border-transparent fs-4 fw-semibold">
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5 active"
                                data-bs-toggle="tab" href="#kt_ecommerce_carrier_info">
                                <i class="ki-outline ki-user fs-2x me-2"></i>Carrier Info</a>
                        </li>
                        @if (permission('manage_myProfileTab'))
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_rate_info" id="real_time_efs_data_tab">
                                <i class='ki-outline ki-abstract-23 fs-2x me-2'></i>Rate Info</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_payment_details" id="efs_rejected_transactions_tab">
                                <i class='ki-outline ki-credit-cart fs-2x me-2'></i>Payment Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_settings">
                                <i class='ki-outline ki-notification-on fs-2x me-2'></i>Alerts</a>
                        </li>
                        @endif
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_change_password" id="kt_ecommerce_change_password_tab">
                                <i class='ki-outline ki-lock-2 fs-2x me-2'></i>Change Password</a>
                        </li>
                        @if (permission('manage_myProfileTab'))
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_logo" id="kt_ecommerce_logo_tab">
                                <i class="fs-2x me-2 fa-solid fa-image"></i>Logo</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_user_details" id="user_tab">
                                <i class='ki-outline ki-credit-cart fs-2x me-2'></i>User Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_bill_profile" id="bill_tab">
                                <i class='ki-outline ki-credit-cart fs-2x me-2'></i>Bill Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_branch" id="branch_tab">
                                <i class='ki-outline ki-credit-cart fs-2x me-2'></i>Branches</a>
                        </li>
                        @endif
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_ecommerce_carrier_info" role="tabpanel">
                            <div class="card-body">
                                <div class="w-100">
                                    <div class="">
                                        <h2 class="fw-bold text-gray-900">Carrier Info</h2>
                                    </div>
                                    <div class="card-body p-9">
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Active</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span
                                                        class="fs-20">{{ $carrierInfo->ACTIVE == 1 ? 'ACTIVE' : 'INACTIVE' }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Name</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->NAME }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Policy
                                                #</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->POLICY_NUM }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">DOT #</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->DOT }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">MC #</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->MC }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label
                                                class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">CONTACT</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->CONTACT_NAME }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">CONTACT
                                                TITLE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->CONTACT_TITLE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">PHONE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->PHONE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">EMAIL</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->EMAIL }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">ATL
                                                EMAIL</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->ALT_EMAIL }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">#
                                                TRUCKS</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->NUM_TRUCKS }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label
                                                class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">ADDRESS</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->BILL_TO }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label
                                                class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">CONTRACT ID</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->CONTRACT_ID }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="kt_ecommerce_rate_info" role="tabpanel">
                            <div class="card-body">
                                <div class="w-100">
                                    <div class="">
                                        <h2 class="fw-bold text-gray-900">Rate Info</h2>
                                    </div>
                                    <div class="card-body p-9">
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">CREDIT OR
                                                CARD LIMITS</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span class="fs-20">{{ $carrierInfo->SUB_STATUS }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">AUTOMATED
                                                WEEKLY EMAILS</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->EMAIL_REPORTS }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">AMBEST
                                                RATE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->AMB_RATE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">SAPP BROS
                                                RATE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->SAPP_RATE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">LOVES
                                                RATE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->LOVES_RATE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Pilot/Flying
                                                J RATE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->PILOT_RATE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">TA
                                                RATE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->TA_RATE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">ROAD RANGER
                                                RATE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->RR_RATE }}</span>
                                                </div>
                                            </div>
                                        </div>

                                    <form class="form" action="{{ route('myProfile.charge_fee') }}" method="POST">
                                        @csrf
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">CHARGE QUICK FEE</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <input type="hidden" name="quick_fee" value="0">
                                                    
                                                    <input type="checkbox" 
                                                           name="quick_fee" 
                                                           id="quick_fee" 
                                                           value="1" 
                                                           {{ isset($carrierInfo->quick_fee) && $carrierInfo->quick_fee == 1 ? 'checked' : '' }}>

                                                    <input type="text" 
                                                           name="quick_fee_percentage" 
                                                           id="quick_fee_percentage" 
                                                           value="{{ $carrierInfo->quick_fee_percentage ?? '' }}" 
                                                           class="form-control" 
                                                           style="{{ isset($carrierInfo->quick_fee) && $carrierInfo->quick_fee == 1 ? 'display: block;' : 'display: none;' }}; margin-left: 5px; width: 100px;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-10 offset-md-3">
                                            <div class="d-flex">
                                                <button type="submit" data-kt-ecommerce-settings-type="submit" class="btn btn-primary" id="submit" onclick="showSpinner();">
                                                    <span class="indicator-label">Save</span>
                                                </button>
                                            </div>
                                        </div>
                                    </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="kt_ecommerce_payment_details" role="tabpanel">
                            <div class="card-body">
                                <div class="w-100">
                                    <div class="">
                                        <h2 class="fw-bold text-gray-900">Payment Details</h2>
                                    </div>
                                    <div class="card-body p-9">
                                        <div class="row mb-6">
                                            <label
                                                class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Services</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span class="fs-20">{{ $carrierInfo->EXPERIAN }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Pay
                                                Days</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->PAYMENT_TERMS }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Bank Account
                                                #</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->ACH_ACC }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Bank Routing
                                                #</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->ACH_ROUTE }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-6">
                                            <label class="col-lg-4 col-form-label fw-bold text-gray-900 fs-6">Stripe ID
                                                #</label>
                                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                                <div class="d-flex align-items-center mt-3">
                                                    <span>{{ $carrierInfo->INTERNAL_ASSIGNED }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="kt_ecommerce_settings" role="tabpanel">
                            <div class="card-body">
                                <div class="m-0" style="border-radius: 10px;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for=""
                                                class="col-lg-6 col-form-label fw-bold text-gray-900 fs-3">Low Balance
                                                Alert : {{ '$ ' . number_format($carrierInfo->low_balance_alert, 2) }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="kt_ecommerce_change_password" role="tabpanel">
                            <div class="card-body">
                                <div class="row mt-10 mb-5">
                                    <div class="col-md-4">
                                        <div class="d-flex justify-content-center">
                                            <label
                                                class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack mb-5">
                                                <span class="form-check-label ms-0 fw-bold fs-6 text-gray-900 me-5">
                                                    Enable Two Factor Authentication :
                                                </span>
                                                <input class="form-check-input" onclick="updatetwofactorAuth()"
                                                    id="two_factor" type="checkbox"
                                                    {{ Auth::user()->{'2FA'} == 1 ? 'checked' : '' }}>
                                            </label>
                                        </div>
                                    </div>

                                </div>
                                <form id="kt_ecommerce_settings_edit_form" class="form"
                                    action="{{ route('myProfile.change_password') }}" method="POST">
                                    @csrf
                                    <div class="row fv-row mb-7">
                                        <div class="col-md-3 text-md-end">
                                            <label class="fs-6 fw-bold form-label mt-3">
                                                Old Password
                                            </label>
                                        </div>
                                        <div class="col-md-9 mt-3 fs-6">
                                            {{ Auth::user()->password }}
                                        </div>
                                    </div>
                                    <div class="row fv-row mb-7">
                                        <div class="col-md-3 text-md-end">
                                            <label class="fs-6 fw-bold form-label mt-3">
                                                <span class="required">New Password</span>
                                            </label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="password" name="password"
                                                class="form-control form-control-solid" placeholder="New Password">
                                            @error('password')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row fv-row mb-7">
                                        <div class="col-md-3 text-md-end">
                                            <label class="fs-6 fw-bold form-label mt-3">
                                                <span class="required">Confirm Password</span>
                                            </label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="password" name="confirm_password"
                                                class="form-control form-control-solid" placeholder="Confirm Password">
                                            @error('confirm_password')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row py-5">
                                        <div class="col-md-9 offset-md-3">
                                            <div class="d-flex">
                                                <button type="submit" data-kt-ecommerce-settings-type="submit"
                                                    class="btn btn-primary" id="submit" onclick="showSpinner();">
                                                    <span class="indicator-label">Save</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>


                         <div class="tab-pane fade" id="kt_ecommerce_logo" role="tabpanel">
                            <div class="card-body">
                                
                                <form id="kt_ecommerce_settings_edit_form" class="form"
                                    action="{{ route('myProfile.upload_logo') }}" method="POST"   enctype="multipart/form-data">
                                    @csrf
                                   
                                   <div class="w-100">
                                                <div class="">
                                                    <h2 class="fw-bold text-gray-900">Company Logo</h2>
                                                </div>
                                                <hr>
                                                <div class="row mb-6">
                                                <label class="col-lg-4 col-form-label fw-semibold fs-6"> Company Photo
                                                </label>
                                                <div class="col-lg-6">
                                                    <div class="image-input image-input-outline"
                                                        data-kt-image-input="true">
                                                        <div class="image-input-wrapper w-125px h-125px"
                                                            style="background-image: url({{ !empty($carrierInfo->logo) ? asset('logo/' . rawurlencode($carrierInfo->logo)) : asset('assets/media/svg/avatars/blank.svg') }})">
                                                        </div>
                                                        <label
                                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                            data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                            aria-label="Change avatar"
                                                            data-bs-original-title="Change avatar"
                                                            data-kt-initialized="1">
                                                            <i class="ki-outline ki-pencil fs-7"></i>
                                                            <input type="file" name="logo" id="logo"
                                                                accept=".png, .jpg, .jpeg">
                                                            <input class="form-control" type="hidden" name="OLD_PHOTOS"
                                                                value="{{ $carrierInfo->logo }}">
                                                        </label>
                                                    </div>
                                                    <div class="form-text">Allowed file types: png, jpg, jpeg.
                                                    </div>
                                                    @error('logo')
                                                    <p class="text-danger">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                            </div>
                                            </div>
                                            <div class="row py-5">
                                        <div class="col-md-10 offset-md-3">
                                            <div class="d-flex">
                                                <button type="submit" data-kt-ecommerce-settings-type="submit"
                                                    class="btn btn-primary" id="submit" onclick="showSpinner();">
                                                    <span class="indicator-label">Save</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="kt_user_details" role="tabpanel">
                            <div class="row">
                                <div class="col-md-3">
                                <form action="#" id="search_form">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="position-relative">
                                                <i
                                                    class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                                <input type="text" class="form-control form-control-solid ps-10" name="search1"
                                                    value="" id="search1" placeholder="Search">
                                            </div>                                          
                                       
                                            <div class="separator separator-dashed my-8"></div>
                                                <div class="mt-5">
                                                    <label class="fs-6 form-label fw-bold text-gray-900">Status</label>
                                                    <select class="form-select form-control form-control-solid" name="STATUS"
                                                        id="STATUS" data-control="select2" data-hide-search="true">
                                                        <option value="" @if(request('status') == " ") selected @endif>All</option>
                                                        <option value="1" @if(request('status') == "Open") selected @endif>ACTIVE</option>
                                                        <option value="0" @if(request('status') == "Closed") selected @endif>INACTIVE</option>
                                                        
                                                    </select>
                                             </div>                                      
                                        </div>
                                        <div class="d-flex mb-5" style="margin: 0 auto; !important">
                                            <button type="button" id="submit1" class="btn btn-primary me-5" >Search</button>
                                            <button type="button" id="clear1" class="btn btn-primary me-5">Clear</button>
                                        </div>
                                    </div>
                                 </form>
                                </div>
                                <div class="col-md-9">
                                     <div class="card-body p-0">
                                        <div class="w-100">
                                            <div class="">
                                                <h2 class="fw-bold text-gray-900">User Details</h2>
                                            </div>
                                        
                                            <div class="card-body p-0">
                                               
                                                <!-- <button type="button" class="btn btn-dark btn-sm"
                                                                        data-bs-toggle="modal"
                                                                            data-bs-target="#userModal" onclick="addusers()" id="addaccident">Add User
                                                                        </button> -->
                                                <a href="{{route('myProfile.add')}}" class="btn btn-success btn-sm">Add User</a>
                                            
                                         
                                                <div class="table-responsive p-5 ps-0">
                                                        {!! $dataTable->table() !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           
                        </div>
                        <div class="tab-pane fade" id="kt_bill_profile" role="tabpanel">
                            <div class="row">
                                <div class="col-md-3">
                                <form action="#" id="filterForm2">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="position-relative">
                                                <i
                                                    class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                                <input type="text" class="form-control form-control-solid ps-10" name="search2"
                                                    value="" id="search2" placeholder="Search">
                                            </div>  
                                            
                                            <div class="mt-5">
                                                <label class="fs-6 form-label fw-bold text-gray-900">MC NUM</label>
                                                <input type="text" name="mc_num" id="mc_num" class="form-control form-control-solid">
                                            </div>
                                            <div class="mt-5">
                                                <label class="fs-6 form-label fw-bold text-gray-900">DOT NUM</label>
                                                <input type="text" name="dot_num" id="dot_num" class="form-control form-control-solid">
                                            </div>                                       
                                                                               
                                        </div>
                                        <div class="d-flex mb-5" style="margin: 0 auto; !important">
                                            <button type="button" id="submit2" class="btn btn-primary me-5" >Search</button>
                                            <button type="button" id="clear2" class="btn btn-primary me-5">Clear</button>
                                        </div>
                                    </div>
                                 </form>
                                </div>
                                <div class="col-md-9">
                                     <div class="card-body p-0">
                                        <div class="w-100">
                                            <div class="">
                                                <h2 class="fw-bold text-gray-900">Bill Profile</h2>
                                            </div>
                                        
                                            <div class="card-body p-0">
                                           
                                                <!-- <button type="button" class="btn btn-dark btn-sm"
                                                                        data-bs-toggle="modal"
                                                                            data-bs-target="#userModal" onclick="addusers()" id="addaccident">Add User
                                                                        </button> -->
                                                <a href="{{route('assets.bill_profiles.add')}}" class="btn btn-success btn-sm">Add Bill Profile</a>
                                          
                                                <div class="table-responsive p-5 ps-0">
                                                        <table id="billProfileList"
                                                            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
                                                            <thead>
                                                                <tr class="thead-bg-color">
                                                                
                                                                    <th class="fs-7 text-gray-500 text-uppercase">NAME
                                                                    </th>
                                                                    <th class="fs-7 text-gray-500 text-uppercase">MC NUM
                                                                    </th>
                                                                    <th class="fs-7 text-gray-500 text-uppercase">DOT #</th>
                                                                    <th class="fs-7 text-gray-500 text-uppercase">START INVOICE #</th>
                                                                    <th class="fs-7 text-gray-500 text-uppercase">ACTION
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                        </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           
                        </div>
                        <div class="tab-pane fade" id="kt_branch" role="tabpanel">
                            <div class="row">
                                <div class="col-md-3">
                                <form action="#" id="filterForm3">
                                    <div class="card">
                                    <div class="card-body">
                                    <div class="position-relative">
                                        <i
                                            class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                        <input type="text" class="form-control form-control-solid ps-10" name="search"
                                            value="" id="search3" placeholder="Search">
                                    </div>
                                    <div class="separator separator-dashed my-8"></div>
                                    <div class="mb-10">
                                        <label class="fs-4 form-label fw-bold text-gray-900">Date</label>
                                        <div class="d-flex">
                                            <div id="range"
                                                style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                <i class="fa fa-calendar"></i>&nbsp;
                                                <span></span> <i class="fa fa-caret-down"></i>
                                            </div>
                                            <input type="hidden" class="form-control sm" name="start_date" id="start_date">
                                            <input type="hidden" class="form-control sm" name="end_date" id="end_date">
                                        </div>
                                    </div>
                               
                                </div>
                                        <div class="d-flex mb-5" style="margin: 0 auto; !important">
                                            <button type="button" id="submit3" class="btn btn-primary me-5" >Search</button>
                                            <button type="button" id="clear3" class="btn btn-primary me-5">Clear</button>
                                        </div>
                                    </div>
                                 </form>
                                </div>
                                <div class="col-md-9">
                                     <div class="card-body p-0">
                                        <div class="w-100">
                                            <div class="">
                                                <h2 class="fw-bold text-gray-900">Branch</h2>
                                            </div>
                                        
                                            <div class="card-body p-0">
                                           
                                                <!-- <button type="button" class="btn btn-dark btn-sm"
                                                                        data-bs-toggle="modal"
                                                                            data-bs-target="#userModal" onclick="addusers()" id="addaccident">Add User
                                                                        </button> -->
                                                <a href="{{route('assets.branchs.add')}}" class="btn btn-success btn-sm">Add Branch</a>
                                          
                                                <div class="table-responsive p-5 ps-0">
                                                        <table id="branchList"
                                                            class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
                                                            <thead>
                                                                <tr class="thead-bg-color">
                                                                
                                                                    <th class="fs-7 text-gray-500 text-uppercase">TITLE
                                                                    </th>
                                                                    <th class="fs-7 text-gray-500 text-uppercase">CREATED DATE
                                                                    </th>                                                                   
                                                                    <th class="fs-7 text-gray-500 text-uppercase">ACTION
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                        </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="addTruckModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="accidentModalLabel">Add User</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

             
            </div>
        </div>
    </div>
@endsection()
@section('script')
    {!! $dataTable->scripts() !!}
    <script>
        function showSpinner() {
            var submitButton = document.getElementById('submit');
            submitButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>';
        }

        function updatelowbal(id) {
            var lowbalance = $("#low_balance").val();
            $.ajax({
                type: 'GET',
                url: "{{ route('myProfile.updateLowBalance') }}",
                data: {
                    id: id,
                    lowbalance: lowbalance
                },
                success: function(data) {
                    if (data.status == true) {
                        toastr.success(data.message);
                    } else {
                        toastr.error("OOPS! Something went wrong!");
                    }
                },
                error: function(err) {
                    toastr.error(err);
                }
            });
        }

        function updatetwofactorAuth() {
            var twofactor = $('#two_factor').prop('checked') ? 1 : 0;
            var id = "{{ getAuthMemberId() }}";

            $.ajax({
                type: 'GET',
                url: "{{ route('myProfile.update_two_factor_auth') }}",
                data: {
                    id: id,
                    twofactor: twofactor
                },
                success: function(res) {
                    if (res.status == true) {
                        toastr.success(res.message);
                    } else {
                        toastr.error("OOPS! Something went wrong!");
                    }
                },
                error: function(err) {
                    toastr.error(err);
                }
            });
        }

        document.getElementById('quick_fee').addEventListener('change', function() {
            var quickFeeInput = document.getElementById('quick_fee_percentage');
            if (this.checked) {
                quickFeeInput.style.display = 'block';
            } else {
                quickFeeInput.style.display = 'none';
                quickFeeInput.value = '';
            }
        });

        const table = $('#user-table');

        table.on('preXhr.dt', function(e, setting, data) {  
            data.search = $('#search1').val();
            data.status = $('#STATUS').val();
        });

       

        const table3 = $('#branchList');     
        table3.on('preXhr.dt', function(e, setting, data) {
            data.search = $('#search3').val();
            data.start_date = $('#start_date').val();
            data.end_date = $('#end_date').val();        
         
        });
        const table2 = $('#billProfileList'); 
        table2.on('preXhr.dt', function(e, setting, data) {
            data.search = $('#search2').val();            
            data.mc_num = $('#mc_num').val();
            data.dot_num = $('#dot_num').val();           

        });
   

        $('#submit1').on('click', function() {
            table.DataTable().ajax.reload();
            return false;
        });

        $('#submit3').on('click', function() {
            table3.DataTable().ajax.reload();
            return false;
        });

        $('#submit2').on('click', function() {
            table2.DataTable().ajax.reload();
            return false;
        });

        $('#clear1').on('click', function() {
            $('#search').val('');
            table.DataTable().ajax.reload();
        });

      

    

        function statusChange(element,id) {
          
            if (element.checked) {
                newStatus = 1;
            } else {
                newStatus = 0;
            }

            $.ajax({
                type: 'POST',
                url: '{{ route("myProfile.statusChange") }}',
                data: {
                    _token: '{{ csrf_token() }}',
                    user_id: id,
                    status: newStatus
                },
                success: function(response) {
                    if (response.success) {
                        console.log('Task status updated successfully.');
                        // Display success message
                        $('#kt_wrapper').prepend('<h3 id="success-message" style="background-color: rgb(100, 219, 136); color:white; border-radius: 10px; margin: 0 auto; width: 93%;" class="p-5 mb-7"><i class="fa-solid fa-face-smile" style="color: white; font-size: 20px; margin-right: 8px;"></i> </h3>');
                        $('#success-message').text('Task status updated successfully.').show();
                        //
                        // Hide error message if shown
                        $('#error-message').hide();
                        $("#success-message").delay(4000).fadeOut(400, function() {
                            $(this).slideUp(400);
                        });
                        table.DataTable().ajax.reload();
                    } else {
                        console.error('Failed to update task status:', response.message);
                        // Display error message

                        $('#kt_wrapper').prepend('<h3 id="error-message"  style="background-color: rgb(250, 102, 102); color:white; border-radius: 10px; margin: 0 auto; width: 93%;" class="p-5 mb-7"><i class="fa-solid fa-face-surprise" style="color: white; font-size: 20px; margin-right: 8px;"></i> '+response.message+' </h3>');

                        $('#error-message').text('Failed to update task status:', response.message).show();
                        // Hide success message if shown
                        $('#success-message').hide();
                        $("#error-message").delay(4000).fadeOut(400, function() {
                            $(this).slideUp(400);
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    // Display error message
                    $('#error-message').text('Error: ' + error).show();
                    // Hide success message if shown
                    $('#success-message').hide();
                }
            });


        };
      
       

        $(document).ready(function () {
    let table2 = $('#billProfileList').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel', 'print', 'reset', 'reload'
        ],
        processing: true,
        serverSide: true,
        searching: false,
        ajax: {
            url: '{!! route('myProfile.billprofileDatatable') !!}',
            data: function (d) {
                // Attach form data to the DataTable request
                let formData = $('#filterForm2').serializeArray();
                formData.forEach(function (item) {
                    d[item.name] = item.value;
                });
            }
        },
        pageLength: 25,
        order: [
            [0, 'desc']
        ],
        columns: [
            { data: 'NAME', name: 'NAME',width: "30%" },
            { data: 'MC_NUM', name: 'MC_NUM' },
            { data: 'COLOR_NUM', name: 'COLOR_NUM' },
            { data: 'START_CHECK_NO', name: 'START_CHECK_NO' },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                width: "5%"
            }
        ],
        drawCallback: function (settings) {
            // Custom logic after table draw
        },
        initComplete: function (settings, json) {
            $(".dt-buttons").addClass("d-none");
        }
    });

    let table3 = $('#branchList').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel', 'print', 'reset', 'reload'
        ],
        processing: true,
        serverSide: true,
        searching: false,
        ajax: {
            url: '{!! route('myProfile.branchDataTable') !!}',
            data: function (d) {
                // Attach form data to the DataTable request
                let formData3 = $('#filterForm3').serializeArray();
                formData3.forEach(function (item) {
                    d[item.name] = item.value;
                });
            }
        },
        pageLength: 25,
        order: [
            [0, 'desc']
        ],
        columns: [
            { data: 'TITLE', name: 'TITLE',width: "30%" },
            { data: 'CREATED_DATE', name: 'CREATED_DATE' },           
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                width: "8%"
            }
        ],
        drawCallback: function (settings) {
            // Custom logic after table draw
        },
        initComplete: function (settings, json) {
            $(".dt-buttons").addClass("d-none");
        }
    });
    $('#submit2').on('click', function() {          
            table2.ajax.reload();
            return false;
        });

});

$(document).ready(function() {   
    var urlParams = new URLSearchParams(window.location.search)
    var id = urlParams.get('id');   
        if (id == "kt_user_details") {
            $('#user_tab').tab('show');
        } 
        if (id == "kt_bill_profile") {
            $('#bill_tab').tab('show');
        } 
        if (id == "kt_branch") {
            $('#branch_tab').tab('show');
        } 
});

    // Form submission handling



        // $(document).ready(function() {            

        //     $('#addUserForm').submit(function(e) {
        //         e.preventDefault();
        //         var form = document.getElementById('addUserForm');
        //         var formData = new FormData(form);
        //         $.ajax({
        //             url: "{{ route('myProfile.add_user') }}",
        //             method: 'POST',
        //             data: formData,
        //             processData: false,
        //             contentType: false,
        //             success: function(response) {
        //                 if (response.success == true) {
        //                     const loadId = new URLSearchParams(window.location.search).get(
        //                         'loadId');
                            
        //                     toastr.success(response.message);
        //                     $("#userModal").modal("hide");
        //                     $('#customer-table').DataTable().ajax.reload();
        //                 } else if (response.success == false) {
        //                     $("#userModal").modal("hide");
        //                     toastr.error(response.message);
        //                 } else {
        //                     toastr.error('OOPS! Something Went Wrong.');
        //                 }
        //             },
        //             error: function(error) {
        //                 // $('#DueDateError').text(error.responseJSON.errors.TX_DUE);
        //                 // $('#expenseTypeError').text(error.responseJSON.errors.TYPE);
        //                 // $('#amountError').text(error.responseJSON.errors.ORIG_AMT);
        //                 // $('#vendorError').text(error.responseJSON.errors.VENDOR_ID);
        //             }
        //         });
        //     });
        // });

        // function edituser(id) {
        //      $("#accidentModalLabel").text('Edit User');
          
        //     $("#userModal").modal("show");            

        //     $.ajax({
        //         url: "{{ route('myProfile.editUser') }}",
        //         method: 'get',
        //         data: {
        //             id,
        //             id
        //         },
        //         success: function(response) {
        //             $("#name").val(response.name);
        //             $("#email").val(response.email);
        //             $("#username").val(response.username);
        //             $("#password").val(response.password);
        //             $("#commission").val(response.commission);
        //             $("#TWILIO_PHONE").val(response.TWILIO_PHONE);
        //             $("#CELL_PHONE").val(response.CELL_PHONE);
        //             $("#TWILIO_PHONE").val(response.TWILIO_PHONE);
        //             $("#id").val(response.id); 
        //             if (response.dark_mode === 1) {                       
        //                 $('#dark_mode_toggle').prop('checked', true);                     
                       
        //             } else {                                     
        //                 $('#dark_mode_toggle').prop('checked', false);                        
        //             }

                 
        //             if (response.active === 1) {                       
        //                 $('#active_toggle').prop('checked', true);                    
                       
        //             } else {                                     
        //                 $('#active_toggle').prop('checked', false);                        
        //             }

        //             $('#user_type option[value="' + response.user_type + '"]').prop('selected', true);
        //             $('#user_type').trigger('change');
        //             $('#BRANCH option[value="' + response.BRANCH + '"]').prop('selected', true);
        //             $('#BRANCH').trigger('change');            

                  
        //              const profileIds = response.PROFILES.split(','); 
        //              if(profileIds){
        //                     $('input[name="PROFILES[]"]').each(function() {
        //                     const profileValue = $(this).val();
        //                     if (profileIds.includes(profileValue)) {
        //                         $(this).prop('checked', true);
        //                     } else {
        //                         $(this).prop('checked', false);
        //                     }
        //                 });
        //              }                

        //             $("#accident_opration").val('edit'); 
                  

        //         }
        //     });
        // }

        // function addusers() {
        //     $("#accidentModalLabel").text('Add User');                            
        //             $("#accident_opration").val('');  
        //             $("#id").val('');                 

        //             $("#name").val('');
        //             $("#email").val('');
        //             $("#username").val('');
        //             $("#password").val('');
        //             $("#commission").val('');
        //             $("#TWILIO_PHONE").val('');
        //             $("#CELL_PHONE").val('');
        //             $("#TWILIO_PHONE").val('');
        //             $('#dark_mode_toggle').prop('checked', false);
        //             $('#user_type').val('').trigger('change');
        //             $('#BRANCH').val('').trigger('change');
        //             $('input[name="PROFILES[]"]').prop('checked', false);        

           
            
        // }
        $(function() {

var start = moment();
var end = moment();
// var start = moment().subtract(29, 'days');
// var end = moment();

function cb(start, end) {
    $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    $("#start_date").val(start.format('YYYY-MM-DD'));
    $("#end_date").val(end.format('YYYY-MM-DD'));
}

$('#range').daterangepicker({
    defaultDate: '',
    ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
            'month').endOf('month')]
    }
}, cb);

});
    
    </script>
@endsection()