@extends('admin.app')
@section('title') Edit Vendor @endsection
@section('styles') 
<style>
    .box-heading {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 5px 10px;
    text-align: left;
    display: inline-block;
    width: 100%;
    }

    .box-heading h3 {
    width: auto;
    float: left;
    margin: 0px !important;
    padding: 0px;
    line-height: 30px;
}

    .box-heading button {
        float: right;
        margin-right: -10px !important;
    }

    .btn-size {
    width: 40px;
    line-height: 23px;
    height: 36px;
   
}
</style>
@endsection
@section('content')
<div class="container-fluid">
    
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="review-tab-pro-inner">
                @if(session('success'))
                <div class="alert alert-success">
                {{ session('success') }}
                </div> 
                @endif
                @if(session('error'))
                <div class="alert alert-warning">
                    {{ session('error') }}
                </div> 
                @endif
                <div id="myTabContent" class="tab-content custom-product-edit">
                    <form action="{{ route('admin.vendors.edit', $vendor_data->vendor_id) }}" method="POST">
                        {{ csrf_field() }}
                        <div class="product-tab-list tab-pane fade active in" id="description">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <h4>Edit Vendor</h4>
                                    <div class="review-content-section">
                                        <div class="form-div">
                                            <div class="mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <label for="outName">Vendor Name</label>
                                                <input type="text" class="form-control" placeholder="Vendor Name*" name="vendor_name"  id="outName" required value="{{ $vendor_data->vendor_name }}">
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <label for="owMobile">Mobile Number</label>
                                                <div class="input-group" style="display: flex; align-items: center;background-color: #E9ECEF;border-radius: 0.5rem;">
                                                    <div class="input-group-text" style="padding-right: 1rem; padding-left: 1rem; ">+64</div>
                                                    <input type="text" style="display: inline-block" class="form-control" placeholder="Mobile Number*" name="vendor_mobile_num"  id="owMobile" required value="{{ $vendor_data->vendor_mobile_num }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div id="divAddressInput" class="form-div" style="display: flex; align-items: end;">
                                            <div class="mg-b-pro-edt col-lg-10 col-md-10 col-sm-12 col-xs-12 " style="text-align: left;">
                                                <label for="autocomplete">Address</label>
                                                <input type="text" name="location_input[]" id="autocomplete" class="form-control" placeholder="Enter Location" >
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-2 col-md-2 col-sm-12 col-xs-12" style="text-align: left;">
                                                <button id="btnAdd" name="btnAdd" type="button" class="btn btn-info btn-round" onclick="addLocation()"><i class="fas fa-plus"></i></button>
                                            </div>
                                        </div>

                                        <div id="divAddedLocations" class="form-div" style="display: flex; align-items: end;">
                                            <div id="divAddedLocation" class="mg-b-pro-edt col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="text-align: left;">
                                                {{-- <input type="hidden" name="vendor_address" id="vendor_address" value="{{ $vendoraddresses }}"> --}}
                                                @foreach ($vendoraddresses as $indexKey => $vendoraddress)
                                                <div id="LocationSet_{{$indexKey}}" style="display: flex; align-items: center">
                                                    <input id="location_{{$indexKey}}" name="locations[]" class="locations form-control" style="display: inline; width: 83%; background-color:#fff; border-width:0; box-shadow: none;" readOnly 
                                                        value="">
                                                    <button id="btnDelete_LocationSet_{{$indexKey}}" name="btnAdd" type="button" style="margin-left: 1.9rem;" class="btn btn-danger btn-round" onclick="deleteInputField('LocationSet', {{$indexKey}})"><i class="fas fa-times"></i></button>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="form-div">
                                            <div class=" mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <label for="owMail">Email</label>
                                                <input type="Email" class="form-control" placeholder="Email" name="vendor_email" id="owMail" required value="{{ $vendor_data->email }}">
                                            </div>
                                        </div>
                                        <div class="form-div text-left">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Product Type</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                                Carton
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Carton" name="carton_cost" id="carton_cost" value="{{ $vendor_data->carton_cost }}">
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                                Pallets
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Pallets" name="pallet_cost" id="pallet_cost" value="{{ $vendor_data->pallet_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                                Stock Move
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Stock Move" name="stock_move_cost" id="stock_move_cost" value="{{ $vendor_data->stock_move_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                                Appliances
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Appliances" name="appliance_cost" id="appliance_cost" value="{{ $vendor_data->appliance_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                                Furniture
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Furniture" name="furniture_cost" id="furniture_cost"  value="{{ $vendor_data->furniture_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div> 
                                            <div class="mg-b-pro-edt col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                                Hazardous Goods
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Hazardous Goods" name="hazardous_goods_cost" id="hazardous_goods_cost"  value="{{ $vendor_data->hazardous_goods_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                                Others
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Others" name="others_cost" id="others_cost"  value="{{ $vendor_data->others_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-div text-left">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Installation</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Installation Fare" name="installation_cost" id="installationFar" value="{{ $vendor_data->installation_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-div text-left">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Unwrapping</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Unwrapping Fare" name="unwrapping_cost" id="unwrapping_cost" value="{{ $vendor_data->unwrapping_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>   
                                        </div>

                                            <div class="form-div text-left">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>
                                                Fragile</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Fragile Fare" name="fragile_cost" id="fragile_cost" value="{{ $vendor_data->fragile_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>   
                                        </div>
                                        
                                        <div class="form-div text-left">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Floor</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <div id="listFloor" class="form-group">
                                                    <div class="duplicate">
                                                        <input id="floor_input" name="floor_input" style="width: 30%;" step='any' class="form-control" placeholder="Floor">
                                                        <div class="col" style="padding: 5px;"></div>
                                                        <div class="cp_iptxt" style="width: 30%;" >
                                                            <input id="floorFare_input" name="floorFare_input" type="number" class="cp_iptxt" placeholder="Floor Fare">
                                                            <i class="fas fa-dollar-sign"></i>
                                                        </div>
                                                        <div class="col" style="padding: 5px;"></div>
                                                        <button id="btnAddFloor" name="btnAddFloor" type="button" class="btn btn-info btn-round" onclick="addFloor()"><i class="fas fa-plus"></i></button>
                                                    </div>
                                                    <div id="FloorList"  >
                                                        <div id="added_floor" ></div>
                                                        @foreach ($vendorFloorFares as $indexKey => $vendorFloorFare)
                                                        <div id="floorSet_{{$indexKey}}" style="display: flex; align-items: center">
                                                            <input id="floor_{{$indexKey}}" name="floor[]" type="number" style="width: 30%;" class="form-control" placeholder="Floor" value="{{$vendorFloorFare->floor_num}}">
                                                            <div class="col" style="padding: 5px;"></div>
                                                            <div class="cp_iptxt" style="width: 30%;" >
                                                                <input id="floorFare_{{$indexKey}}" name="floorFare[]" type="number" class="cp_iptxt" placeholder="Floor Fare" value="{{$vendorFloorFare->floor_fare}}">
                                                                <i class="fas fa-dollar-sign"></i>
                                                            </div>
                                                            <div class="col" style="padding: 5px;"></div>
                                                            <button id="btnDelete_floorSet_{{$indexKey}}"  name="btnRemove" type="button" class="listFloor_del btn btn-danger btn-round " onclick="deleteInputField('floorSet', {{$indexKey}})"><i class="fas fa-times"></i></button>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-div text-left">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Stairs Or Lift</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Stairs Fair " name="stair_cost" id="stair_cost" value="{{ $vendor_data->stair_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>   
                                            <div class="mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt" placeholder="Lift Fair " name="lift_cost" id="lift_cost" value="{{ $vendor_data->lift_cost }}" >
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div> 
                                        </div>
                                        <div class="form-div text-left">
                                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Apply Km Rate</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-2 col-md-2 col-sm-6 col-xs-12">
                                                <div class="switchArea">
                                                    <input type="checkbox" name="apply_km_rate" value="1" id="switchKm" @checked( $vendor_data->apply_km_rate )>
                                                    <label for="switchKm"><span></span></label>
                                                    <div class="swImg"></div>
                                                </div>
                                            </div>  
                                        </div>
                                        <div id="apply_km_div">
                                            <div class="form-div text-left">
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                    <label>(Km) KiloMeter Fare</label>
                                                </div>
                                                <div class="mg-b-pro-edt col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <div id="listKilometer" class="form-group">
                                                        <div class="duplicate">
                                                            <input id="KiloMeterFrom_input" name="KiloMeterFrom_input" style="width: 30%;" step='any' class="form-control" placeholder="From">
                                                            <div class="col" style="padding: 5px;"></div>
                                                            <input id="KiloMeterTo_input" name="KiloMeterTo_input" style="width: 30%;" step='any' class="form-control" placeholder="To">
                                                            <div class="col" style="padding: 5px;"></div>
                                                            <div class="cp_iptxt" style="width: 30%;" >
                                                                <input id="KiloMeterFare_input" name="KiloMeterFare_input" type="number" step="any" class="cp_iptxt" placeholder="Km Fare">
                                                                <i class="fas fa-dollar-sign"></i>
                                                            </div>
                                                            <div class="col" style="padding: 5px;"></div>
                                                            <div class="cp_iptxt" style="width: 30%;" >
                                                                <input id="BaseFare_input" name="BaseFare_input" type="number" step="any" class="cp_iptxt" placeholder="Base Fare">
                                                                <i class="fas fa-dollar-sign"></i>
                                                            </div>
                                                            <div class="col" style="padding: 5px;"></div>
                                                            <div class="cp_iptxt" style="width: 30%;" >
                                                                <input id="CubicFare_input" name="CubicFare_input" type="number" step="any" class="cp_iptxt" placeholder="Cubic Fare">
                                                                <i class="fas fa-dollar-sign"></i>
                                                            </div>
                                                            <div class="col" style="padding: 5px;"></div>
                                                            <button id="btnAddKilometer" name="btnAddKilometer" type="button" class="btn btn-info btn-round" onclick="addKilometer()"><i class="fas fa-plus"></i></button>
                                                        </div>
                                                        <div id="KiloMeterList"  >
                                                            <div id="added_Kilometer" ></div>
                                                            @foreach ($vendorKilometerFares as $indexKey => $vendorKilometerFare)
                                                            <div id="KiloMeterSet_{{$indexKey}}" style="display: flex; align-items: center">
                                                                <input id="KiloMeterFrom_{{$indexKey}}" name="KiloMeterFrom[]" type="number" step="any" style="width: 30%;" class="form-control" placeholder="Floor" value="{{$vendorKilometerFare->min_distance}}">
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <input id="KiloMeterTo_{{$indexKey}}" name="KiloMeterTo[]" type="number" step="any" style="width: 30%;" class="form-control" placeholder="Floor" value="{{$vendorKilometerFare->max_distance}}">
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <div class="cp_iptxt" style="width: 30%;" >
                                                                    <input id="KiloMeterFare_{{$indexKey}}" name="KiloMeterFare[]" type="number" step="any" class="cp_iptxt" placeholder="Floor Fare" value="{{$vendorKilometerFare->km_fare}}">
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <div class="cp_iptxt" style="width: 30%;" >
                                                                    <input id="baseFare_{{$indexKey}}" name="baseFare[]" type="number" step="any" class="cp_iptxt" placeholder="Floor Fare" value="{{$vendorKilometerFare->base_fare}}">
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <div class="cp_iptxt" style="width: 30%;" >
                                                                    <input id="cubicFare_{{$indexKey}}" name="cubicFare[]" type="number" step="any" class="cp_iptxt" placeholder="Floor Fare" value="{{$vendorKilometerFare->cubic_fare}}">
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <button id="btnDelete_KiloMeterSet_{{$indexKey}}" name="btnRemove" type="button" class="listFloor_del btn btn-danger btn-round " onclick="deleteInputField('KiloMeterSet', {{$indexKey}})"><i class="fas fa-times"></i></button>
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-div text-left">
                                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Apply Post Code</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-2 col-md-2 col-sm-6 col-xs-12">
                                                <div class="switchArea">
                                                    <input type="checkbox" name="apply_postcode" value="1" id="postcodecheck">
                                                    <label for="postcodecheck"><span></span></label>
                                                    <div class="swImg"></div>
                                                </div>
                                            </div>  
                                        </div>
                                        <div class="form-div" id="state_div">
                                            <div class=" mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <label for="state">Add New Zone</label>
                                                <select  class="form-control" name="state" id="statedropdown" >
                                                    <option value=""> - Select Zone- </option> 
                                                    @foreach ($states as $state)
                                                        <option value="{{ $state->id }}" >{{ $state->state_name }} - ( {{ $state->zone->name }} ) </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div> 
                                        <div class="form-div text-left" id="postcode_div">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Postcode Fare</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                @if($lastIdNumber)
                                                <input type="hidden" id="totalVendorPostcodeFareIds" name="totalVendorPostcodeFareIds" value="{{ $lastIdNumber->vendor_postcode_fare_id  }}" />
                                                @else
                                                <input type="hidden" id="totalVendorPostcodeFareIds" name="totalVendorPostcodeFareIds" value="0" />
                                                @endif
                                                
                                                
                                                @foreach ($states as $key =>$state)
                                               
                                                <div id="listPostcode_{{ $state->id }}"  style="@if(count(getVendorPostcodeFareDataWithStateAndVendorId($vendor_data->vendor_id ,$state->id)) > 0) @else display:none; @endif" class="form-group">
                                                        <div class="text-left" style="margin-bottom: 10px;">  
                                                            <a href="{{ url('admin/delete-zone/'.$vendor_data->vendor_id.'/'.$state->id) }}" class="btn btn-danger btn-round "><i class="fas fa-times"></i> Delete {{ $state->state_name }} Zone</a>
                                                        </div>
                                                            <div class="box-heading" id="ExpandBtnDiv_{{ $state->id }}">
                                                                <h3>{{ $state->state_name }}</h3>
                                                                <button type="button" id="expandBtn_{{ $state->id }}" onclick="expanDiv(this.id)" class="btn btn-info btn-round expandBtnClass" >Close </button>
                                                            </div>
                                                        <div id="PostCodeDiv_{{ $state->id }}" class="PostCodeDivClass">
                                                            @if(count(getVendorPostcodeFareDataWithStateAndVendorId($vendor_data->vendor_id ,$state->id)) > 0 )
                                                            
                                                            @else
                                                                <div class="text-left">
                                                                    <button type="button" class="btn btn-warning btn-round float-left" id="{{ $state->id  }}" onclick="addPostCode(this.id)">Add Post Code</button>
                                                                </div>
                                                            @endif

                                                            <div class="duplicate" >
                                                                <input type="hidden" id="State_input_{{$state->id}}" name="State_input_{{$state->id}}" style="width: 30%;" step='any' class="form-control Postcode_input" value="{{$state->id}}" placeholder="State">
                                                                <input id="Postcode_input_{{$state->id}}" name="Postcode_input_{{$state->id}}" style="width: 30%;" step='any' class="form-control Postcode_input" placeholder="Postcode">
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <div class="cp_iptxt" style="width: 30%;" >
                                                                    <input id="PostcodeFare_input_{{$state->id}}" name="PostcodeFare_input_{{$state->id}}" type="number" step="any" class="cp_iptxt" placeholder="Postcode Fare">
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <div class="cp_iptxt" style="width: 30%;" >
                                                                    <input id="PostcodeBaseFare_input_{{$state->id}}" name="PostcodeBaseFare_input_{{$state->id}}" type="number" step="any" class="cp_iptxt" placeholder="Base Fare">
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <div class="cp_iptxt" style="width: 30%;" >
                                                                    <input id="PostcodeCubicFare_input_{{$state->id}}" name="PostcodeCubicFare_input_{{$state->id}}" type="number" step="any" class="cp_iptxt" placeholder="Cubic Fare">
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <button id="btnAddPostcode_{{$state->id}}" name="btnAddPostcode" type="button" class="btn btn-info btn-round btnAddPostcode btn-size" ><i class="fas fa-plus"></i></button>
                                                            </div>
                                                            <div id="PostcodeList">
                                                                <div id="added_Postcode_{{$state->id}}" ></div>
                                                                @foreach ($vendorPostcodeFares as $indexKey => $vendorPostcodeFare)
                                                                @if($vendorPostcodeFare->state_id == $state->id)
                                                                <div id="PostcodeSet_State_{{$state->id}}_{{$vendorPostcodeFare->vendor_postcode_fare_id }}" style="display: flex; align-items: center">
                                                                    {{-- <div class="col" style="padding: 5px;"></div> --}}
                                                                    {{-- <input type="hidden" id="State_{{$vendorPostcodeFare->vendor_postcode_fare_id }}" name="State_{{ $vendorPostcodeFare->state_id }}[]" style="width: 30%;" step='any' class="form-control" placeholder="State" value="{{$vendorPostcodeFare->state_id}}"> --}}
                                                                    <input id="Postcode_{{$vendorPostcodeFare->vendor_postcode_fare_id }}" name="Postcode_{{ $vendorPostcodeFare->state_id }}[]" style="width: 30%;" step='any' class="form-control" placeholder="Postcode" value="{{$vendorPostcodeFare->postcode}}">
                                                                    <div class="col" style="padding: 5px;"></div>
                                                                    <div class="cp_iptxt" style="width: 30%;" >
                                                                        <input id="PostcodeFare_{{$vendorPostcodeFare->vendor_postcode_fare_id }}" name="PostcodeFare_{{ $vendorPostcodeFare->state_id }}[]" type="number" step="any" class="cp_iptxt" placeholder="Floor Fare" value="{{$vendorPostcodeFare->postcode_fare	}}">
                                                                        <i class="fas fa-dollar-sign"></i>
                                                                    </div>
                                                                    <div class="col" style="padding: 5px;"></div>
                                                                    <div class="cp_iptxt" style="width: 30%;" >
                                                                        <input id="postcode_baseFare_{{$vendorPostcodeFare->vendor_postcode_fare_id }}" name="postcode_baseFare_{{ $vendorPostcodeFare->state_id }}[]" type="number" step="any" class="cp_iptxt" placeholder="Floor Fare" value="{{$vendorPostcodeFare->base_fare}}">
                                                                        <i class="fas fa-dollar-sign"></i>
                                                                    </div>
                                                                    <div class="col" style="padding: 5px;"></div>
                                                                    <div class="cp_iptxt" style="width: 30%;" >
                                                                        <input id="postcode_cubicFare_{{$vendorPostcodeFare->vendor_postcode_fare_id }}" name="postcode_cubic_fare_{{ $vendorPostcodeFare->state_id }}[]" type="number" step="any" class="cp_iptxt" placeholder="Floor Fare" value="{{$vendorPostcodeFare->cubic_fare}}">
                                                                        <i class="fas fa-dollar-sign"></i>
                                                                    </div>
                                                                    <div class="col" style="padding: 5px;"></div>
                                                                    <button name="btnRemove" type="button" class="listFloor_del btn btn-danger btn-round btn-size" onclick="deleteStateInputField('PostcodeSet_State_',{{ $state->id }},{{$vendorPostcodeFare->vendor_postcode_fare_id}})"><i class="fas fa-times"></i></button>
                                                                </div>
                                                                @endif
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="form-div text-left">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Hourly Rate</label>
                                            </div>
                                            <div class=" mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <div class="cp_iptxt">
                                                    <input type="number" step='any' class="cp_iptxt " placeholder="Hourly Rate" name="hourly_rate" id="hourly_rate"  value="{{ $vendor_data->hourly_rate }}">
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                            </div>  
                                        </div>
                                        
                                        
                                        <div class="form-div text-left">
                                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" style="text-align: left;">
                                                <label>Apply Cubic Rate</label>
                                            </div>
                                            <div class="mg-b-pro-edt col-lg-2 col-md-2 col-sm-6 col-xs-12">
                                                <div class="switchArea">
                                                    <input type="checkbox" name="apply_cubic_rate" value="1" id="switchCubic" @checked( $vendor_data->apply_cubic_rate )>
                                                    <label for="switchCubic"><span></span></label>
                                                    <div class="swImg"></div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="text-center custom-pro-edt-ds">
                                        <button type="submit" id="create_vendor" class="btn btnSubmit btn-ctl-bt waves-effect waves-light m-r-10 " name="event" value="add_vendor" >Save</button>
                                        <button type="button" class="btn btn-ctl-bt waves-effect waves-light" onclick="window.location = `{{ route('admin.vendor_list') }}`">Back</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden"   name="countDropRule1" id="countDropRule1" value="1">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <!-- Add/Delete Locations -->
    <script>
        $(document).ready(function(){
            $('.PostCodeDivClass').hide();
            $('.expandBtnClass').removeClass("btn-info");
            $('.expandBtnClass').addClass('btn-danger');
            $('.expandBtnClass').html('Open');
        });
    </script>
    <script>
        $('#statedropdown').change(function(){
            var stateId = $(this).val();
            $("#listPostcode_"+stateId).css("display", "block");
           
        });
    </script>
     <script>
        function addPostCode(state_id)
        {
            // var lvlValue = id;
            // lvlValue = lvlValue.replace('addPostCodeBtn_','');
            if(state_id > 0) {
                 var ajax_url = "{{ url('admin/ajax/state')}}/" + state_id;
                         $.ajaxSetup({
                             headers: {
                                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                             }
                         });
                         jQuery.ajax({
                             url: ajax_url,
                             method: 'get',
                             data: {},
                             success: function(result){
                                 var postcode = result.postcode;
                                //  alert(postcode);
                                 $('#Postcode_input_'+state_id).val(postcode);
                                 $('#State_input_'+state_id).val(state_id);  
                             }
                         });
             }else{
                $('#Postcode_input_'+state_id).val(null);
                $('#State_input_'+state_id).val(null);   
             }
        }
     </script>
    <script>
        function addLocation() {
            var inputAddress = document.getElementById('autocomplete').value;
            if (inputAddress == "") {
                return;
            }

            var divAddedLocation = document.getElementById('divAddedLocation');
            var i = document.querySelectorAll('[name="locations[]"]').length + 1;
            
            // var DeleteBtnCode = ;
            var LocationCode = 
                '<div id= LocationSet_' + i + '" style="display: flex; align-items: center">'
                + '<input id="location_' + i + '" name="locations[]" '
                + 'class="locations form-control" style="display: inline; width: 83%; background-color:#fff; border-width:0; box-shadow: none;" readOnly ' 
                + 'value="'+ inputAddress + '">' 
                + '<button id="btnDelete_LocationSet_' + i + '" name="btnRemove" type="button" style="margin-left: 1.9rem;" ' 
                + 'class="btn btn-danger btn-round" onclick="deleteInputField(\'LocationSet\',' + i + ')"><i class="fas fa-times"></i></button></div>';
            divAddedLocation.insertAdjacentHTML('afterbegin', LocationCode);

            document.getElementById('autocomplete').value = "";
        }
        function addFloor() {
            var inputFloor = document.getElementById('floor_input').value;
            var inputFareFloor = document.getElementById('floorFare_input').value;
            if (inputFloor == "" || inputFareFloor == "") {
                return;
            }

            var divFloorList = document.getElementById('added_floor');
            var i = document.querySelectorAll('[name="floor[]"]').length + 1;
            
            var FloorCode = 
                '<div id= "floorSet_' + i + '" style="display: flex; align-items: center">'
                + '<input id="floor_' + i + '" name="floor[]" type="number" style="width: 30%;" class="form-control" placeholder="Floor" value="' + inputFloor + '">'
                + '<div class="col" style="padding: 5px;"></div>'
                + '<div class="cp_iptxt" style="width: 30%;" >'
                + '<input id="floorFare_' + i + '" name="floorFare[]" type="number" class="cp_iptxt" placeholder="Floor Fare" value="' + inputFareFloor + '">'
                + '<i class="fas fa-dollar-sign"></i></div>'
                + '<div class="col" style="padding: 5px;"></div>'
                + '<button id="btnDelete_floorSet_' + i + '" name="btnRemove" type="button" class="listFloor_del btn btn-danger btn-round" onclick="deleteInputField(\'floorSet\',' + i + ')"><i class="fas fa-times"></i></button></div>'
            divFloorList.insertAdjacentHTML('afterbegin', FloorCode);

            document.getElementById('floor_input').value = "";
            document.getElementById('floorFare_input').value = "";
        }
        function addKilometer() {
            var KiloMeterFrom_input = document.getElementById('KiloMeterFrom_input').value;
            var KiloMeterTo_input = document.getElementById('KiloMeterTo_input').value;
            var KiloMeterFare_input = document.getElementById('KiloMeterFare_input').value;
            var BaseFare_input = document.getElementById('BaseFare_input').value;
            var CubicFare_input = document.getElementById('CubicFare_input').value;
           
            if (KiloMeterFrom_input == "" || KiloMeterTo_input == "" || KiloMeterFare_input == ""  || 
                BaseFare_input == "" || CubicFare_input == ""  ) {
                return;
            }

            var added_Kilometer = document.getElementById('added_Kilometer');
            var i = document.querySelectorAll('[name="KiloMeterFrom[]"]').length + 1;
            
            var KilometerCode = 
                '<div id= "KiloMeterSet_' + i + '" style="display: flex; align-items: center">'
                + '<input id="KiloMeterFrom_' + i + '" name="KiloMeterFrom[]" type="number" style="width: 30%;" class="form-control" placeholder="Floor" value="' + KiloMeterFrom_input + '">'
                + '<div class="col" style="padding: 5px;"></div>'
                + '<input id="KiloMeterTo_' + i + '" name="KiloMeterTo[]" type="number" style="width: 30%;" class="form-control" placeholder="Floor" value="' + KiloMeterTo_input + '">'
                
                + '<div class="col" style="padding: 5px;"></div>'
                + '<div class="cp_iptxt" style="width: 30%;" >'
                + '<input id="KiloMeterFare_' + i + '" name="KiloMeterFare[]" type="number" class="cp_iptxt" placeholder="Floor Fare" value="' + KiloMeterFare_input + '">'
                + '<i class="fas fa-dollar-sign"></i></div>'
 
                + '<div class="col" style="padding: 5px;"></div>'
                + '<div class="cp_iptxt" style="width: 30%;" >'
                + '<input id="baseFare_' + i + '" name="baseFare[]" type="number" class="cp_iptxt" placeholder="Floor Fare" value="' + BaseFare_input + '">'
                + '<i class="fas fa-dollar-sign"></i></div>'
 
                + '<div class="col" style="padding: 5px;"></div>'
                + '<div class="cp_iptxt" style="width: 30%;" >'
                + '<input id="cubicFare_' + i + '" name="cubicFare[]" type="number" class="cp_iptxt" placeholder="Floor Fare" value="' + CubicFare_input + '">'
                + '<i class="fas fa-dollar-sign"></i></div>'

                + '<button id="btnDelete_floorSet_' + i + '" name="btnRemove" type="button" class="listFloor_del btn btn-danger btn-round" onclick="deleteInputField(\'KiloMeterSet\',' + i + ')"><i class="fas fa-times"></i></button></div>'
            added_Kilometer.insertAdjacentHTML('afterbegin', KilometerCode);

            document.getElementById('KiloMeterFrom_input').value = "";
            document.getElementById('KiloMeterTo_input').value = "";
            document.getElementById('KiloMeterFare_input').value = "";
            document.getElementById('BaseFare_input').value = "";
            document.getElementById('CubicFare_input').value = "";
        }
       

        $('.btnAddPostcode').click(function () { 
            // alert('hello');
            var btnId = this.id;
            btnId = btnId.replace('btnAddPostcode_','');
            // alert(btnId);
            var Postcode_input = document.getElementById('Postcode_input_'+btnId).value;
            var PostcodeFare_input = document.getElementById('PostcodeFare_input_'+btnId).value;
            var PostcodeBaseFare_input = document.getElementById('PostcodeBaseFare_input_'+btnId).value;
            var PostcodeCubicFare_input = document.getElementById('PostcodeCubicFare_input_'+btnId).value;
            if (Postcode_input == "" || PostcodeFare_input == ""  || 
            PostcodeBaseFare_input == "" || PostcodeCubicFare_input == "") {
                alert('all null');
                // alert(State_input + ' , ' + Postcode_input + ' , ' + PostcodeFare_input + ' , ' + PostcodeBaseFare_input + ' , ' +PostcodeCubicFare_input);
                return;
            }

            // alert('all done');

            var added_Postcode = document.getElementById('added_Postcode_'+btnId);
            var totalIds = document.getElementById('totalVendorPostcodeFareIds').value + 1;
            var newAddedPostCodeLengh = document.getElementsByClassName('newAddedPostCode').length;
            var i = totalIds + newAddedPostCodeLengh;
            // alert(i);
            var PostcodeCode = 
                '<div id= "PostcodeSet_State_'+btnId+'_'+i+'" style="display: flex; align-items: center">'
                // + '<input id="State_' + i + '" name="State_'+ btnId+'[]" type="hidden" style="width: 30%;" class="form-control" placeholder="State" value="' + State_input + '">'
                + '<input id="Postcode_' + i + '" name="Postcode_'+ btnId +'[]" type="text" style="width: 30%;" class="form-control newAddedPostCode" placeholder="Postcode" value="' + Postcode_input + '">'
                + '<div class="col" style="padding: 5px;"></div>'
                + '<div class="cp_iptxt" style="width: 30%;" >'
                + '<input id="PostcodeFare_' + i + '" name="PostcodeFare_'+ btnId +'[]" type="number" class="cp_iptxt" placeholder="Postcode Fare" value="' + PostcodeFare_input + '">'
                + '<i class="fas fa-dollar-sign"></i></div>'
 
                + '<div class="col" style="padding: 5px;"></div>'
                + '<div class="cp_iptxt" style="width: 30%;" >'
                + '<input id="postcode_baseFare_' + i + '" name="postcode_baseFare_'+ btnId +'[]" type="number" class="cp_iptxt" placeholder="Postcode Base" value="' + PostcodeBaseFare_input + '">'
                + '<i class="fas fa-dollar-sign"></i></div>'
 
                + '<div class="col" style="padding: 5px;"></div>'
                + '<div class="cp_iptxt" style="width: 30%;" >'
                + '<input id="postcode_cubicFare_' + i + '" name="postcode_cubic_fare_'+ btnId +'[]" type="number" class="cp_iptxt" placeholder="Postcode Cubic" value="' + PostcodeCubicFare_input + '">'
                + '<i class="fas fa-dollar-sign"></i></div>'
                + '<div class="col" style="padding: 5px;"></div>'
                + '<button type="button" class="listFloor_del btn btn-danger btn-round btn-size" onclick="deleteStateInputField(\'PostcodeSet_State_\',' + btnId + ',' + i + ')"><i class="fas fa-times"></i></button></div>'
            added_Postcode.insertAdjacentHTML('afterbegin', PostcodeCode);

             document.getElementById('State_input_'+btnId).value = "";
             document.getElementById('Postcode_input_'+btnId).value = "";
             document.getElementById('PostcodeFare_input_'+btnId).value = "";
             document.getElementById('PostcodeBaseFare_input_'+btnId).value = "";
             document.getElementById('PostcodeCubicFare_input_'+btnId).value = "";
        });
        function deleteStateInputField(target,state_id,i) {
            document.getElementById(target + state_id + '_' + i).remove();
        }

        function expanDiv(state_id)
        {
            var lvlValue = state_id.replace('expandBtn_','');
            $('#PostCodeDiv_'+lvlValue).toggle();
            var dim = $('#PostCodeDiv_'+lvlValue).is(":visible");
            if (dim == true) {
                $('#expandBtn_'+lvlValue).removeClass("btn-danger");
                $('#expandBtn_'+lvlValue).addClass('btn-info');
                $('#expandBtn_'+lvlValue).html('Close');
                
            }else{
                $('#expandBtn_'+lvlValue).removeClass("btn-info");
                $('#expandBtn_'+lvlValue).addClass('btn-danger');
                $('#expandBtn_'+lvlValue).html('Open');
            }
            
            $('#expandBtn_'+lvlValue).addClass('btn-danger');
        }
        function deleteInputField(target,i) {
            // alert(target);
            //alert(target + '_'+ i);
            
            document.getElementById( target + '_'+ i).remove();
        }

        $('#switchKm').change(function() {
            if ($(this).is(':checked')) {
                $('#apply_km_div').show();
                $('#postcode_div').hide();
                $('#state_div').hide();
                $('#postcodecheck').prop("checked",false);
            }else{
                $('#postcode_div').show();
                $('#state_div').show();
                $('#apply_km_div').hide();
                $(this).prop("checked",false);
                $('#postcodecheck').prop("checked",true);
            }
        }).trigger("change");

        $('#postcodecheck').change(function() {
            if ($(this).is(':checked')) {
                $('#apply_km_div').hide();
                $('#postcode_div').show();
                $('#state_div').show();
                $('#switchKm').prop("checked",false);
            }else{
                $('#postcode_div').hide();
                $('#state_div').hide();
                $('#apply_km_div').show();
                $(this).prop("checked",false);
                $('#switchKm').prop("checked",true);
            }
        });

    </script>
    

    <!--Google Places API-->
    <script type="text/javascript"
    src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=places" ></script>
    <script>
        $(document).ready(function () {
            $("#latitudeArea").addClass("d-none");
            $("#longtitudeArea").addClass("d-none");
        });
    </script>
    <script>
        google.maps.event.addDomListener(window, 'load', initialize);
    
        function initialize() {
            
            var input = document.getElementById('autocomplete');
                var options = {
                
                componentRestrictions: {country: "nz"}
                    };
            var autocomplete = new google.maps.places.Autocomplete(input, options);
    
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                $('#latitude').val(place.geometry['location'].lat());
                $('#longitude').val(place.geometry['location'].lng());
    
                $("#latitudeArea").removeClass("d-none");
                $("#longtitudeArea").removeClass("d-none");
            });
        }
    </script>

    <script>
        function changePasswordVisible(targetId) {
            var target = document.getElementById(targetId);
            if (target.type === "password") {
                target.type = "text";
            } else {
                target.type = "password";
            }
        }
    </script>

@endpush