@extends('layouts.master')
@php
$PayType = config('custom.PayType');
$states = config('custom.states');
$driverType = config('custom.driverType');
$bad_zone = config('custom.bad_zone');
asort($bad_zone);

$validate = [];
$activeTab1 = '';
$activeTab2 = '';
$currentTab1 = '';
$currentTab2 = '';
@endphp

@if ($errors->any())
@foreach ($errors->all() as $error)
@php
$validate[] = $error;
@endphp
@endforeach
@endif

@if (
$errors->has('NAME'))
@php
$currentTab1 = 'current';
$activeTab1 = 'active';
@endphp
@elseif (
$errors->has('PHONE') )
@php
$currentTab2 = 'current';
$activeTab2 = 'active';
@endphp
@else
@php
$currentTab1 = 'current';
$activeTab1 = 'active';
@endphp
@endif


@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;
    }
    i.bi, i[class*=" fa-"], i[class*=" fonticon-"], i[class*=" la-"], i[class^=fa-], i[class^=fonticon-], i[class^=la-] { 
     color: inherit;
 }
 .table:not(.table-bordered) td, .table:not(.table-bordered) th, .table:not(.table-bordered) tr {
    font-size: 12px !important;
    font-weight: normal;
}
.card-header{
   border-radius: 10px 16px 0px 1px !important;
    /* border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0 !important; */
    padding: .5rem 1rem !important;
    margin-bottom: 0 !important;
    background-color: #388DC6 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
    min-height: 50px !important;

}
.card-header h2{
    color:#fff !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;

}
</style>
@endsection
@section('content')

<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">Customer <span class="text-muted">Edit</span>
                </h3>
                <h3 class="fw-bold me-5 my-1"></h3>
                <div class="card-body">
                    <div class="float-end">
                        <a href="{{ route('assets.customers.index') }}" class="btn btn-primary btn-sm me-2"><i
                            class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>
                            <a href="{{ route('assets.customers.delete', $customer->CLIENT_ID) }}"
                                onclick="return confirm('Are You Sure You Want to Delete ?')"
                                class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Delete</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="pb-lg-12">
                    <div class="container">
                        <div class="content d-flex flex-column flex-column-fluid">
                            <form action="{{ route('assets.customers.update') }}" method="POST">
                                @csrf
                                <div class="col-lg-12 d-flex flex-column flex-xl-row flex-row-fluid gap-10">
                                    <div class="col-lg-3 card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px">
                                        <div class="card-body px-6 px-lg-10 px-xxl-15">
                                            <ul id="nav-stepper" class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold stepper stepper-pills stepper-column stepper-nav" style="display: block;">
                                                <div class="stepper-item {{ $currentTab1 }}" data-kt-stepper-element="nav">
                                                    <div class="stepper-wrapper">
                                                        <a class="nav-link ms-0 me-10 {{ $activeTab1 }} "
                                                        id="kt_stats_widget_16_tab_link_1" data-bs-toggle="pill"
                                                        href="#kt_stats_widget_16_tab_1" aria-selected="false" role="tab"
                                                        tabindex="-1" onclick="activetab('#kt_stats_widget_16_tab_1')">
                                                        <div class="stepper-icon w-40px h-40px">
                                                            <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                                            <span class="stepper-number" title="General Information"><i class="fa-solid fa-magnifying-glass"></i></span>
                                                        </div>

                                                        <div class="stepper-label">
                                                            <h3 class="stepper-title">General Information</h3>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="stepper-line h-20px"></div>
                                            </div>

                                            <div class="stepper-item" data-kt-stepper-element="nav">
                                                <div class="stepper-wrapper">
                                                    <a class="nav-link ms-0 me-10" id="kt_stats_widget_16_tab_link_2" data-bs-toggle="pill" href="#kt_stats_widget_16_tab_2" aria-selected="false" role="tab" tabindex="-1" onclick="activetab('#kt_stats_widget_16_tab_2')">
                                                        <div class="stepper-icon w-40px h-40px">
                                                            <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                                            <span class="stepper-number" title="Contact info"><i class="fa-solid fa-id-card"></i></span>
                                                        </div>
                                                        <div class="stepper-label">
                                                            <h3 class="stepper-title">Contact Info</h3>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="stepper-line h-20px"></div>
                                            </div>

                                            <div class="stepper-item" data-kt-stepper-element="nav">
                                                <div class="stepper-wrapper">
                                                    <a class="nav-link ms-0 me-10" id="kt_stats_widget_16_tab_link_3"
                                                    data-bs-toggle="pill" href="#kt_stats_widget_16_tab_3"
                                                    aria-selected="false" role="tab" tabindex="-1"
                                                    onclick="activetab('#kt_stats_widget_16_tab_3')">
                                                    <div class="stepper-icon w-40px h-40px">
                                                        <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                                        <span class="stepper-number" title="Loads"><i class="fa-solid fa-magnifying-glass-dollar"></i></span>
                                                    </div>

                                                    <div class="stepper-label">
                                                        <h3 class="stepper-title">Loads</h3>
                                                    </div>
                                                </a>
                                            </div>
                                            <!-- <div class="stepper-line h-20px"></div> -->
                                            </div>


                                        </ul>
                                        <button type="submit" class="tab-action btn btn-primary btn-lg mt-12 me-3 mb-xxl-12 w-100">Update</button>

                                    </div> 
                                </div>

                                <div class="col-lg-8">
                                    @csrf
                                    <input type="hidden" name="CLIENT_ID" id="CLIENT_ID" value="{{ old('NAME', $customer->CLIENT_ID) }}" class="form-control">
                                    <div class="mb-12 mb-xxl-12 tab-content">
                                        <div class="pb-0 tab-pane fade show {{ $activeTab1 }}" id="kt_stats_widget_16_tab_1">
                                        <div class="card-header">                                              
                                                  <h2 class="fw-bold text-gray-900 mt-2">General Information
                                                  </h2>
                                              </div>
                                            <div class="w-100 card card-body p-10">
                                               
                                               
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="mb-3">
                                                                <label for="max_weg" class="col-lg-6 col-form-label fw-semibold fs-6"><span class="required">Name</span> </label>
                                                                <input type="text" name="NAME" id="NAME" value="{{ old('NAME',$customer->NAME)}}" class="form-control" >
                                                                <input type="hidden" name="CLIENT_ID" id="CLIENT_ID" value="{{ old('NAME',$customer->CLIENT_ID)}}" class="form-control" >
                                                                @error('NAME')
                                                                <p class="text-danger">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label
                                                            class="col-lg-6 col-form-label fw-semibold fs-6">Address</label>
                                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                <input type="text" class="form-control"
                                                                id="ADDRESS_1" name="ADDRESS_1"
                                                                value="{{ old('ADDRESS_1', $customer->ADDRESS_1) }}">
                                                                @error('ADDRESS_1')
                                                                <p class="text-danger">{{ $message }}</p>
                                                                @enderror
                                                                <div
                                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                 <div class="col-md-6">
                                                    <label
                                                    class="col-lg-6 col-form-label fw-semibold fs-6">City</label>
                                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                        <input type="text" class="form-control"
                                                        id="CITY" name="CITY"
                                                        value="{{ old('CITY', $customer->CITY) }}">
                                                        @error('CITY')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                        <div
                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label
                                                class="col-lg-6 col-form-label fw-semibold fs-6">Address2</label>
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <input type="text" class="form-control"
                                                    id="ADDRESS_2" name="ADDRESS_2"
                                                    value="{{ old('ADDRESS_2', $customer->ADDRESS_2) }}">
                                                    @error('ADDRESS_2')
                                                    <p class="text-danger">{{ $message }}</p>
                                                    @enderror
                                                    <div
                                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                </div>
                                            </div>
                                        </div>


                                    </div>

                                    <div class="row">
                                      <div class="col-md-6">
                                        <label
                                        class="col-lg-6 col-form-label fw-semibold fs-6">State</label>
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <select class="form-select" data-control="select2"
                                            data-hide-search="true"
                                            data-placeholder="Select a State" id="PROVINCE"
                                            name="PROVINCE">
                                            <option value="">Please select
                                            </option>
                                            @foreach ($states as $state)
                                            <option value="{{ $state }}"
                                            {{ old('PROVINCE', $customer->PROVINCE) == $state ? 'selected' : '' }}>
                                        {{ $state }}</option>
                                        @endforeach
                                    </select>
                                    @error('PROVINCE')
                                    <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                    
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label
                                class="col-lg-6 col-form-label fw-semibold fs-6">Zip</label>
                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <input type="text" class="form-control "
                                    id="POSTAL_CODE" name="POSTAL_CODE"
                                    value="{{ old('POSTAL_CODE', $customer->POSTAL_CODE) }}">
                                    @error('POSTAL_CODE')
                                    <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                    <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        @php
                        $status = '';
                        $statusValue = 'False';
                        if($customer->IS_INACTIVE == 'False'){
                            $status = 'checked';
                            $statusValue = 'True';
                        } else{
                            $status = '';
                            $statusValue = 'False';
                        }
                        @endphp

                        <div class="col-md-6">
                            <label
                            class="col-lg-6 col-form-label fw-semibold fs-6">Status</label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <label class="switch">
                                    <input class="switch-input" type="checkbox" id="IS_INACTIVE" value="{{ $statusValue }}" name="IS_INACTIVE" {{ $status }} >
                                    <span class="switch-label fw-bold" data-on="ACTIVE" data-off="INACTIVE"></span>
                                    <span class="switch-handle"></span>
                                </label>
                                @error('IS_INACTIVE')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                                <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                        </div>
                    </div>

      <div class="col-md-6">
    <label class="col-lg-6 col-form-label fw-semibold fs-6">Payment Terms</label>
    <div class="col-lg-12 fv-row fv-plugins-icon-container">