@extends('admin.app')
@section('title') Add Vendor @endsection
@section('content')

<!-- Single pro tab review Start-->
<div class="single-pro-review-area">
    <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.add')}}" 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>Add 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" value="{{ old('vendor_name') }}" placeholder="Vendor Name*" name="vendor_name"  id="outName" required>
                                                </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; border-color: #CED4D9">+64</div>
                                                        <input type="tel" class="form-control" value="{{ old('vendor_mobile_num') }}" placeholder="Mobile Number*" name="vendor_mobile_num"  id="vendor_mobile_num" required>
                                                    </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="locations[]"  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;">
                                                        
                                                </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" value="{{ old('vendor_email') }}" placeholder="Email" name="vendor_email" id="owMail" required>
                                                </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="password">Password</label>
                                                    <input type="password" class="form-control" placeholder="Password" name="vendor_password" id="password" required>
                                                    <input type="checkbox" id="pass_visible" onclick="changePasswordVisible('password')"><label for="pass_visible" style="font-weight: 500">Show Password</label>
                                                </div>
                                                <div class=" mg-b-pro-edt col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                    <label for="cpassword">Confirm Password</label>
                                                    <input type="password" class="form-control" placeholder="Confirm Password" name="cpassword" id="cpassword" required>
                                                    <input type="checkbox" id="cpass_visible" onclick="changePasswordVisible('cpassword')"><label for="cpass_visible" style="font-weight: 500">Show Password</label>
                                                </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' value="{{ old('carton_cost', 0) }}" class="cp_iptxt" placeholder="Carton" name="carton_cost" id="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' value="{{ old('pallet_cost', 0) }}" class="cp_iptxt" placeholder="Pallets" name="pallet_cost" id="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" value="{{ old('stock_move_cost', 0) }}" placeholder="Stock Move" name="stock_move_cost" id="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" value="{{ old('appliance_cost', 0) }}" placeholder="Appliances" name="appliance_cost" id="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" value="{{ old('furniture_cost', 0) }}" placeholder="Furniture" name="furniture_cost" id="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" value="{{ old('hazardous_goods_cost', 0) }}" placeholder="Hazardous Goods" name="hazardous_goods_cost" id="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" value="{{ old('others_cost', 0) }}" placeholder="Others" name="others_cost" id="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' value="{{ old('installation_cost', 0) }}" class="cp_iptxt" placeholder="Installation Fare " name="installation_cost" id="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' value="{{ old('unwrapping_cost', 0) }}" class="cp_iptxt" placeholder="Unwrapping Fare " name="unwrapping_cost" id="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' value="{{ old('fragile_cost', 0) }}" class="cp_iptxt" placeholder="Fragile Fare " name="fragile_cost" id="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="listFloor_var" style="margin: 0; padding: 0; box-shadow: none;">
                                                            <div class="duplicate">
                                                                <input id="floor_0" name="floor[]" data-name-format="floor[%d]" type="number" value="1" step='any' class="form-control" placeholder="Floor" >
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <div class="cp_iptxt" style="width: 30%;" >
                                                                    <input id="floorFare_0" name="floorFare[]" value="1" data-name-format="floorFare[%d]" type="number" step='any' class="cp_iptxt" placeholder="Floor Fare" >
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px; width: 30%;">
                                                                    <button id="plus_f_0" name="plus_0" type="button" class="listFloor_add btn btn-info btn-round"><i class="fas fa-plus"></i></button>
                                                                    <button id="minus_f_0" name="minus_0" type="button" class="listFloor_del btn btn-danger btn-round"><i class="fas fa-minus"></i></button>
                                                                </div>
                                                            </div>
                                                        </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' value="{{ old('fragile_cost', 0) }}" class="cp_iptxt" placeholder="Stairs Fair " name="stair_cost" id="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' value="{{ old('lift_cost', 0) }}" class="cp_iptxt" placeholder="Lift Fair " name="lift_cost" id="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" value="1" name="apply_km_rate" id="switchKm" @checked(old('apply_km_rate')) checked>
                                                        <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="list" class="form-group">
                                                            <div class="list_var" style="margin: 0; padding: 0; box-shadow: none;">
                                                                <div class="duplicate">
                                                                    <input id="KiloMeterFrom_0" name="KiloMeterFrom[]" data-name-format="KiloMeterFrom[%d]" type="number" style="width: 15%;" step='any' class="form-control" placeholder="Km From" >
                                                                    <input id="KiloMeterTo_0" name="KiloMeterTo[]" data-name-format="KiloMeterTo[%d]" type="number" style="width: 15%; margin-left: 5px;" step='any' class="form-control" placeholder="Km To" >
                                                                    <div class="cp_iptxt" style="width: 15%; margin-left: 5px;" >
                                                                        <input id="KiloMeterFare_0" name="KiloMeterFare[]" data-name-format="KiloMeterFare[%d]" type="number" step='any' class="cp_iptxt" placeholder="Km Fare" >
                                                                        <i class="fas fa-dollar-sign"></i>
                                                                    </div>
                                                                    <div class="cp_iptxt" style="width: 15%; margin-left: 5px;" >
                                                                        <input id="baseFare_0" name="baseFare[]" data-name-format="baseFare[%d]" type="number" step='any' class="cp_iptxt" placeholder="Base Fare" >
                                                                        <i class="fas fa-dollar-sign"></i>
                                                                    </div>
                                                                    <div class="cp_iptxt" style="width: 15%; margin-left: 5px;" >
                                                                        <input id="cubicFare_0" name="cubicFare[]" data-name-format="cubicFare[%d]" 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> -->
                                                                    <div class="col" style="padding: 5px; width: 30%; margin-left: 5px;">
                                                                        <button id="plus_k_0" name="plus_0" type="button" class="list_add btn btn-info btn-round"><i class="fas fa-plus"></i></button>
                                                                        <button id="minus_k_0" name="minus_0" type="button" class="list_del btn btn-danger btn-round"><i class="fas fa-minus"></i></button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </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>
                                                           </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">Zones</label>
                                                    <select  class="form-control" name="state" id="state" >
                                                        <option value=""> - Select Zone- </option> 
                                                        @foreach ($states as $state)
                                                            <option value="{{ $state->id }}" >{{ $state->state_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">
                                                    <div id="listPostcode" class="form-group">
                                                        {{-- <div class="listPostcode_var" style="margin: 0; padding: 0; box-shadow: none;">
                                                            <div class="duplicate">
                                                                <select  class="form-control state" name="State[]" data-name-format="State[%d]" id="state_0">
                                                                    <option value=""> - Select Zone- </option> 
                                                                    @foreach ($states as $state)
                                                                        <option value="{{ $state->id }}" >{{ $state->state_name }}</option>
                                                                    @endforeach
                                                                </select>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <input type="text" id="Postcode_0" name="Postcode[]" data-name-format="Postcode[%d]" 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_0" name="PostcodeFare[]" data-name-format="PostcodeFare[%d]" 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_0" name="PostcodeBaseFare[]" data-name-format="PostcodeBaseFare[%d]" 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_0" name="PostcodeCubicFare[]" data-name-format="PostcodeCubicFare[%d]" type="number" step="any" class="cp_iptxt" placeholder="Cubic Fare">
                                                                    <i class="fas fa-dollar-sign"></i>
                                                                </div>
                                                                <div class="col" style="padding: 5px; width: 30%; margin-left: 5px;">
                                                                    <button id="plus_p_0" name="plus_0" type="button" class="listPostcode_add btn btn-info btn-round"><i class="fas fa-plus"></i></button>
                                                                    <button id="minus_p_0" name="minus_0" type="button" class="listPostcode_del btn btn-danger btn-round"><i class="fas fa-minus"></i></button>
                                                                </div>
                                                            </div>
                                                        </div> --}}
                                                        <div class="listPostcode_var" style="margin: 0; padding: 0; box-shadow: none;">
                                                            <div class="duplicate">
                                                                <select  class="form-control state" name="State_input" id="State_input">
                                                                    <option value=""> - Select Zone- </option> 
                                                                    @foreach ($states as $state)
                                                                        <option value="{{ $state->id }}" >{{ $state->state_name }} - ( {{ $state->zone->name }} )</option>
                                                                    @endforeach
                                                                </select>
                                                                <div class="col" style="padding: 5px;"></div>
                                                                <input id="Postcode_input" name="Postcode_input" 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" name="PostcodeFare_input" 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" name="PostcodeBaseFare_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="PostcodeCubicFare_input" name="PostcodeCubicFare_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 name="btnAddPostcode" type="button" class="btn btn-info btn-round btnAddPostcode btn-size" onclick="addPostcode()"><i class="fas fa-plus"></i></button>
                                                            </div>
                                                            <div id="PostcodeList">
                                                                <div id="added_Postcode" >
                                                                    
                                                                </div>
                                                               </div>
                                                        </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>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 " value="{{ old('hourly_rate', 0) }}" placeholder="Hourly Rate" name="hourly_rate" id="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" value="1" name="apply_cubic_rate" id="switchCubic" @checked(old('apply_cubic_rate'))>
                                                        <label for="switchCubic"><span></span></label>
                                                        <div class="swImg"></div>
                                                    </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" >Create
                                            </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>
</div>
@endsection
        
    @push('scripts')
    <script>
        $('#State_input').change(function () { 
            var state_id = this.value;
            // var lvlValue = this.id;
            // lvlValue = lvlValue.replace('state_','');
             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;
                                    $('#Postcode_input').val(postcode);
                             }
                         });
             }else{
                 $('#Postcode_input').val(null); 
                 $('#State_input').val(null);  
             }
         });
     </script>
     <script>
        function changeState(stateId,stateVal)
        {
            // alert(stateVal);
            lvlId = stateId.replace('State_','');
            if(stateVal > 0) {
                 var ajax_url = "{{ url('admin/ajax/state')}}/" + stateVal;
                         $.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;
                                    $('#Postcode_'+lvlId).val(postcode);
                             }
                         });
             }else{
                 $('#Postcode_'+lvlId).val(null); 
                 $('#State_'+lvlId).val(null);  
             }
        }
        
     </script>
    <!-- Dynamic inputs area -->
    <script type="text/javascript">
        // $('#list').addInputArea();
        $('#listFloor').addInputArea();
        // $('#listPostcode').addInputArea();
    </script>

    <!-- Add/Delete Locations -->
    <script>
        function addLocation() {
            var inputAddress = document.getElementById('autocomplete').value;
            if (inputAddress == "") {
                return;
            }

            var divAddressInput = document.getElementById('divAddressInput');
            var divAddedLocations = document.getElementById('divAddedLocations');
            var divAddedLocation = document.getElementById('divAddedLocation');
            var divAddedButton = document.getElementById('divAddedButton');
            
            var locations = document.querySelectorAll('[name="locations[]"]');
            var i = locations.length;
            
            var DeleteBtnCode = '<button id="btnDelete_' + i + '" name="btnAdd" type="button" style="margin-left: 1.9rem;" class="btn btn-danger btn-round" onclick="deleteLocation(' + i + ')"><i class="fas fa-times"></i></button>';
            var LocationCode = '<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 + '">' + DeleteBtnCode;
            divAddedLocation.insertAdjacentHTML('afterbegin', LocationCode);

            document.getElementById('autocomplete').value = "";
        }
        function deleteLocation(i) {
            document.getElementById('location_' + i).remove();
            document.getElementById('btnDelete_' + 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>

    {{-- add km fare --}}
        <script>
            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 == ""  ) {
                    alert('all null');
                    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 = "";
            }
        </script>
    {{-- add km fare --}}

    {{-- postcode add --}}
    <script>
        function addPostcode()
        {
            var State_input = document.getElementById('State_input').value;
            var State_input_Text = $('#State_input option:selected').text();
            var Postcode_input = document.getElementById('Postcode_input').value;
            var PostcodeFare_input = document.getElementById('PostcodeFare_input').value;
            var PostcodeBaseFare_input = document.getElementById('PostcodeBaseFare_input').value;
            var PostcodeCubicFare_input = document.getElementById('PostcodeCubicFare_input').value;
            var State_input_inner_html = document.getElementById('State_input').innerHTML;
            // alert(State_input);
            if (Postcode_input == "" || PostcodeFare_input == ""  || 
            PostcodeBaseFare_input == "" || PostcodeCubicFare_input == "" ) {
                alert('all null');
                // alert(State_input + ' , ' + Postcode_input + ' , ' + PostcodeFare_input + ' , ' + PostcodeBaseFare_input + ' , ' +PostcodeCubicFare_input);
                return;
            }
            var PostcodeCode = document.getElementById('added_Postcode');
            var i = document.querySelectorAll('[name="Postcode[]"]').length + 1;
                
            var PostcodeCode = 
                '<div id= "PostCodeSet_' + i + '" style="display: flex; align-items: center">'
                +'<select  class="form-control" id="State_'+ i + '" name="State[]" onchange="changeState(this.id,this.value)">'
                    +'<option value="'+State_input+'">'+State_input_Text+'</option>'
                +'</select>'
                + '<div class="col" style="padding: 5px;"></div>'
                + '<input id="Postcode_' + i + '" name="Postcode[]" 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[]" 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[]" 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[]" 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="deleteInputField(\'PostCodeSet\',' + i + ')"><i class="fas fa-times"></i></button></div>'
                +'</div>';
                added_Postcode.insertAdjacentHTML('afterbegin', PostcodeCode);

             document.getElementById('State_input').value = "";
             document.getElementById('Postcode_input').value = "";
             document.getElementById('PostcodeFare_input').value = "";
             document.getElementById('PostcodeBaseFare_input').value = "";
             document.getElementById('PostcodeCubicFare_input').value = "";
        }
    </script>
    {{-- postcode add --}}

    <script>
        function deleteInputField(target,i) {
            // alert(target);
            alert(target + '_'+ i);
            
            document.getElementById(target + '_'+ i).remove();
        }
    </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