@extends('layouts.app')
@section('title', 'Middleware | Clients')
@section('content')
    <div class="container-fluid 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