@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;

}

button.active {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    border: 2px dashed white !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">Bill Profile <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('myProfile.index',['id'=> 'kt_bill_profile']) }}" class="btn btn-primary btn-sm me-2"><i
                                class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>
                        <a href="{{ route('assets.bill_profiles.delete', $billProfile->PRO) }}"
                            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.bill_profiles.update') }}" method="POST" enctype="multipart/form-data">
                        @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="Contact"><i
                                                                class="fa-solid fa-id-card"></i></span>
                                                    </div>

                                                    <div class="stepper-label">
                                                        <h3 class="stepper-title">Contact</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="Billing"><i class="fa-solid fa-money-bill"></i></span>
                                                    </div>
                                                    <div class="stepper-label">
                                                        <h3 class="stepper-title">Billing</h3>
                                                    </div>
                                                </a>
                                            </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">Update</button>

                                </div>
                            </div>

                            <div class="col-lg-8">
                                @csrf
                                <input type="hidden" name="PRO" id="PRO"
                                    value="{{ old('NAME', $billProfile->PRO) }}" 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">Contact
                                            </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',$billProfile->NAME)}}"
                                                            class="form-control">
                                                        <input type="hidden" name="PRO" id="PRO"
                                                            value="{{ old('NAME',$billProfile->PRO)}}"
                                                            class="form-control">
                                                        @error('NAME')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <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">MC#</span> </label>
                                                        <input type="text" name="MC_NUM" id="MC_NUM"
                                                            value="{{ old('MC_NUM',$billProfile->MC_NUM)}}"
                                                            class="form-control">
                                                        
                                                        @error('MC_NUM')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <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">DOT # </label>
                                                        <input type="text" name="COLOR_NUM" id="COLOR_NUM"
                                                            value="{{ old('COLOR_NUM',$billProfile->COLOR_NUM)}}"
                                                            class="form-control">
                                                        
                                                        @error('COLOR_NUM')
                                                        <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">EMAIL</label>
                                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                        <input type="email" class="form-control" id="EMAIL"
                                                            name="EMAIL"
                                                            value="{{ old('EMAIL', $billProfile->EMAIL) }}">
                                                        @error('EMAIL')
                                                        <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-sm-6">
                                                    <div class="mb-3">
                                                        <label for="max_weg"
                                                            class="col-lg-6 col-form-label fw-semibold fs-6">Phone </label>
                                                        <input type="text" name="PHONE" id="PHONE"
                                                            value="{{ old('PHONE',$billProfile->PHONE)}}"
                                                            class="form-control">
                                                        
                                                        @error('PHONE')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-sm-6">
                                                    <div class="mb-3">
                                                        <label for="max_weg"
                                                            class="col-lg-6 col-form-label fw-semibold fs-6">PHONE2 </label>
                                                        <input type="text" name="PHONE2" id="PHONE2"
                                                            value="{{ old('PHONE2',$billProfile->PHONE2)}}"
                                                            class="form-control">
                                                        
                                                        @error('PHONE2')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                                

                                                
                                            </div>
                                            <div class="row">
                                                <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"
                                                            value="{{ old('ADDRESS_1', $billProfile->ADDRESS) }}">
                                                        @error('ADDRESS')
                                                        <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">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', $billProfile->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>

                                            <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="STATE" name="STATE">
                                                            <option value="">Please select
                                                            </option>
                                                            @foreach ($states as $state)
                                                            <option value="{{ $state }}"
                                                                {{ old('STATE', $billProfile->STATE) == $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="ZIP"
                                                            value="{{ old('ZIP', $billProfile->ZIP) }}">
                                                        @error('ZIP')
                                                        <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-12">
                                                    <label class="col-lg-6 col-form-label fw-semibold fs-6">Logo</label>
                                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                        <input type="file" class="form-control " id="LOGO"
                                                            name="LOGO"
                                                            value="{{ old('LOGO', $billProfile->LOGO) }}">
                                                        @error('LOGO')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                        <div
                                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                        </div>
                                                        
                                                        @if (!empty($billProfile->LOGO))                                                                    
                                                                        <div class="col-md-6">
                                                                            @if (file_exists('bill_profiles/logo/' . $billProfile->LOGO) && !empty($billProfile->LOGO))
                                                                                <a href="{{ asset('bill_profiles/logo/' . $billProfile->LOGO) }}"
                                                                                    download><i
                                                                                        class="fas fa-file"></i>{{ $billProfile->LOGO }}</a>
                                                                            @endif                                                                           
                                                                        </div>
                                                                   
                                                                @endif
                                                    </div>
                                                </div>

                                               


                                            </div>


                                        </div>
                                    </div>



                                    <div class="card pb-0 tab-pane fade show" id="kt_stats_widget_16_tab_2">
                                        <div class="card-header">
                                            <h2 class="fw-bold text-gray-900 mt-2">Billing</h2>
                                        </div>
                                        <div class="w-100 card-body">


                                            <div class="row mb-0">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label class="col-lg-6 col-form-label fw-semibold fs-6">Billing Email
                                                        </label>
                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                            <input type="email" name="BILLING_EMAIL" id="BILLING_EMAIL"
                                                                value="{{ old('BILLING_EMAIL', $billProfile->BILLING_EMAIL) }}"
                                                                class="form-control ">


                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="col-lg-6 col-form-label fw-semibold fs-6">START INVOICE #
                                                        </label>
                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                            <input type="text" name="START_CHECK_NO" id="START_CHECK_NO"
                                                                value="{{ old('START_CHECK_NO', $billProfile->START_CHECK_NO) }}"
                                                                class="form-control ">


                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <label class="col-lg-6 col-form-label fw-semibold fs-6"> RATE CON TXT
                                                        </label>
                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                            <textarea name="RATE_CON_TXT" id="RATE_CON_TXT" cols="35" rows="4" class="form-control"></textarea>
                                                         </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <label class="col-lg-6 col-form-label fw-semibold fs-6"> INV NOTE
                                                        </label>
                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                            <textarea name="INV_NOTE" id="INV_NOTE" cols="35" rows="4" class="form-control"></textarea>
                                                         </div>
                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                  

                                </div>
                                <div class="col-lg-12 row p-5 update-button">
                                    <div class="col-lg-12 text-center">
                                        <input type="hidden" name="activeTab" id="activeTab" value="">
                                        <button type="submit"
                                            class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Update</button>
                                        <a href="{{ route('myProfile.index',['id'=> 'kt_bill_profile']) }}"
                                            class="btn btn-secondary  btn-lg me-3 mb-xxl-12">Cancel</a>
                                    </div>
                                </div>
                            </div>

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

    </div>
</div>
@endsection()
@section('script')

<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5BQa0hFcyKzBa_dA2cbKt3QvdiWhxOvY&libraries&callback=initAutocomplete&libraries=places&v=weekly"
    defer></script>


<script>
if (window.location.hash === '#kt_stats_widget_16_tab_1') {
    document.getElementById('kt_stats_widget_16_tab_link_1').click();
}
if (window.location.hash === '#kt_stats_widget_16_tab_2') {
    document.getElementById('kt_stats_widget_16_tab_link_2').click();
}
if (window.location.hash === '#kt_stats_widget_16_tab_3') {
    document.getElementById('kt_stats_widget_16_tab_link_3').click();
}

$("#nav-stepper .stepper-item").click(function() {
    var cntrl = $(this);
    $("#nav-stepper .stepper-item").removeClass("current");
    $(cntrl).addClass("current");
});

function activetab(id) {
    if (id != '') {
        $('#activeTab').val(id);
    }
    if (id == "#kt_stats_widget_16_tab_3") {
        $(".update-button").hide();
    } else {
        $(".update-button").show();
    }
}


$('.datetimepicker').daterangepicker({
    timePicker: false,
    singleDatePicker: true,
    locale: {
        format: 'MM/DD/YYYY'
    }
});

let autocomplete;
let address1Field;
let address2Field;
let postalField;



function initAutocomplete() {
    var input = document.getElementById('ADDRESS_1');
    autocomplete = new google.maps.places.Autocomplete(input);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;
        }

        $('#ADDRESS_1').val(place.formatted_address);

        let province = '';
        let city = '';
        let postalCode = '';

        for (let component of place.address_components) {
            let componentType = component.types[0];
            switch (componentType) {
                case 'administrative_area_level_1':
                    province = component.short_name;
                    break;
                case 'locality':
                    city = component.long_name;
                    break;
                case 'postal_code':
                    postalCode = component.long_name;
                    break;
            }
        }

        $('#PROVINCE').val(province).trigger('change');
        $('#CITY').val(city);
        $('#POSTAL_CODE').val(postalCode);

    });

    var input2 = document.getElementById('ADDRESS_2');
    autocomplete2 = new google.maps.places.Autocomplete(input2);
    google.maps.event.addListener(autocomplete2, 'place_changed', function() {
        var place2 = autocomplete2.getPlace();
        if (!place2.geometry) {
            return;
        }
        $('#ADDRESS_2').val(place2.formatted_address);
    });
}

const table1 = $('#billProfileLoadList');
table1.on('preXhr.dt', function(e, setting, data) {
    data.billProfileId = '{{request()->route('
    billProfileId ')}}';

});



$('#PAY_TERMS').on("change", function() {
    if ($(this).val() == 5) {
        $('#factor-details').show();
    } else {
        $('#factor-details').hide();
    }
});

const table2 = $('#billProfileInvoiceList');
table2.on('preXhr.dt', function(e, setting, data) {
    data.billProfileId = '{{$billProfile->PRO}}';
    data.statusId = $('#invoice_status').val();
});


function invoicetable() {

    table2.DataTable().ajax.reload();

}
const invoiceTabLink = document.getElementById('kt_stats_widget_16_tab_link_4');
if (invoiceTabLink) {
    invoiceTabLink.addEventListener('shown.bs.tab', function() {
        invoicetable();
    });
}

$(".btn-invoice").click(function() {

    $(".btn-invoice").removeClass("active");
    $(this).addClass("active");
    $('#invoice_status').val($(this).data('status'));
    // table2.on('preXhr.dt', function(e, setting, data) {
    //     data.billProfileId = '{{$billProfile->PRO}}';
    //     data.status = $(this).data('status');

    // });
    table2.DataTable().ajax.reload();
})
</script>
@endsection