@extends('layouts/pos_layout')
@section('title', '| Customer')
@section('content')

    <div class="row add-data-form" style="height:100%">
        <div class="col-md-12">
            <div class="col-md-1"></div>
            <div class="col-md-10 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{ url('pos/viewCustomer/') }}" class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-th-list viewIcon">
                        </i>Customer List</a>
                    @if ($isImportFromExcelStatus == 'true')
                        <a href="javascript:void(0);" onclick="showCustomerExcelModal('Upload Customer Excel Sheet','Save')"
                            class="btn btn-info pull-right addViewBtn"><i
                                class="glyphicon glyphicon-plus-sign addIcon"></i>Upload Customer Excel Sheet</a>
                    @endif
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">Customer</div>
                    </div>
                    <div class="panel-body">

                        {!! Form::open([
                            'url' => '',
                            'enctype' => 'multipart/form-data',
                            'role' => 'form',
                            'class' => 'form-horizontal form-groups',
                        ]) !!}

                        <div class="row">

                            <div class="col-md-12" id="formDiv">


                                <div class="col-md-6">

                                    @if ($is_incentive_type == 1)
                                        <div class="form-group">
                                            {!! Form::label('reference_parent_customer_id', 'Reference Customer:', ['class' => 'col-sm-3 control-label']) !!}
                                            <div class="col-sm-9">
                                                <select name="reference_parent_customer_id"
                                                    id="reference_parent_customer_id" class="form-control custom-select2">
                                                    <option value="">Select Reference Customer</option>
                                                    @if ($reference_customers)
                                                        @foreach ($reference_customers as $reference_customer)
                                                            <option value="{{ $reference_customer->id }}">
                                                                {{ $reference_customer->customer_id_no }}-{{ $reference_customer->name }}
                                                            </option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                <p id='reference_parent_customer_ide' style="max-height:3px;"></p>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="form-group">
                                        {!! Form::label('customer_id_no', 'Customer Id:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('customer_id_no', $customer_id_no, [
                                                'class' => 'form-control',
                                                'id' => 'customer_id_no',
                                                'type' => 'text',
                                                'readonly' => true,
                                            ]) !!}
                                            <p id='customer_id_noe' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        {!! Form::label('type', 'Type:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <span> Installment </span> {!! Form::checkbox('installment', $value = null, true, ['id' => 'installment']) !!}
                                            <span style="padding-left: 10px;"> Cash </span> {!! Form::checkbox('cash', $value = null, false, ['id' => 'cash']) !!}
                                            <p id='typee' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('customer_name', 'Customer Name:*', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('customer_name', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'customer_name',
                                                'type' => 'text',
                                                'placeholder' => 'Enter Customer Name',
                                            ]) !!}
                                            <p id='customer_namee' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('father_name', 'Father Name:', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'father_name_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('father_name', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'father_name',
                                                'type' => 'text',
                                                'placeholder' => 'Enter Father Name',
                                            ]) !!}
                                            <p id='father_namee' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('spouse_name', 'Spouse Name:', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'spouse_name_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('spouse_name', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'spouse_name',
                                                'type' => 'text',
                                                'placeholder' => 'Enter Spouse Name',
                                            ]) !!}
                                            <p id='spouse_namee' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('email', 'Email:', ['class' => 'col-sm-3 control-label', 'id' => 'email_label']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('email', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'email',
                                                'type' => 'text',
                                                'placeholder' => 'Enter Customer Email',
                                            ]) !!}
                                            <p id='emaile' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('mobile_no', 'Phone:', ['class' => 'col-sm-3 control-label', 'id' => 'mobile_no_label']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('mobile_no', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'mobile_no',
                                                'type' => 'text',
                                                'placeholder' => 'Enter Customer Phone No.',
                                            ]) !!}
                                            <p id='mobile_noe' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <span id='present_address_label'>Present Address:</span>
                                    <br><br>

                                    <div class="form-group">
                                        {!! Form::label('present_division_id', 'Division:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::select('present_division_id', $divisions, null, [
                                                'class' => 'form-control',
                                                'id' => 'present_division_id',
                                                'placeholder' => 'Select Division',
                                            ]) !!}
                                            <p id='present_division_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('present_upazila_id', 'Upazila/Thana:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="present_upazila_id" id="present_upazila_id" class="form-control">
                                                <option value="">Select Upazila/Thana</option>
                                            </select>
                                            <p id='present_upazila_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('present_village_id', 'Village:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="present_village_id" id="present_village_id" class="form-control">
                                                <option value="">Select Village</option>
                                            </select>
                                            <p id='present_village_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <span id='permanent_address_label'>Permanent Address:</span>
                                    <br><br>

                                    <div class="form-group">
                                        {!! Form::label('permanent_division_id', 'Division:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::select('permanent_division_id', $divisions, null, [
                                                'class' => 'form-control',
                                                'id' => 'permanent_division_id',
                                                'placeholder' => 'Select Division',
                                            ]) !!}
                                            <p id='permanent_division_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('permanent_upazila_id', 'Upazila/Thana:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="permanent_upazila_id" id="permanent_upazila_id"
                                                class="form-control">
                                                <option value="">Select Upazila/Thana</option>
                                            </select>
                                            <p id='permanent_upazila_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('permanent_village_id', 'Village:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="permanent_village_id" id="permanent_village_id"
                                                class="form-control">
                                                <option value="">Select Village</option>
                                            </select>
                                            <p id='permanent_village_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('image_path', 'Upload Image:', [
                                            'class' => 'col-sm-4 control-label',
                                            'id' => 'image_path_label',
                                        ]) !!}
                                        <div class="col-sm-8">
                                            {!! Form::file('image_path', $value = null, ['class' => 'form-control', 'id' => 'image_path', 'type' => 'file']) !!}
                                            <img width="192" height="200" id="image2" />
                                            <p id='imagee' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-6">

                                    <div class="form-group">
                                        {!! Form::label('branch_id', 'Branch:*', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="branch_id" id="branch_id" class="form-control">
                                                <option value="">Select Branch</option>
                                                @if ($branches)
                                                    @foreach ($branches as $branch)
                                                        <option value="{{ $branch->id }}">{{ $branch->branchCode }} -
                                                            {{ $branch->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <p id='branch_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('national_id', 'National Id:', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'national_id_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('national_id', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'national_id',
                                                'type' => 'text',
                                                'placeholder' => 'Enter Customer National Id.',
                                            ]) !!}
                                            <p id='national_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('date_of_birth', 'Date Of Birth', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'date_of_birth_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('date_of_birth', $value = null, [
                                                'class' => 'form-control',
                                                'style' => 'cursor:pointer',
                                                'id' => 'date_of_birth',
                                                'type' => 'text',
                                                'placeholder' => 'Select Customer Date of Birth',
                                            ]) !!}
                                            <p id='date_of_birthe1' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('marital_status', 'Marital Status:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <span> Single </span> {!! Form::checkbox('single_status', $value = null, true, ['id' => 'single']) !!}
                                            <span style="padding-left: 10px;"> Married </span> {!! Form::checkbox('married_status', $value = null, false, ['id' => 'married']) !!}
                                            <p id='marital_statuse' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('yearly_income', 'Yearly Income:', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'yearly_income_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::number('yearly_income', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'yearly_income',
                                                'type' => 'text',
                                                'min' => 0,
                                                'placeholder' => 'Enter Customer Yearly Income',
                                            ]) !!}
                                            <p id='yearly_incomee' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('description', 'Description:', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'description_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::textarea('description', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'description',
                                                'type' => 'text',
                                                'rows' => '4',
                                                'placeholder' => 'Enter Customer Description',
                                            ]) !!}
                                            <p id='descriptione' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <br><br>

                                    <div class="form-group">
                                        {!! Form::label('present_district_id', 'District:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="present_district_id" id="present_district_id"
                                                class="form-control">
                                                <option value="">Select District</option>
                                            </select>
                                            <p id='present_district_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('present_union_id', 'Union:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="present_union_id" id="present_union_id" class="form-control">
                                                <option value="">Select Union</option>
                                            </select>
                                            <p id='present_union_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('present_remark', 'Remarks:', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'present_remark_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::textarea('present_remark', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'present_remark',
                                                'rows' => 4,
                                                'placeholder' => 'Enter Remarks',
                                            ]) !!}
                                            <p id='present_remarke' style="max-height:3px;"></p>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        {!! Form::label('permanent_district_id', 'District:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="permanent_district_id" id="permanent_district_id"
                                                class="form-control">
                                                <option value="">Select District</option>
                                            </select>
                                            <p id='permanent_district_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('permanent_union_id', 'Union:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="permanent_union_id" id="permanent_union_id"
                                                class="form-control">
                                                <option value="">Select Union</option>
                                            </select>
                                            <p id='permanent_union_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('permanent_remark', 'Remarks:', [
                                            'class' => 'col-sm-3 control-label',
                                            'id' => 'permanent_remark_label',
                                        ]) !!}
                                        <div class="col-sm-9">
                                            {!! Form::textarea('permanent_remark', $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'permanent_remark',
                                                'rows' => 4,
                                                'placeholder' => 'Enter Remark',
                                            ]) !!}
                                            <p id='permanent_remarke' style="max-height:3px;"></p>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-4"></div>
                            <div class="form-group col-md-4 text-center">
                                {!! Form::label('submit', ' ', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-12">
                                    {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                    <a href="{{ url('pos/viewCustomer/') }}" class="btn btn-danger closeBtn">Close</a>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <span id="success" style="color:green; font-size:20px;"></span>
                            </div>
                        </div>

                        {!! Form::close() !!}

                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
    @include('pos/exportImportData/importModalView/excelCustomerModal')
@endsection

<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var disabledDates = '';
        $("#date_of_birth").datepicker({
            // changeMonth: true,
            // changeYear: true,
            // dateFormat: 'dd-mm-yy',
            // onSelect: function()
            // {
            //     var date_of_birth = $("#date_of_birth").val();
            //     if(date_of_birth){ $('#date_of_birthe').hide();}else{$('#date_of_birthe').show();}
            // }

            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy',
            maxDate: new Date(),
            minDate: new Date('1940/01/01'),
            yearRange: '-100y:+1y',
            beforeShowDay: function(date) {
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [disabledDates.indexOf(string) == -1]
            }
        });

        $('#single').change(function() {
            if (!this.checked) document.getElementById("married").checked = true;
            else document.getElementById("married").checked = false;
        });

        $('#married').change(function() {
            if (!this.checked) document.getElementById("single").checked = true;
            else document.getElementById("single").checked = false;
        });

        $('#image_path').change(function(e) {
            var output = document.getElementById('image2');
            output.src = URL.createObjectURL(event.target.files[0]);

            if (output) {
                $('#imagee').hide();
            } else {
                $('#imagee').show();
            }

            const file = this.files[0];
            const fileType = file['type'];
            const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

            if (!validImageTypes.includes(fileType)) {
                $('#image_path').val('');
                $('#imagee').show();
                $('#imagee').empty();
                $('#imagee').append(
                    '<span class="errormsg" style="color:red;">Please Upload Image File Only</span>'
                );

            } else {
                var output = document.getElementById('image2');
                output.src = URL.createObjectURL(event.target.files[0]);
            }

        });

        $("#yearly_income").keyup(function() {
            var val = $(this).val();
            if (val < 0) {
                alert('Yearly income can not be negative amount');
                $(this).val('');
            }
        });

        $.ajax({
            type: 'post',
            url: './checkCustomerConfig',
            data: {
                '_token': $('input[name=_token]').val(),
                'type': 'installment'
            },
            success: function(_response) {
                if (_response.data.father_name == 'required') document.getElementById(
                    "father_name_label").innerHTML = "Father Name:*";
                if (_response.data.spouse_name == 'required') document.getElementById(
                    "spouse_name_label").innerHTML = "Spouse Name:*";
                if (_response.data.yearly_income == 'required') document.getElementById(
                    "yearly_income_label").innerHTML = "Yearly Income:*";
                if (_response.data.date_of_birth == 'required') document.getElementById(
                    "date_of_birth_label").innerHTML = "Date Of Birth:*";
                if (_response.data.email == 'required') document.getElementById("email_label")
                    .innerHTML = "Email:*";
                if (_response.data.image == 'required') document.getElementById("image_path_label")
                    .innerHTML = "Upload Image:*";
                if (_response.data.mobile == 'required') document.getElementById("mobile_no_label")
                    .innerHTML = "Phone:*";
                if (_response.data.national_id == 'required') document.getElementById(
                    "national_id_label").innerHTML = "National Id:*";
                if (_response.data.description == 'required') document.getElementById(
                    "description_label").innerHTML = "Description:*";
                if (_response.data.present_address == 'required') document.getElementById(
                    "present_address_label").innerHTML = "Present Address:*";
                if (_response.data.present_remark == 'required') document.getElementById(
                    "present_remark_label").innerHTML = "Remark:*";
                if (_response.data.permanent_address == 'required') document.getElementById(
                    "permanent_address_label").innerHTML = "Permanent Address:*";
                if (_response.data.permanent_remark == 'required') document.getElementById(
                    "permanent_remark_label").innerHTML = "Remark:*";

            }
        });

        $('#cash').change(function() {
            if (!this.checked) document.getElementById("installment").checked = true;
            else {
                document.getElementById("installment").checked = false;

                $.ajax({
                    type: 'post',
                    url: './checkCustomerConfig',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'type': 'cash'
                    },
                    success: function(_response) {
                        (_response.data.father_name == 'required') ? document
                            .getElementById("father_name_label").innerHTML =
                            "Father Name:*": document.getElementById("father_name_label")
                            .innerHTML = "Father Name:";
                        (_response.data.spouse_name == 'required') ? document
                            .getElementById("spouse_name_label").innerHTML =
                            "Spouse Name:*": document.getElementById("spouse_name_label")
                            .innerHTML = "Spouse Name:";
                        (_response.data.yearly_income == 'required') ? document
                            .getElementById("yearly_income_label").innerHTML =
                            "Yearly Income:*": document.getElementById(
                                "yearly_income_label").innerHTML = "Yearly Name:";
                        (_response.data.date_of_birth == 'required') ? document
                            .getElementById("date_of_birth_label").innerHTML =
                            "Date Of Birth:*": document.getElementById(
                                "date_of_birth_label").innerHTML = "Date Of Birth:";
                        (_response.data.email == 'required') ? document.getElementById(
                                "email_label").innerHTML = "Email:*": document
                            .getElementById("email_label").innerHTML = "Email:";
                        (_response.data.image == 'required') ? document.getElementById(
                                "image_path_label").innerHTML = "Upload Image:*": document
                            .getElementById("image_path_label").innerHTML = "Upload Image:";
                        (_response.data.mobile == 'required') ? document.getElementById(
                                "mobile_no_label").innerHTML = "Phone:*": document
                            .getElementById("mobile_no_label").innerHTML = "Phone:";
                        (_response.data.national_id == 'required') ? document
                            .getElementById("national_id_label").innerHTML =
                            "National Id:*": document.getElementById("national_id_label")
                            .innerHTML = "National Id:";
                        (_response.data.description == 'required') ? document
                            .getElementById("description_label").innerHTML =
                            "Description:*": document.getElementById("description_label")
                            .innerHTML = "Description:";
                        (_response.data.present_address == 'required') ? document
                            .getElementById("present_address_label").innerHTML =
                            "Present Address:*": document.getElementById(
                                "present_address_label").innerHTML = "Present Address:";
                        (_response.data.present_remark == 'required') ? document
                            .getElementById("present_remark_label").innerHTML = "Remark:*":
                            document.getElementById("present_remark_label").innerHTML =
                            "Remark:";
                        (_response.data.permanent_address == 'required') ? document
                            .getElementById("permanent_address_label").innerHTML =
                            "Permanent Address:*": document.getElementById(
                                "permanent_address_label").innerHTML = "Permanent Address:";
                        (_response.data.permanent_remark == 'required') ? document
                            .getElementById("permanent_remark_label").innerHTML =
                            "Remark:*": document.getElementById("permanent_remark_label")
                            .innerHTML = "Remark:";
                    }
                });
            }
        });

        $('#installment').change(function() {
            if (!this.checked) document.getElementById("cash").checked = true;
            else {
                document.getElementById("cash").checked = false;

                $.ajax({
                    type: 'post',
                    url: './checkCustomerConfig',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'type': 'installment'
                    },
                    success: function(_response) {
                        (_response.data.father_name == 'required') ? document
                            .getElementById("father_name_label").innerHTML =
                            "Father Name:*": document.getElementById("father_name_label")
                            .innerHTML = "Father Name:";
                        (_response.data.spouse_name == 'required') ? document
                            .getElementById("spouse_name_label").innerHTML =
                            "Spouse Name:*": document.getElementById("spouse_name_label")
                            .innerHTML = "Spouse Name:";
                        (_response.data.yearly_income == 'required') ? document
                            .getElementById("yearly_income_label").innerHTML =
                            "Yearly Income:*": document.getElementById(
                                "yearly_income_label").innerHTML = "Yearly Name:";
                        (_response.data.date_of_birth == 'required') ? document
                            .getElementById("date_of_birth_label").innerHTML =
                            "Date Of Birth:*": document.getElementById(
                                "date_of_birth_label").innerHTML = "Date Of Birth:";
                        (_response.data.email == 'required') ? document.getElementById(
                                "email_label").innerHTML = "Email:*": document
                            .getElementById("email_label").innerHTML = "Email:";
                        (_response.data.image == 'required') ? document.getElementById(
                                "image_path_label").innerHTML = "Upload Image:*": document
                            .getElementById("image_path_label").innerHTML = "Upload Image:";
                        (_response.data.mobile == 'required') ? document.getElementById(
                                "mobile_no_label").innerHTML = "Phone:*": document
                            .getElementById("mobile_no_label").innerHTML = "Phone:";
                        (_response.data.national_id == 'required') ? document
                            .getElementById("national_id_label").innerHTML =
                            "National Id:*": document.getElementById("national_id_label")
                            .innerHTML = "National Id:";
                        (_response.data.description == 'required') ? document
                            .getElementById("description_label").innerHTML =
                            "Description:*": document.getElementById("description_label")
                            .innerHTML = "Description:";
                        (_response.data.present_address == 'required') ? document
                            .getElementById("present_address_label").innerHTML =
                            "Present Address:*": document.getElementById(
                                "present_address_label").innerHTML = "Present Address:";
                        (_response.data.present_remark == 'required') ? document
                            .getElementById("present_remark_label").innerHTML = "Remark:*":
                            document.getElementById("present_remark_label").innerHTML =
                            "Remark:";
                        (_response.data.permanent_address == 'required') ? document
                            .getElementById("permanent_address_label").innerHTML =
                            "Permanent Address:*": document.getElementById(
                                "permanent_address_label").innerHTML = "Permanent Address:";
                        (_response.data.permanent_remark == 'required') ? document
                            .getElementById("permanent_remark_label").innerHTML =
                            "Remark:*": document.getElementById("permanent_remark_label")
                            .innerHTML = "Remark:";
                    }
                });
            }
        });

        // Present Address Start

        $('#present_division_id').change(function() {
            var divisionId = $(this).val();

            $('#present_district_id').empty();
            $('#present_district_id').append("<option value=''>Select District</option>");

            $('#present_upazila_id').empty();
            $('#present_upazila_id').append("<option value=''>Select Upazila/Thana</option>");

            $('#present_union_id').empty();
            $('#present_union_id').append("<option value=''>Select Union</option>");

            $('#present_village_id').empty();
            $('#present_village_id').append("<option value=''>Select Village</option>");

            if (divisionId) {
                $.ajax({
                    type: 'post',
                    url: './getDistrict',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'divisionId': divisionId
                    },
                    success: function(_response) {
                        $.each(_response.data, function(index, value) {
                            $('#present_district_id').append("<option value='" +
                                value.id + "'>" + value.name + "</option>");
                        });
                    }
                });
            }
        });

        $('#present_district_id').change(function() {
            var divisionId = $('#present_division_id').find(":selected").val();
            var districtId = $(this).val();

            $('#present_upazila_id').empty();
            $('#present_upazila_id').append("<option value=''>Select Upazila/Thana</option>");

            $('#present_union_id').empty();
            $('#present_union_id').append("<option value=''>Select Union</option>");

            $('#present_village_id').empty();
            $('#present_village_id').append("<option value=''>Select Village</option>");


            $.ajax({
                type: 'post',
                url: './getUpazila',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'divisionId': divisionId,
                    'districtId': districtId
                },
                success: function(_response) {
                    $.each(_response.data, function(index, value) {
                        $('#present_upazila_id').append("<option value='" + value
                            .id + "'>" + value.name + "</option>");
                    });
                }
            });

        });

        $('#present_upazila_id').change(function() {
            var divisionId = $('#present_division_id').find(":selected").val();
            var districtId = $('#present_district_id').find(":selected").val();
            var upazilaId = $(this).val();

            $('#present_union_id').empty();
            $('#present_union_id').append("<option value=''>Select Union</option>");

            $('#present_village_id').empty();
            $('#present_village_id').append("<option value=''>Select Village</option>");


            $.ajax({
                type: 'post',
                url: './getUnion',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'divisionId': divisionId,
                    'districtId': districtId,
                    'upazilaId': upazilaId
                },
                success: function(_response) {
                    $.each(_response.data, function(index, value) {
                        $('#present_union_id').append("<option value='" + value.id +
                            "'>" + value.name + "</option>");
                    });
                }
            });

        });

        $('#present_union_id').change(function() {
            var divisionId = $('#present_division_id').find(":selected").val();
            var districtId = $('#present_district_id').find(":selected").val();
            var upazilaId = $('#present_upazila_id').find(":selected").val();
            var unionId = $(this).val();

            $('#present_village_id').empty();
            $('#present_village_id').append("<option value=''>Select Village</option>");

            $.ajax({
                type: 'post',
                url: './getVillage',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'divisionId': divisionId,
                    'districtId': districtId,
                    'upazilaId': upazilaId,
                    'unionId': unionId
                },
                success: function(_response) {
                    $.each(_response.data, function(index, value) {
                        $('#present_village_id').append("<option value='" + value
                            .id + "'>" + value.name + "</option>");
                    });
                }
            });

        });

        // Present Address Stop


        // Permanent Address Start

        $('#permanent_division_id').change(function() {
            var divisionId = $(this).val();

            $('#permanent_district_id').empty();
            $('#permanent_district_id').append("<option value=''>Select District</option>");

            $('#permanent_upazila_id').empty();
            $('#permanent_upazila_id').append("<option value=''>Select Upazila/Thana</option>");

            $('#permanent_union_id').empty();
            $('#permanent_union_id').append("<option value=''>Select Union</option>");

            $('#permanent_village_id').empty();
            $('#permanent_village_id').append("<option value=''>Select Village</option>");

            if (divisionId) {
                $.ajax({
                    type: 'post',
                    url: './getDistrict',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'divisionId': divisionId
                    },
                    success: function(_response) {
                        $.each(_response.data, function(index, value) {
                            $('#permanent_district_id').append("<option value='" +
                                value.id + "'>" + value
                                .name + "</option>");
                        });
                    }
                });
            }
        });

        $('#permanent_district_id').change(function() {
            var divisionId = $('#permanent_division_id').find(":selected").val();
            var districtId = $(this).val();

            $('#permanent_upazila_id').empty();
            $('#permanent_upazila_id').append("<option value=''>Select Upazila/Thana</option>");

            $('#permanent_union_id').empty();
            $('#permanent_union_id').append("<option value=''>Select Union</option>");

            $('#permanent_village_id').empty();
            $('#permanent_village_id').append("<option value=''>Select Village</option>");


            $.ajax({
                type: 'post',
                url: './getUpazila',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'divisionId': divisionId,
                    'districtId': districtId
                },
                success: function(_response) {
                    $.each(_response.data, function(index, value) {
                        $('#permanent_upazila_id').append("<option value='" + value
                            .id + "'>" + value.name + "</option>");
                    });
                }
            });

        });

        $('#permanent_upazila_id').change(function() {
            var divisionId = $('#permanent_division_id').find(":selected").val();
            var districtId = $('#permanent_district_id').find(":selected").val();
            var upazilaId = $(this).val();

            $('#permanent_union_id').empty();
            $('#permanent_union_id').append("<option value=''>Select Union</option>");

            $('#permanent_village_id').empty();
            $('#permanent_village_id').append("<option value=''>Select Village</option>");


            $.ajax({
                type: 'post',
                url: './getUnion',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'divisionId': divisionId,
                    'districtId': districtId,
                    'upazilaId': upazilaId
                },
                success: function(_response) {
                    $.each(_response.data, function(index, value) {
                        $('#permanent_union_id').append("<option value='" + value
                            .id + "'>" + value.name + "</option>");
                    });
                }
            });

        });

        $('#permanent_union_id').change(function() {
            var divisionId = $('#permanent_division_id').find(":selected").val();
            var districtId = $('#permanent_district_id').find(":selected").val();
            var upazilaId = $('#permanent_upazila_id').find(":selected").val();
            var unionId = $(this).val();

            $('#permanent_village_id').empty();
            $('#permanent_village_id').append("<option value=''>Select Village</option>");

            $.ajax({
                type: 'post',
                url: './getVillage',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'divisionId': divisionId,
                    'districtId': districtId,
                    'upazilaId': upazilaId,
                    'unionId': unionId
                },
                success: function(_response) {
                    $.each(_response.data, function(index, value) {
                        $('#permanent_village_id').append("<option value='" + value
                            .id + "'>" + value.name + "</option>");
                    });
                }
            });

        });

        // Permanent Address Stop

        $('form').submit(function(event) {
            event.preventDefault();
            var formData = new FormData($(this)[0]);
            $.ajax({
                type: 'post',
                url: './addCustomerItem',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(_response) {

                    if (_response.errors) {
                        if (_response.errors['reference_parent_customer_id']) {
                            $('#reference_parent_customer_ide').empty();
                            $('#reference_parent_customer_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.reference_parent_customer_id + '</span>');
                        } else {
                            $('#reference_parent_customer_ide').empty();
                        }
                        if (_response.errors['customer_name']) {
                            $('#customer_namee').empty();
                            $('#customer_namee').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.customer_name + '</span>');

                        } else {
                            $('#customer_namee').empty();
                        }
                        if (_response.errors['father_name']) {
                            $('#father_namee').empty();
                            $('#father_namee').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.father_name + '</span>');

                        } else {
                            $('#father_namee').empty();
                        }
                        if (_response.errors['spouse_name']) {
                            $('#spouse_namee').empty();
                            $('#spouse_namee').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.spouse_name + '</span>');

                        } else {
                            $('#spouse_namee').empty();
                        }
                        if (_response.errors['email']) {
                            $('#emaile').empty();
                            $('#emaile').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.email + '</span>');

                        } else {
                            $('#emaile').empty();
                        }
                        if (_response.errors['mobile_no']) {
                            $('#mobile_noe').empty();
                            $('#mobile_noe').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.mobile_no + '</span>');

                        } else {
                            $('#mobile_noe').empty();
                        }
                        if (_response.errors['date_of_birth']) {
                            $('#date_of_birthe').empty();
                            $('#date_of_birthe').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.date_of_birth + '</span>');

                        } else {
                            $('#date_of_birthe').empty();
                        }
                        if (_response.errors['yearly_income']) {
                            $('#yearly_incomee').empty();
                            $('#yearly_incomee').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.yearly_income + '</span>');

                        } else {
                            $('#yearly_incomee').empty();
                        }
                        if (_response.errors['description']) {
                            $('#descriptione').empty();
                            $('#descriptione').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.description + '</span>');

                        } else {
                            $('#descriptione').empty();
                        }
                        if (_response.errors['branch_id']) {
                            $('#branch_ide').empty();
                            $('#branch_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.branch_id + '</span>');

                        } else {
                            $('#branch_ide').empty();
                        }
                        if (_response.errors['national_id']) {
                            $('#national_ide').empty();
                            $('#national_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.national_id + '</span>');

                        } else {
                            $('#national_ide').empty();
                        }
                        if (_response.errors['present_division_id']) {
                            $('#present_division_ide').empty();
                            $('#present_division_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.present_division_id + '</span>');

                        } else {
                            $('#present_division_ide').empty();
                        }
                        if (_response.errors['present_district_id']) {
                            $('#present_district_ide').empty();
                            $('#present_district_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.present_district_id + '</span>');

                        } else {
                            $('#present_district_ide').empty();
                        }
                        if (_response.errors['present_upazila_id']) {
                            $('#present_upazila_ide').empty();
                            $('#present_upazila_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.present_upazila_id + '</span>');

                        } else {
                            $('#present_upazila_ide').empty();
                        }
                        if (_response.errors['present_union_id']) {
                            $('#present_union_ide').empty();
                            $('#present_union_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.present_union_id + '</span>');

                        } else {
                            $('#present_union_ide').empty();
                        }
                        if (_response.errors['present_village_id']) {
                            $('#present_village_ide').empty();
                            $('#present_village_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.present_village_id + '</span>');

                        } else {
                            $('#present_village_ide').empty();
                        }
                        if (_response.errors['permanent_division_id']) {
                            $('#permanent_division_ide').empty();
                            $('#permanent_division_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.permanent_division_id + '</span>');

                        } else {
                            $('#permanent_division_ide').empty();
                        }
                        if (_response.errors['permanent_district_id']) {
                            $('#permanent_district_ide').empty();
                            $('#permanent_district_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.permanent_district_id + '</span>');

                        } else {
                            $('#permanent_district_ide').empty();
                        }
                        if (_response.errors['permanent_upazila_id']) {
                            $('#permanent_upazila_ide').empty();
                            $('#permanent_upazila_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.permanent_upazila_id + '</span>');

                        } else {
                            $('#permanent_upazila_ide').empty();
                        }
                        if (_response.errors['permanent_union_id']) {
                            $('#permanent_union_ide').empty();
                            $('#permanent_union_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.permanent_union_id + '</span>');

                        } else {
                            $('#permanent_union_ide').empty();
                        }
                        if (_response.errors['permanent_village_id']) {
                            $('#permanent_village_ide').empty();
                            $('#permanent_village_ide').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.permanent_village_id + '</span>');

                        } else {
                            $('#permanent_village_ide').empty();
                        }
                        if (_response.errors['image_path']) {
                            if (_response.errors.image_path ==
                                'The Image failed to upload.') {
                                $('#imagee').empty();
                                $('#imagee').append(
                                    '<span class="errormsg" style="color:red;">Please Upload Image File Only</span>'
                                );
                            } else {
                                $('#imagee').empty();
                                $('#imagee').append(
                                    '<span class="errormsg" style="color:red;">' +
                                    _response.errors.image_path + '</span>');
                            }
                        } else {
                            $('#imagee').empty();
                        }
                        if (_response.errors['present_remark']) {
                            $('#present_remarke').empty();
                            $('#present_remarke').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.present_remark + '</span>');

                        } else {
                            $('#present_remarke').empty();
                        }
                        if (_response.errors['permanent_remark']) {
                            $('#permanent_remarke').empty();
                            $('#permanent_remarke').append(
                                '<span class="errormsg" style="color:red;">' + _response
                                .errors.permanent_remark + '</span>');

                        } else {
                            $('#permanent_remarke').empty();
                        }
                    } else {
                        if (_response.responseTitle == 'success') {
                            $("#formDiv").load(location.href + " #formDiv>*", "");
                            toastr.success(_response.responseText);

                            setTimeout(function() {
                                window.location.reload(1);
                            }, 1000);
                        } else {
                            toastr.error(_response.responseText);
                        }
                    }
                },
                error: function(_response) {
                    // Handle error
                    alert(_response.errors);
                }

            });
        });

        $("input").keyup(function() {
            var customer_name = $("#customer_name").val();
            var father_name = $("#father_name").val();
            var spouse_name = $("#spouse_name").val();
            var email = $("#email").val();
            var mobile_no = $("#mobile_no").val();
            var national_id = $("#national_id").val();
            var yearly_income = $("#yearly_income").val();

            if (customer_name) {
                $('#customer_namee').hide();
            } else {
                $('#customer_namee').show();
            }
            if (father_name) {
                $('#father_namee').hide();
            } else {
                $('#father_namee').show();
            }
            if (spouse_name) {
                $('#spouse_namee').hide();
            } else {
                $('#spouse_namee').show();
            }
            if (email) {
                $('#emaile').hide();
            } else {
                $('#emaile').show();
            }
            if (mobile_no) {
                $('#mobile_noe').hide();
            } else {
                $('#mobile_noe').show();
            }
            if (national_id) {
                $('#national_ide').hide();
            } else {
                $('#national_ide').show();
            }
            if (yearly_income) {
                $('#yearly_incomee').hide();
            } else {
                $('#yearly_incomee').show();
            }

        });

        $(document).on('input propertychange', "textarea[name='description']", function() {
            var description = $("#description").val();
            if (description) {
                $('#descriptione').hide();
            } else {
                $('#descriptione').show();
            }
        });

        $(document).on('input propertychange', "textarea[name='present_remark']", function() {
            var present_remark = $("#present_remark").val();
            if (present_remark) {
                $('#present_remarke').hide();
            } else {
                $('#present_remarke').show();
            }
        });

        $(document).on('input propertychange', "textarea[name='permanent_remark']", function() {
            var permanent_remark = $("#permanent_remark").val();
            if (permanent_remark) {
                $('#permanent_remarke').hide();
            } else {
                $('#permanent_remarke').show();
            }
        });

        $('select').on('change', function() {

            var branch_id = $("#branch_id").val();

            var present_division_id = $("#present_division_id").val();
            var present_district_id = $("#present_district_id").val();
            var present_union_id = $("#present_union_id").val();
            var present_upazila_id = $("#present_upazila_id").val();
            var present_village_id = $("#present_village_id").val();

            var permanent_division_id = $("#permanent_division_id").val();
            var permanent_district_id = $("#permanent_district_id").val();
            var permanent_union_id = $("#permanent_union_id").val();
            var permanent_upazila_id = $("#permanent_upazila_id").val();
            var permanent_village_id = $("#permanent_village_id").val();


            if (branch_id) {
                $('#branch_ide').hide();
            } else {
                $('#branch_ide').show();
            }

            if (present_division_id) {
                $('#present_division_ide').hide();
            } else {
                $('#present_division_ide').show();
            }
            if (present_district_id) {
                $('#present_district_ide').hide();
            } else {
                $('#present_district_ide').show();
            }
            if (present_union_id) {
                $('#present_union_ide').hide();
            } else {
                $('#present_union_ide').show();
            }
            if (present_upazila_id) {
                $('#present_upazila_ide').hide();
            } else {
                $('#present_upazila_ide').show();
            }
            if (present_village_id) {
                $('#present_village_ide').hide();
            } else {
                $('#present_village_ide').show();
            }

            if (permanent_division_id) {
                $('#permanent_division_ide').hide();
            } else {
                $('#permanent_division_ide').show();
            }
            if (permanent_district_id) {
                $('#permanent_district_ide').hide();
            } else {
                $('#permanent_district_ide').show();
            }
            if (permanent_union_id) {
                $('#permanent_union_ide').hide();
            } else {
                $('#permanent_union_ide').show();
            }
            if (permanent_upazila_id) {
                $('#permanent_upazila_ide').hide();
            } else {
                $('#permanent_upazila_ide').show();
            }
            if (permanent_village_id) {
                $('#permanent_village_ide').hide();
            } else {
                $('#permanent_village_ide').show();
            }

        });

    });
</script>