@extends('admin.layout.app')
@section('title','Add New Customer')
@push('headerscript')
    <link href="{{asset('theme/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="row">
                        <div class="page-title-box">
                            <h4 class="page-title">Add New Customer</h4>
                            <div class="pull-right">
                                <a href="{{route('customer.index')}}"
                                   class="btn btn-info btn-rounded waves-effect waves-light m-b-2"><i
                                        class=" mdi mdi-keyboard-backspace"></i> Back</a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card-box">
                                <div class="row">
                                    <div class="col-sm-12 col-12">
                                        {!! Form::open(['route'=>array('customer.store'),'onsubmit'=>'BtnSubmit.disabled = true', 'method' => 'post']) !!}
                                        <div class="form-row">
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <input type="hidden" name="page" value="customer">
                                                <label for="customer_code">Customer Code</label>
                                                <input id="customer_code" type="text" class="form-control"
                                                       name="customer_code"
                                                       value="{{$customerCode}}"
                                                       autofocus readonly>
                                                <div class="text-danger">{{$errors->first('customer_code')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="name">Customer Name<span
                                                        class="text-danger">*</span></label>
                                                <input id="name" type="text" class="form-control" name="name"
                                                       value="{{ old('name') }}" autofocus required>
                                                <div class="text-danger">{{$errors->first('name')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="contact_number">Contact No.<span
                                                        class="text-danger">*</span></label>
                                                <input id="contact_number" type="text" class="form-control number"
                                                       name="contact_number"
                                                       value="{{ old('contact_number') }}" required autofocus>
                                                <span style="display: none;" id="contactNumberAlert"
                                                      class="text-danger"><span id="contactNumberMsg"></span> is already taken. please try another one.</span>
                                                <div class="text-danger">{{$errors->first('contact_number')}}</div>
                                            </div>

                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="group_master_id">Customer Group<span
                                                        class="text-danger">*</span></label>
                                                {!! Form::select("group_master_id", [''=>'Select Status']+$status, old("group_master_id"), ['class'=>'form-control', 'required','id'=>'group_master_id'] ) !!}
                                                <div class="text-danger">{{$errors->first('group_master_id')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4 ">
                                                <label for="branch_id">Branch<span class="text-danger">*</span></label>
                                                {!! Form::select("branch_id", \App\Http\Helpers\Helper::getBranchData(), old("branch_id"), ['class'=>'form-control' ,'id' => 'branch_id','required'=>'required']  ) !!}
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="account_group">Account Group Name</label>
                                                <select class="form-control" name="account_group_id"
                                                        id="account_group_id" required>
                                                    @foreach($accountGroups as $key =>$val)
                                                        <option
                                                            value="{{$key}}" {{$val =='Receivable Trade Customers'? 'selected':''}}>{{$val}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="land_line">Land Line</label>
                                                <input id="land_line" type="text" class="form-control"
                                                       name="land_line" value="{{ old('land_line') }}"
                                                       autofocus>
                                                <span style="display: none;" id="landlineAlert"
                                                      class="text-danger"><span id="landlineMsg"></span> is already taken. please try another one.</span>
                                                <div class="text-danger">{{$errors->first('land_line')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="email">Email</label>
                                                <input id="email" type="email" class="form-control" name="email"
                                                       value="{{ old('email') }}" autofocus>
                                                <span style="display: none;" id="emailAlert" class="text-danger"><span
                                                        id="emailMsg"></span> is already taken. please try another one.</span>
                                                <div class="text-danger">{{$errors->first('email')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="vat_number">VAT Registration Number</label>
                                                <input id="vat_number" type="text" class="form-control"
                                                       name="vat_number"
                                                       value="{{ old('vat_number') }}" autofocus>
                                                <div class="text-danger">{{$errors->first('vat_number')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="credit_limit">Credit Limit</label>
                                                <input id="credit_limit" type="text" class="form-control number"
                                                       name="credit_limit" value="{{ old('credit_limit') }}"
                                                       autofocus>
                                                <div class="text-danger">{{$errors->first('credit_limit')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="opening_date">Opening Date<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" name="opening_date" id="datepicker"
                                                       value="{{date('d-m-Y')}}"
                                                       class="form-control" required="" autocomplete="off">
                                                <div class="text-danger">{{$errors->first('opening_date')}}</div>
                                            </div>

                                            <div class="form-group col-xs-12 col-md-4 col-sm-4">
                                                <label for="c_opening_balance">Opening Balance</label>
                                                <input id="c_opening_balance" type="text"
                                                       class="form-control floatnumber"
                                                       name="c_opening_balance"
                                                       value="{{ old('c_opening_balance', 0.0) }}"
                                                       autofocus>
                                                <div class="text-danger">{{$errors->first('c_opening_balance')}}</div>
                                            </div>
                                            <div class="form-group col-xs-12 col-md-4 col-sm-6">
                                                <label for="address">Address</label>
                                                <textarea class="form-control" name="address"
                                                          rows="3">{{ old('address') }}</textarea>
                                                <div class="text-danger">{{$errors->first('address')}}</div>
                                            </div>
                                            <div class="form-group col-xs-4 col-12">
                                                <div class="m-t-10">
                                                    <label for="vat_check">VAT Applicable </label>
                                                    <input type="checkbox" name="vat_check" value="yes" id="vat_check">
                                                    <div class="text-danger">{{$errors->first('vat_check')}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="col-sm-12 col-12 table-responsive">
                                                <table class="table table-striped dataTable" id="datatable">
                                                    <thead>
                                                    <tr class="text-center">
                                                        <th style="width: 18%">Vehicle Brand<span
                                                                class="text-danger">*</span>
                                                        </th>
                                                        <th style="width: 18%">Vehicle Model<span
                                                                class="text-danger">*</span>
                                                        </th>
                                                        <th style="width: 18%">Vehicle Color<span
                                                                class="text-danger">*</span>
                                                        </th>
                                                        <th style="width: 18%">Emirates<span
                                                                class="text-danger">*</span>
                                                        </th>
                                                        <th style="width: 18%">Plate Number<span
                                                                class="text-danger"></span>
                                                        </th>
                                                        <th style="width: 18%">VIN Number<span
                                                                class="text-danger">*</span>
                                                        </th>
                                                        <th style="width: 10%">
                                                            <button type="button"
                                                                    class="btn btn-info btn-sm m-l-10"
                                                                    id="addrow">
                                                                <i class="fa fa-plus"></i>
                                                            </button>
                                                        </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>
                                                            {!! Form::select("vehicle_brand_id[]", [''=>'Select Brand']+$vehicleBrands, old("vehicle_brand_id[]"), ['class'=>'form-control select2' ,'id' => 'vehicle_brand_id1','required'=>'required']  ) !!}
                                                        </td>
                                                        <td>
                                                            {!! Form::select("vehicle_model_id[]", [''=>'Select Model'], old("vehicle_model_id[]"), ['class'=>'form-control select2' ,'id' => 'vehicle_model_id1','required'=>'required']  ) !!}
                                                        </td>
                                                        <td>
                                                            {!! Form::select("vehicle_color_id[]", [''=>'Select Color']+$vehicleColors, old("vehicle_color_id[]"), ['class'=>'form-control select2' ,'id' => 'vehicle_color_id1','required'=>'required']  ) !!}
                                                        </td>
                                                        <td>
                                                            {!! Form::select("emirates[]", [''=>'Select Emirates', 'AUH'=>'AUH', 'AJM'=>'AJM', 'SHJ'=>'SHJ', 'DXB'=>'DXB', 'FUJ'=>'FUJ', 'RAK'=>'RAK', 'UAQ'=>'UAQ', 'Bahrain'=>'Bahrain', 'Kuwait'=>'Kuwait', 'Oman'=>'Oman', 'Qatar'=>'Qatar', 'Saudi Arabia'=>'Saudi Arabia', 'United Arab Emirates'=>'United Arab Emirates'], old("emirates[]"), ['class'=>'form-control select2' ,'id' => 'emirates1','required'=>'required']  ) !!}
                                                        </td>
                                                        <td>
                                                            <input type="text" name="plate_number[]" id="plate1"
                                                                   value="{{old('plate_number')}}"
                                                                    class="form-control">
                                                        </td>
                                                        <td>
                                                            <input type="text" name="vin_number[]" id="vin_number1"
                                                                   value="{{old('vin_number')}}"
                                                                   required class="form-control">
                                                        </td>
                                                        <td>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-sm-12 text-center">
                                                <button type="submit" id="BtnSubmit" name="save"
                                                        class="btn btn-success">
                                                    Submit
                                                </button>
                                            </div>
                                        </div>
                                        {!! Form::close() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footerscript')
    <script src="{{asset('theme/plugins/moment/moment.js')}}"></script>
    <script src="{{asset('theme/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{asset('theme/default/assets/pages/jquery.form-pickers.init.js')}}"></script>
    <script>

        $('.select2').select2({
            tags: true,
        });
        $("#datepicker").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true
        });
        $('.floatnumber').on('input', function () {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });

        $('.number').keyup(function (e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });

        $(window).load(function () {
            $('#branch_id').change();
        });

        $('#branch_id').on('change', function () {
            var branch_id = $('#branch_id').find(":selected").val();
            $.ajax({
                url: "{{route('getBranchVatStatusByBranchID')}}",
                type: "GET",
                data: {
                    branch_id: branch_id,
                },
                success: function (response) {
                    if (response.vat == "yes") {
                        $('#vat_check').prop('checked', true)
                    } else {
                        $('#vat_check').prop('checked', false)
                    }
                }
            })
        });

        $('#vat_number').on('keyup', function () {
            var vat_number = $('#vat_number').val();
            if (vat_number.trim()) {
                $.ajax({
                    url: "{{route('checkVatNoExist')}}",
                    type: "GET",
                    data: {
                        vat_number: vat_number,
                    },
                    success: function (response) {
                        if (response == "yes") {
                            alert('This Vat Registration Number Already exist')
                        }
                    }
                })
            }
        });

        $('#vin_number1').on('keyup', function () {
            var vin_number = $('#vin_number1').val();
            $.ajax({
                url: "{{route('checkVinNoExist')}}",
                type: "GET",
                data: {
                    vin_number: vin_number,
                },
                success: function (response) {
                    if (response == "yes") {
                        alert('This Vin Number Already exist')
                    }
                }
            })
        });


        $('#plate1').on('change', function () {
            var plate = $(this).val();
            $.ajax({
                url: '{{route('checkDuplicatePlateNo')}}',
                type: 'GET',
                data: {
                    plate: plate
                },
                success: function (response) {
                    if (response == "old") {
                        alert("Plate is already registered !");
                    }
                }
            });
        });

        $('#contact_number,#land_line,#email').keyup(function () {
            $('#contactNumberAlert,#landlineAlert,#emailAlert').hide();
            $('#contactNumberMsg,#landlineMsg,#emailMsg').text('');
            $('#BtnSubmit').attr('disabled', false);
        });
        $('#contact_number').on('change', function () {
            var value = $(this).val();
            var inputType = "mobile";
            if (value != '') {
                checkDuplicate(value, inputType);
            }
        });
        $('#land_line').on('change', function () {
            var value = $(this).val();
            var inputType = "land_line";
            if (value != '') {
                checkDuplicate(value, inputType);
            }
        });
        $('#email').on('change', function () {
            var value = $(this).val();
            var inputType = "email";
            if (value != '') {
                checkDuplicate(value, inputType);
            }
        });

        function checkDuplicate(value, inputType) {
            $.ajax({
                url: '{{route('customer.checkDuplicate')}}',
                type: 'GET',
                data: {
                    value: value,
                    inputType: inputType,
                },
                success: function (response) {
                    if (response['customer'] != null) {
                        if (response['inputType'] == "mobile") {
                            $('#contact_number').val('');
                            $('#contactNumberMsg').text('contact number');
                            $('#contactNumberAlert').show();
                            $('#BtnSubmit').attr('disabled', true);
                        } else if (response['inputType'] == "land_line") {
                            $('#land_line').val('');
                            $('#landlineMsg').text('land line');
                            $('#landlineAlert').show();
                            $('#BtnSubmit').attr('disabled', true);
                        } else {
                            $('#contact_number').val('');
                            $('#emailMsg').text('email');
                            $('#emailAlert').show();
                            $('#BtnSubmit').attr('disabled', true);
                        }
                    }
                }
            });
        }

        $('select[id^=vehicle_brand_id]').on('change', function () {
            var lastnum = $(this).attr('id').slice(-1);
            var brand_id = $('#vehicle_brand_id' + lastnum).val();
            $.ajax({
                url: '{{route('getVehicleModelByBrand')}}',
                type: 'GET',
                data: {
                    brand_id: brand_id
                },
                success: function (response) {
                    $('#vehicle_model_id' + lastnum).empty();
                    $('#vehicle_model_id' + lastnum).append('<option value="">Select Model</option>');
                    $.each(response, function (key, value) {
                        $('#vehicle_model_id' + lastnum).append($("<option></option>")
                            .attr("value", key)
                            .text(value));
                    });
                }
            });
        });

        var i = 2;
        //  'Oman', 'Qatar', 'Saudi Arabia', 'United Arab Emirates'
        $("#addrow").on('click', function () {
            var col = "<tr>";
            col += '<td><select name="vehicle_brand_id[]"  id="vehicle_brand_id' + i + '" class="form-control" required="">' +
                '<option value="">Select Brand</option>@foreach($vehicleBrands as $row => $value)<option value="{{$row}}">{{$value}}</option>@endforeach
                    </select></td>';
            col += '<td><select name="vehicle_model_id[]"  id="vehicle_model_id' + i + '" class="form-control" required="">' +
                '<option value="">Select Model</option>@foreach($vehicleModels as $row => $value)<option value="{{$row}}">{{$value}}</option>@endforeach
                    </select></td>';
            col += '<td><select name="vehicle_color_id[]"  id="vehicle_color_id' + i + '" class="form-control" required="">' +
                '<option value="">Select Color</option>@foreach($vehicleColors as $row => $value)<option value="{{$row}}">{{$value}}</option>@endforeach
                    </select></td>';
            col += '<td><select name="emirates[]" id="emirates' + i + '" class="form-control" required="">' +
                '<option value="">Select Emirates</option><option value="AUH">AUH</option><option value="AJM">AJM</option><option value="SHJ">SHJ</option><option value="DXB">DXB</option><option value="FUJ">FUJ</option><option value="RAK">RAK</option><option value="UAQ">UAQ</option><option value="Bahrain">Bahrain</option><option value="Kuwait">Kuwait</option><option value="Oman">Oman</option><option value="Qatar">Qatar</option><option value="Saudi Arabia">Saudi Arabia</option><option value="United Arab Emirates">United Arab Emirates</option></select></td>';
            col += '<td><input type="text" name="plate_number[]" id="plate' + i + '" class="form-control" > </td>';
            col += '<td><input type="text" name="vin_number[]" id="vin_number' + i + '" class="form-control" required> </td>';
            col += '<td><button class="btn btn-danger btn-sm" id="deleteRow" type="button"><i class="fa fa-trash"></i></button></td>';
            $("table#datatable").append(col);
            i++;

            $('select[id^=vehicle_brand_id]').on('change', function () {
                var lastnum = $(this).attr('id').slice(-1);
                var brand_id = $('#vehicle_brand_id' + lastnum).val();
                $.ajax({
                    url: '{{route('getVehicleModelByBrand')}}',
                    type: 'GET',
                    data: {
                        brand_id: brand_id
                    },
                    success: function (response) {
                        $('#vehicle_model_id' + lastnum).empty();
                        $('#vehicle_model_id' + lastnum).append('<option value="">Select Model</option>');
                        $.each(response, function (key, value) {
                            $('#vehicle_model_id' + lastnum).append($("<option></option>")
                                .attr("value", key)
                                .text(value));
                        });
                    }
                });
            });

            $('input[id^=plate]').on('change', function () {
                var lastnum = $(this).attr('id').slice(-1);
                var plate = $('#plate' + lastnum).val();
                $.ajax({
                    url: '{{route('checkDuplicatePlateNo')}}',
                    type: 'GET',
                    data: {
                        plate: plate
                    },
                    success: function (response) {
                        if (response == "old") {
                            alert("Plate is already registered !");
                        }
                    }
                });
            });

            $('input[id^=vin_number]').on('keyup', function () {
                var vin_number = $(this).val();
                $.ajax({
                    url: "{{route('checkVinNoExist')}}",
                    type: "GET",
                    data: {
                        vin_number: vin_number,
                    },
                    success: function (response) {
                        if (response == "yes") {
                            alert('This Vin Number Already exist')
                        }
                    }
                })
            });

        });

        $("table#datatable").on("click", "#deleteRow", function (event) {
            $(this).closest("tr").remove();
        });
    </script>
@endpush