@extends('layouts.app')
@section('title', 'Stellar | Clients')
@section('content')
<div class="container mt-2">
    @include('app.settings.index')
    <div class="col-lg-12 ">
        <div class="card">
            <div class="card-body">
                <div class="p-0">
                    <table id="client_datatable" class="table table-bordered nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th width="5%">Sl No</th>
                                <th>Company Name</th>
                                <th width="20%">Client Name</th>
                                <th width="20%">Client Type</th>
                                <th width="15%">Address Line 1</th>
                                <th width="10%">Address Line 2</th>
                                <th width="8%">Status</th>
                                <th width="8%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($clientData as $client)
                            <tr>
                                <td>{{ $loop->iteration}}</td>
                                <td>{{ $client->companies->company_name ?? '' }}</td>
                                <td>{{ $client->client_name}}</td>
                                <td>{{ $client->clientTypes->client_type_name ?? ''  }}</td>
                                <td>{{ $client->address_line1}}</td>
                                <td>{{ $client->address_line2}}</td>

                                <td class="text-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox"  class="custom-control-input" id="customSwitch{{ $client->id }}"  value="{{ $client->id }}" onclick="clientStatus(this.value)" @if($client->is_active==1) checked @endif>
                                        <label class="custom-control-label" for="customSwitch{{ $client->id }}">@if($client->is_active==1) Active @else Inactive @endif</label>
                                    </div>
                                </td>
                                <td class="text-center">
                                     <span class="edit_client ml-2" style=" cursor: pointer;" data-id="{{ $client->id }}">
                                        <img class="menuicon tbl_editbtn" src="{{asset('assets/images/edit.svg')}}" >&nbsp;
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- AddingCilent --}}
<div class="modal fade " id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form id="clientForm" name="clientForm" method="post" role="form" enctype="multipart/form-data">
        @csrf
        <!-- Modal Header -->
            <div class="modal-header">
            <h4 class="modal-title">Add Client</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Company Name<span class="text-danger"> * <span></label>
                            <Select required class="form-control select_role" name="company_id" id="company_id">
                                <option selected disabled value="">Select Company</option>
                                @forelse($companyData as $company)
                                <option value="{{$company->id}}"> {{$company->company_name}}</option>
                                @empty
                                @endforelse
                            </Select>
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Cilent Name<span class="text-danger"> * <span></label>
                            <input id="client_name" name="client_name" type="text" class="form-control" autocomplete="off" placeholder="Enter Cilent Name" required>
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Cilent_type</label>
                            <Select required class="form-control select_role" name="client_type_id" id="client_type_id">
                                <option selected disabled value="">Select cilent type</option>
                                @forelse($clientTypeData as $clientType)
                                <option value="{{$clientType->id}}"> {{$clientType->client_type_name}}</option>
                                @empty
                                @endforelse
                            </Select>
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Address 1</label>
                            <input id="address_line1" name="address_line1" type="text" class="form-control" autocomplete="off" placeholder="Enter Address" >
                        </div>
                </div>
                <div class="row mt-1">
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">Address 2</label>
                        <input id="address_line2" name="address_line2" type="text" class="form-control" autocomplete="off" placeholder="Enter Address" >
                    </div>
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">City</label>
                        <input id="city" name="city" type="text" class="form-control" autocomplete="off" placeholder="Enter City" >
                    </div>
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">State</label>
                        <Select required class="form-control select_role" name="state_code" id="state_code">
                            <option selected disabled value="">Select state</option>
                            @foreach ($stateList as $state)
                                <option value="{{ $state->id }}">
                                    {{ $state->short_code }}</option>
                            @endforeach
                        </Select>
                    </div>
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">County</label>
                        <Select required class="form-control select_role" name="county_id" id="county_id">

                        </Select>
                    </div>
                </div>
                <div class="row mt-1">
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">Zip code<span class="text-danger"> * <span></label>
                        <input id="zip" name="zip" type="text" class="form-control" autocomplete="off" placeholder="Enter Zipcode" maxlength="5" >
                    </div>
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">Contact Number</label>
                        <input id="contact_number" name="contact_number" type="text" class="form-control" autocomplete="off" placeholder="(XXX) YYY-ZZZZ" minlength="10" maxlength="19">
                    </div>
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">Logo</label>
                        <input id="logo" name="logo" type="file" class="form-control" autocomplete="off"  accept="image/*">
                    </div>
                    <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">Color One</label>
                        <input type="color" id="cert_color" name="cert_color" class="form-control">
                    </div>
                    {{-- <div class="col-lg-3">
                        <label for="name-input" class="col-form-label">Color Two</label>
                        <input type="color" id="color_2" name="color_2"  class="form-control">
                    </div> --}}
                    <div class="col-lg-3">
                        <br>
                        <div class="mt-3">
                            <input type="checkbox" class="mx-1"  value="1" id="is_active" name="is_active" />
                            <label for="" class="">Is Active ?</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="clientVal();">Create</button>
            </div>
        </form>
      </div>
    </div>
</div>
{{-- Edit Model Cilent --}}
<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit client</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="updateclientfrm" name="updateclientfrm"  data-parsley-validate enctype="multipart/form-data">
                @csrf
                <input  name="id" value="" id="client_id_ed" type="hidden"  />
                <div class="modal-body">
                    <div class="row">
                            <div class="col-lg-3">
                                <label for="name-input" class="col-form-label">Company Name<span class="text-danger"> * <span></label>
                                <Select required class="form-control select_role" name="company_id" id="company_id_ed">
                                    <option selected disabled value="">Select Company</option>
                                    @forelse($companyData as $company)
                                    <option value="{{$company->id}}"> {{$company->company_name}}</option>
                                    @empty
                                    @endforelse
                                </Select>
                            </div>
                            <div class="col-lg-3">
                                <label for="name-input" class="col-form-label">Cilent Name<span class="text-danger"> * <span></label>
                                <input id="client_name_ed" name="client_name" type="text" class="form-control" autocomplete="off" placeholder="Enter Cilent Name" required>
                            </div>
                            <div class="col-lg-3">
                                <label for="name-input" class="col-form-label">Cilent_type</label>
                                <Select required class="form-control select_role" name="client_type_id" id="client_type_id_ed">
                                    <option selected disabled value="">Select cilent type</option>
                                    @forelse($clientTypeData as $clientType)
                                    <option value="{{$clientType->id}}"> {{$clientType->client_type_name}}</option>
                                    @empty
                                    @endforelse
                                </Select>
                            </div>
                            <div class="col-lg-3">
                                <label for="name-input" class="col-form-label">Address 1</label>
                                <input id="address_line1_ed" name="address_line1" type="text" class="form-control" autocomplete="off" placeholder="Enter Address" >
                            </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Address 2</label>
                            <input id="address_line2_ed" name="address_line2" type="text" class="form-control" autocomplete="off" placeholder="Enter Address" >
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">City</label>
                            <input id="city_ed" name="city" type="text" class="form-control" autocomplete="off" placeholder="Enter City" >
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">State</label>
                            <Select required class="form-control select_role" name="state_code" id="state_code_ed">
                                <option selected disabled value="">Select state</option>
                                @foreach ($stateList as $state)
                                <option value="{{ $state->id }}">
                                    {{ $state->short_code }}</option>
                                @endforeach
                            </Select>
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">County</label>
                            <Select required class="form-control select_role" name="county_id" id="county_id_ed">
                                <option selected disabled value="">Select county</option>
                                    @foreach ($countyList as $county)
                                    <option value="{{ $county->id }}">
                                        {{ $county->county_name }}</option>
                                    @endforeach
                            </Select>
                        </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Zip code<span class="text-danger"> * <span></label>
                            <input id="zip_ed" name="zip" type="text" class="form-control" autocomplete="off" placeholder="Enter Zipcode" maxlength="5">
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Contact Number</label>
                            <input id="contact_number_ed" name="contact_number" type="text" class="form-control" autocomplete="off" minlength="10" placeholder="(XXX) YYY-ZZZZ" maxlength="19">
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Logo</label>
                            <input id="logo_ed" name="logo" type="file" class="form-control" autocomplete="off"  accept="image/*">
                            <span id="logo_filename_span"></span>
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Color One</label>
                            <input type="color" id="cert_color_ed" name="cert_color" class="form-control">
                        </div>
                        {{-- <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Color Two</label>
                            <input type="color" id="color_2_ed" name="color_2"  class="form-control">
                        </div> --}}
                        <div class="col-lg-3">
                            <br>
                            <div class="mt-3">
                                <input type="checkbox" class="mx-1"  value="1" id="is_active_ed" name="is_active" />
                                <label for="" class="">Is Active ?</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('script-bottom')
{{-- Js --}}
<script type="text/javascript">
    $(function () {
        @if(Session::has('success'))
        new PNotify({
        title: 'Success',
        delay: 500,
        text:  "{{Session::get('success')}}",
        type: 'success'
        });

        @endif
        @if ($errors->any())
        var err = "";
        @foreach ($errors->all() as $error)

            new PNotify({
            title: 'Error',
            text: "{{$error}}",
            delay: 800,
            type: 'error'
            });
            @endforeach
        @endif
    });

    $("input[name='contact_number']").keyup(function() {
            var phoneValue = $(this).val().replace(/\D/g, "");
            if (phoneValue.length > 10) {
            $(this).val(phoneValue.replace(/^(\d{3})(\d{3})(\d{4})(\d{1,4})$/, "($1) $2-$3 x$4"));
            } else {
            $(this).val(phoneValue.replace(/^(\d{3})(\d{3})(\d{4})$/, "($1) $2-$3"));
            }
        });

        $("input[name='zip']").blur(function() {
            var zipCodeValue = $(this).val().replace(/\D/g, "");
            var paddedZipCode = ("00000" + zipCodeValue).slice(-5);
            $(this).val(paddedZipCode);
        });

    function clientStatus(value) {
        var url = '/clientStatus/' + value;
        var data = {};
        var csrfToken = "{{ csrf_token() }}";

        $.ajax({
        type: 'POST',
        url: url,
        data: data,
        headers: {
            'X-CSRF-Token': csrfToken,
        },
        success: function(response) {
            if(response.message == "Status Changed Successfully!") {
                var label = $('label[for="customSwitch'+ value +'"]');
                if(label.text() == 'Active') {
                    label.text('Inactive');
                } else {
                    label.text('Active');
                }
                new PNotify({
                    title: 'Success',
                    delay: 500,
                    text:  "Status Changed Successfully!",
                    type: 'success'
                });
            } else {
                new PNotify({
                    title: 'Error',
                    text: "An issue has arisen during the update",
                    delay: 800,
                    type: 'error'
                });
            }
        },
        error: function(error) {
            new PNotify({
                title: 'Error',
                text: "An issue has arisen during the update",
                delay: 800,
                type: 'error'
            });
        }
        });
    }
    $(document).ready(function()
    {
        var $tabid=  'tab3';
        $(".odtabs").not("#tab3").addClass('btn-outline-secondary');
        $("#tab3").addClass('btn-secondary');

        $('.modal').on('hidden.bs.modal', function() {
            $(this).find('form')[0].reset();
            $(this).find('form').parsley().reset();
        });

        window.ParsleyValidator
        .addValidator('fileextension', function (value, requirement) {
        var tagslistarr = requirement.split(',');
        var fileExtension = value.split('.').pop();
        var arr=[];
        $.each(tagslistarr,function(i,val){
        arr.push(val);
        });
        if(jQuery.inArray(fileExtension, arr)!='-1') {
        return true;
        } else {
        return false;
        }
    }, 32)
    .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
    $("form").parsley();
        var table = $('#client_datatable').DataTable({
            responsive: true,
            dom: 'l<"toolbar">Bfrtip',
            buttons: [
                'excel'
            ],
            initComplete: function(){
                $("div.toolbar").html('<button id="addCilent" type="button" class="ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("assets/images/add.svg")}}">&nbsp;Add Cilent</button><br />');
            }
        });
    });
    function getCilent(){
        window.location.href = "/client";
    }

    function clientVal(){
        if ($("#clientForm").parsley()) {
            if ($("#clientForm").parsley().validate()) {
                event.preventDefault();
                if ($("#clientForm").parsley().isValid()) {
                    $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ url('/clientInsert') }}",
                    data: new FormData($("#clientForm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        console.log(response.msg);
                        if(response.msg=="Cilent Name Already Exists!") {
                            new PNotify({
                            title: 'Error',
                            text:  response.msg,
                            type: 'error'
                            });
                            return false;
                        } else if(response.msg=="Client added successfully!") {
                            new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 1000);
                        }
                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err+error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 1000
                        });
                    }
                    });
                }
            }
        }
    }


    function clientUpdate(){
        if ($("#clientUpdateForm").parsley()) {
            if ($("#clientUpdateForm").parsley().validate()) {
                event.preventDefault();
                if ($(clientUpdateForm).parsley().isValid()) {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/updateClient') }}",
                        data: new FormData($("#clientUpdateForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err +'<br>' + error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 2000
                            });
                        }
                    });
                }
            }
        }
        return false;
    }

    // Edit client
     $('#client_datatable').on('click','.edit_client',function () {
		var id = $(this).data('id');
		var url = '{{ route("edit_client") }}';
		$.ajax({
			type: "post",
			url: url,
			data: { id:id , _token: '{{csrf_token()}}'},
			success: function(response)
			{
				var res = response;

                $('#client_id_ed').val(res.id);
                $('#company_id_ed').val(res.company_id);
                $('#client_name_ed').val(res.client_name);
                $('#client_type_id_ed').val(res.client_type_id);
                $('#address_line1_ed').val(res.address_line1);
                $('#address_line2_ed').val(res.address_line2);
                $('#city_ed').val(res.city);
                $('#state_code_ed').val(res.state_code);
                $('#contact_number_ed').val(res.contact_number);
                $('#logo_filename_span').text(res.logo);
                $('#county_id_ed').val(res.county_id);
                $('#zip_ed').val(res.zip);
                $('#cert_color_ed').val(res.cert_color);
                // $('#color_2_ed').val(res.color_2);

				if(res['is_active'] == 1) {
					$( "#is_active_ed" ).attr('checked', 'checked');
				} else {
					$( "#is_active_ed" ).removeAttr('checked', 'checked');
				}
				$("#myModalEdit").modal('show');
			}
		});
	});


    $('#updateclientfrm').on('submit', function(event){
		event.preventDefault();
		if($('#updateclientfrm').parsley().isValid()){
			var url = '{{ route("updateClient") }}';
			var formData = new FormData(this);
			$.ajax({
				type: "post",
				url: url,
				data: formData,
                contentType: false,
                processData: false,
				success: function(response) {
					new PNotify({
						title: 'Success',
						text:  response.msg,
						type: 'success'
					});
					setTimeout(function(){  location.reload(); }, 800);
				},
				error:function(response) {
					var err = "";
					$.each(response.responseJSON.errors,function(field_name,error){
						err = err +'<br>' + error;
					});
					new PNotify({
						title: 'Error',
						text:err,
						type: 'error',
						delay: 2000
					});
				}
			});
		}
	});


    $('#state_code').on('change', function () {
        $("#county_id").select2();
        var state_id = $("#state_code").val();
        $("#county_id").html('');
        $.ajax({
            url: "{{url('getCounty')}}",
            type: "POST",
            data: {
                state_id: state_id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (result) {
                $('#county_id').html('<option value="">Select County</option>');
                $.each(result.county, function (key, value) {
                    $("#county_id").append('<option value="' + value
                        .id + '">' + value.county_name + '</option>');
                });
            }
        });
    });

    $('#state_code_ed').on('change', function () {
        $("#county_id_ed").select2();
        var state_id = $("#state_code_ed").val();
        $("#county_id_ed").html('');
        $.ajax({
            url: "{{url('getCounty')}}",
            type: "POST",
            data: {
                state_id: state_id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (result) {
                $('#county_id_ed').html('<option value="">Select County</option>');
                $.each(result.county, function (key, value) {
                    $("#county_id_ed").append('<option value="' + value
                        .id + '">' + value.county_name + '</option>');
                });
            }
        });
    });




</script>
@endpush