@extends('layout.default')

@section('styles')
@endsection
@section('subheaderRightToolbar')
    @PermissionsCan(groupPermissionName('customer.index'))
    <a href="{{ route('customer.index') }}" class="btn btn-light-primary font-weight-bolder mr-2">
        <i class="ki ki-long-arrow-back icon-sm"></i>Back(ESC)</a>
    @endPermissionsCan
    @PermissionsCan(groupPermissionName('customer.store'))
    <div class="btn-group">
        <button type="submit" class="btn btn-primary font-weight-bolder" form="customer_form">
            <i class="ki ki-check icon-sm"></i><u>S</u>ave
        </button>
    </div>
    @endPermissionsCan
@endsection
@section('content')
    <div class="card card-custom card-sticky" id="kt_page_sticky_card">
        <div class="card-body" id="load-section-js">
            <form class="form" id="customer_form" data-method="post" data-url="{{ route('customer.store') }}"
                  enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <div class="accordion accordion-toggle-arrow" id="accordionExample1">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title" data-toggle="collapse" data-target="#collapseOne1">
                                        Basic Details
                                    </div>
                                </div>
                                <div id="collapseOne1" class="collapse show" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Code <b class="text-danger">*</b></label>
                                                    <input id="code"
                                                           class="form-control form-control-solid"
                                                           type="text" name="code" id="code"
                                                           placeholder="Enter Code" readonly/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Name <b class="text-danger">*</b></label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="name"
                                                           id="name"
                                                           placeholder="Enter Name" autofocus/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group d-flex flex-column">
                                                    <label>Party Type<b class="text-danger">*</b></label>
                                                    <div class="btn-group">
                                                        <select name="party_type_id" id="party_type_id"
                                                                class="form-control form-control-lg party_type-select2-js"
                                                                data-action="{{ route('partytype.autocomplete') }}"
                                                                data-placeholder="select">
                                                        </select>
                                                        <a href="{{ route('partytype.create') }}" target="_blank"
                                                           class="btn btn-primary btn-sm"
                                                           type="submit"><i class="flaticon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Supply Type</label>
                                                    <div class="input-group">
                                                        <select class="form-control supply_type-select2-js"
                                                                name="supply_type"
                                                                id="supply_type">
                                                            @foreach(\Modules\Customer\Entities\Customer::SUPPLY_TYPES as $t_key => $type)
                                                                <option value="{{ $t_key }}">{{ $type }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>GST Type</label>
                                                    <div class="input-group">
                                                        <select class="form-control gst_type-select2-js"
                                                                name="gst_type"
                                                                id="gst_type">`
                                                            @foreach(\Modules\Customer\Entities\Customer::GST_TYPES as $t_key => $type)
                                                                <option value="{{ $t_key }}">{{ $type }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group d-flex flex-column">
                                                    <label>Branch<b class="text-danger">*</b></label>
                                                    <div class="btn-group">
                                                        <select name="branch_id" id="branch_id"
                                                                class="form-control form-control-lg branch-select2-js"
                                                                data-action="{{ route('branch.autocomplete') }}"
                                                                data-placeholder="select">
                                                        </select>
                                                        <a href="{{ route('branch.create') }}" target="_blank"
                                                           class="btn btn-primary btn-sm"
                                                           type="submit"><i class="flaticon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Opening Balance</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="opening_balance"
                                                           id="opening_balance"
                                                           placeholder="Enter Name"/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Opening Balance Type</label>
                                                    <div class="input-group">
                                                        <select class="form-control opening_balance_type-select2-js"
                                                                name="opening_balance_type"
                                                                id="opening_balance_type">
                                                            @foreach(\Modules\Customer\Entities\Customer::OPENING_BALANCE_TYPES as $t_key => $type)
                                                                <option value="{{ $t_key }}">{{ $type }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Credit Limit</label>
                                                    <input class="form-control form-control-solid" type="number"
                                                           name="credit_limit"
                                                           id="credit_limit"
                                                           placeholder="Enter Name"/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Status</label>
                                                    <div class="input-group">
                                                        <select class="form-control status-select2-js"
                                                                name="status" id="status">
                                                            @foreach(\Modules\Customer\Entities\Customer::STATUSES as $t_key => $type)
                                                                <option value="{{ $t_key }}">{{ $type }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label> Consider in Account</label>
                                                    <div class="input-group">
                                                        <select class="form-control consider_in_account-select2-js"
                                                                name="consider_in_account" id="consider_in_account">
                                                            @foreach(\Modules\Customer\Entities\Customer::CONSIDER_IN_ACCOUNT as $t_key => $type)
                                                                <option value="{{ $t_key }}">{{ $type }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Aadhar Card</label>
                                                    <div class="input-group">
                                                        <div class="custom-file">
                                                            <input type="file" class="custom-file-input"
                                                                   id="aadhaar_card_file"
                                                                   name="aadhaar_card_file">
                                                            <label class="custom-file-label" for="documents">Choose
                                                                File</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse"
                                         data-target="#collapseTwo1">
                                        Address Details
                                    </div>
                                </div>
                                <div id="collapseTwo1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Address </label>
                                                    <textarea class="form-control form-control-solid" name="address"
                                                              id="address" rows="1"
                                                              placeholder="Enter Address"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group d-flex flex-column">
                                                    <label>Country<b class="text-danger">*</b></label>
                                                    <div class="btn-group">
                                                        <select name="country_id" id="country_id"
                                                                class="form-control form-control-lg country-select2-js"
                                                                data-action="{{ route('countries.autocomplete') }}"
                                                                data-placeholder="select">
                                                        </select>
                                                        <a href="{{ route('countries.create') }}" target="_blank"
                                                           class="btn btn-primary btn-sm"
                                                           type="submit"><i class="flaticon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group d-flex flex-column">
                                                    <label>State<b class="text-danger">*</b></label>
                                                    <div class="btn-group">
                                                        <select name="state_id" id="state_id"
                                                                class="form-control form-control-lg state-select2-js"
                                                                data-action="{{ route('states.autocomplete') }}"
                                                                data-depended="country_id"
                                                                data-placeholder="select">
                                                        </select>
                                                        <a href="{{ route('states.create') }}" target="_blank"
                                                           class="btn btn-primary btn-sm"
                                                           type="submit"><i class="flaticon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group d-flex flex-column">
                                                    <label>City<b class="text-danger">*</b></label>
                                                    <div class="btn-group">
                                                        <select name="city_id" id="city_id"
                                                                class="form-control form-control-lg city-select2-js"
                                                                data-action="{{ route('cities.autocomplete') }}"
                                                                data-depended="state_id"
                                                                data-placeholder="select">
                                                        </select>
                                                        <a href="{{ route('cities.create') }}" target="_blank"
                                                           class="btn btn-primary btn-sm"
                                                           type="submit"><i class="flaticon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Pincode </label>
                                                    <input class="form-control form-control-solid" name="pincode"
                                                           id="pincode" placeholder="Enter Pincode">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Area</label>
                                                    <input class="form-control form-control-solid" name="area"
                                                           id="area" placeholder="Enter Area">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse"
                                         data-target="#collapseThree1">
                                        Contact Details
                                    </div>
                                </div>
                                <div id="collapseThree1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Mobile No <b class="text-danger">*</b></label>
                                                    <input type="text" class="form-control form-control-solid"
                                                           name="mobile_no" id="mobile_no"
                                                           placeholder="Mobile number"
                                                           data-inputmask='"mask": "9999999999"'
                                                           data-mask pattern="^\[0-9]{5}\s[0-9]{5}$" id="mobile_no">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Phone No</label>
                                                    <input type="text" class="form-control form-control-solid"
                                                           name="phone_no" id="phone_no"
                                                           placeholder="Phone number"
                                                           data-inputmask='"mask": "9999999999"'
                                                           data-mask pattern="^\[0-9]{5}\s[0-9]{5}$">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Email <b class="text-danger">*</b></label>
                                                    <input type="email" class="form-control form-control-solid"
                                                           name="email" id="email" placeholder="Enter Email Address">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Website</label>
                                                    <input type="text" class="form-control form-control-solid"
                                                           name="website" id="website" placeholder="Enter Website">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse"
                                         data-target="#collapseFour1">
                                        Bank Details
                                    </div>
                                </div>
                                <div id="collapseFour1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Bank A/C No</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="bank_ac_no" id="bank_ac_no"
                                                           placeholder="Enter Bank A/C No"
                                                           value="" autofocus/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Bank A/C Name</label>
                                                    <input class="form-control form-control-solid text-uppercase"
                                                           type="text"
                                                           name="bank_ac_name" id="bank_ac_name"
                                                           placeholder="Enter Bank A/C Name"
                                                           value=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Bank Name</label>
                                                    <input type="text" class="form-control form-control-solid"
                                                           name="bank_name" id="bank_name"
                                                           placeholder="Enter Bank Name" id="bank_name" value="">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Branch Name</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="branch_name" id="branch_name"
                                                           placeholder="Enter Branch Name"
                                                           value="" autofocus/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>IFSC Code</label>
                                                    <input id="code"
                                                           class="form-control form-control-solid text-uppercase"
                                                           type="text"
                                                           name="ifsc_code" id="ifsc_code"
                                                           placeholder="Enter IFSC Code"
                                                           value=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>MICR Code</label>
                                                    <input type="text" class="form-control form-control-solid"
                                                           name="micr_code" id="micr_code"
                                                           placeholder="Enter MICR Code"
                                                           value=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <label>Cancelled cheque</label>
                                                <div class="input-group">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input"
                                                               id="cancelled_cheque_file"
                                                               name="cancelled_cheque_file">
                                                        <label class="custom-file-label" for="documents">Choose
                                                            File</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <br>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse"
                                         data-target="#collapseFive1">
                                        Contact Person Detail
                                    </div>
                                </div>
                                <div id="collapseFive1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Contact Person Name</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="contact_person" id="contact_person"
                                                           placeholder="Enter Contact Person Name" value=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Contact Person Mobile</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="contact_person_mobile" id="contact_person_mobile"
                                                           placeholder="Enter Contact Person Name" value=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Contact Person Email Id</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="contact_person_email" id="contact_person_email"
                                                           placeholder="Enter Contact Person EmailId" value=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-6">
                                                <div class="form-group mb-1">
                                                    <label>Department</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="department" id="department"
                                                           placeholder="Enter Department" value=""/>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-6">
                                                <div class="form-group mb-1">
                                                    <label>Designation</label>
                                                    <input class="form-control form-control-solid" type="text"
                                                           name="designation" id="designation"
                                                           placeholder="Enter Designation" value=""/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse"
                                         data-target="#collapseSix1">
                                        Tax Detail
                                    </div>
                                </div>
                                <div id="collapseSix1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>GST No</label>
                                                    <input class="form-control form-control-solid text-uppercase"
                                                           type="text" id="gst_no"
                                                           name="gst_no" placeholder="Enter GST No" maxlength="15"/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>GST Certificate</label>
                                                    <div class="input-group">
                                                        <div class="custom-file">
                                                            <input type="file" class="custom-file-input"
                                                                   id="gst_certificate" name="gst_certificate">
                                                            <label class="custom-file-label" for="documents">Choose
                                                                File</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Pan Card No </label>
                                                    <input class="form-control form-control-solid text-uppercase"
                                                           type="text" id="pan_no"
                                                           name="pan_no" placeholder="Enter Pan Card No"
                                                           maxlength="10"/>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>PAN Certificate</label>
                                                    <div class="input-group">
                                                        <div class="custom-file">
                                                            <input type="file" class="custom-file-input"
                                                                   id="pan_certificate"
                                                                   name="pan_certificate">
                                                            <label class="custom-file-label" for="documents">Choose
                                                                File</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>UID</label>
                                                    <input type="text"
                                                           class="form-control form-control-solid text-uppercase"
                                                           id="uid" name="uid">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>ARN</label>
                                                    <input type="text"
                                                           class="form-control form-control-solid text-uppercase"
                                                           id="arn" name="arn">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>A C Type </label>
                                                    <div class="input-group">
                                                        <select class="form-control a_c_type-select2-js"
                                                                name="a_c_type" id="a_c_type">
                                                            @foreach(\Modules\Customer\Entities\Customer::A_C_TYPES as $t_key => $type)
                                                                <option value="{{ $t_key }}">{{ $type }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse"
                                         data-target="#collapseSeven1">
                                        Terms Condition Detail
                                    </div>
                                </div>
                                <div id="collapseSeven1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="tab-content">
                                                    <div class="table-responsive" id="terms_conditions_detail_repeater">
                                                        <table class="table table-sm table-foot-custom table-foot-bg table-bordered"
                                                               id="kt_table_repeater">
                                                            <thead class="thead-light">
                                                            <tr class="text-left">
                                                                <th scope="col" style="min-width: 150px;">Term</th>
                                                                <th scope="col" style="min-width: 150px;">Condition</th>
                                                                <th scope="col" style="min-width: 50px;">Delete</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody data-repeater-list="terms_conditions_detail">
                                                            <tr data-repeater-item data-tr_count="0" class="table_tr">
                                                                <td>
                                                                    <div class="form-group">
                                                                        <select name="terms_conditions_detail[0][t_c_detail_id]"
                                                                                data-count="0" id="t_c_detail_id_0"
                                                                                class="form-control form-control-sm form-control-solid terms_condition-select2-js"
                                                                                data-action="{{ route('termscondition.terms_condition_detail_autocomplete') }}">
                                                                        </select>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="form-group">
                                                                        <textarea class="form-control" data-count="0"
                                                                                  rows="2"
                                                                                  name="terms_conditions_detail[0][condition]"
                                                                                  id="condition_0"
                                                                                  placeholder="Enter condition"></textarea>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <button type="button"
                                                                            class="btn btn-sm btn-clean btn-icon"
                                                                            data-repeater-delete>
                                                                        <i class="fas fa-trash-alt text-danger icon-md"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                            <tfoot>
                                                            <tr>
                                                                <td colspan="3">
                                                                    <button type="button"
                                                                            class="btn btn-block btn-light-primary btn-sm repeater-create-btn-js"
                                                                            data-repeater-create>
                                                                        <i class="ki ki-plus icon-1x"></i> Add More Item
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div class="card discount_details">
                                <div class="card-header">
                                    <div class="card-title collapsed" data-toggle="collapse"
                                         data-target="#collapseEight1">
                                        Dealer Distributor Discount Details
                                    </div>
                                </div>
                                <div id="collapseEight1" class="collapse" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="tab-content">
                                                    <div class="table-responsive"
                                                         id="dealer_distributor_discount_details_repeater">
                                                        <table class="table table-sm table-foot-custom table-foot-bg table-bordered">
                                                            <thead class="thead-light">
                                                            <tr class="text-left text-uppercase">
                                                                <th scope="col" style="min-width: 100px;">Effective
                                                                    Date
                                                                </th>
                                                                <th scope="col" style="min-width: 100px;">Discount(%)
                                                                </th>
                                                                <th scope="col" style="min-width: 70px;">Delete</th>
                                                            </tr>
                                                            </thead>

                                                            <tbody data-repeater-list="dealer_distributor_discount_details"
                                                                   id="dealer_distributor_discount_details_tbl-js">
                                                            <tr data-repeater-item data-tr_count="0" class="table_tr">
                                                                <td>
                                                                    <div class="input-group">
                                                                        <input class="form-control form-control-sm"
                                                                               data-count="0"
                                                                               type="date"
                                                                               name="dealer_distributor_discount_details[0][effective_date]"
                                                                               id="effective_date_0" placeholder=""
                                                                               value=""/>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="input-group">
                                                                        <input class="form-control form-control-sm"
                                                                               data-count="0"
                                                                               type="number"
                                                                               max="100"
                                                                               step="0.01"
                                                                               name="dealer_distributor_discount_details[0][discount_per]"
                                                                               id="discount_per_0" placeholder=""
                                                                               value=""/>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <button type="button"
                                                                            class="btn btn-sm btn-clean delete_other_charges btn-icon"
                                                                            data-repeater-delete><i
                                                                                class="fas fa-trash-alt text-danger icon-md"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                            <tfoot>
                                                            <tr>
                                                                <td colspan="4">
                                                                    <button type="button"
                                                                            class="btn btn-block btn-light-primary btn-sm"
                                                                            data-repeater-create>
                                                                        <i class="ki ki-plus icon-1x"></i> Add More Item
                                                                        (Alt+i)
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>

                            <div class="card distributor_details">
                                <div class="card-header">
                                    <div class="card-title" data-toggle="collapse" data-target="#collapseNine1">
                                        Distributor Details
                                    </div>
                                </div>
                                <div id="collapseNine1" class="collapse show" data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="zone col-md-4">
                                                <div class="form-group d-flex flex-column">
                                                    <label>Zone<b class="text-danger">*</b></label>
                                                    <div class="btn-group btn-group1" role="group"
                                                         aria-label="Button group with nested dropdown">
                                                        <select name="zone_id" id="zone_id"
                                                                class="form-control form-control-solid form-control-lg zone-select2-js"
                                                                data-action="{{ route('zone.autocomplete') }}"
                                                                data-placeholder="select Location">
                                                        </select>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-primary"
                                                                    onclick="window.open('{{ route('zone.create') }}','_blank')"
                                                                    type="button"><i class="flaticon-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="location col-md-4">
                                                <div class="form-group d-flex flex-column">
                                                    <label>Location<b class="text-danger">*</b></label>
                                                    <div class="btn-group btn-group1" role="group"
                                                         aria-label="Button group with nested dropdown">
                                                        <select name="location_id" id="location_id"
                                                                data-depended="zone_id"
                                                                class="form-control form-control-solid form-control-lg location-select2-js"
                                                                data-action="{{ route('get_zone_location.autocomplete') }}"
                                                                data-placeholder="select Location">
                                                        </select>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-primary"
                                                                    onclick="window.open('{{ route('location.create') }}','_blank')"
                                                                    type="button"><i class="flaticon-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="distributor col-md-4">
                                                <div class="form-group d-flex flex-column">
                                                    <label>Dealer/Distributor<b class="text-danger">*</b></label>
                                                    <div class="btn-group btn-group1" role="group"
                                                         aria-label="Button group with nested dropdown">
                                                        <select name="distributor_id" id="distributor_id"
                                                                class="form-control form-control-solid form-control-lg location_distributor_customer-select2-js"
                                                                data-depended="location_id"
                                                                data-action="{{ route('customer.location_distributor_customer_autocomplete') }}"
                                                                data-placeholder="Select Dealer/Distributor">
                                                        </select>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-primary"
                                                                    onclick="window.open('{{ route('customer.create') }}','_blank')"
                                                                    type="button"><i class="flaticon-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript" src="{{ asset('js/modules/customer/create.js?v='.time()) }}"></script>
@endsection