@extends('layouts.app')
@section('title', 'Middleware | Companies')
@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="datatable" class="table table-bordered nowrap"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Sl No</th>
                                    <th>Company Name</th>
                                    <th>Address</th>
                                    <th>City</th>
                                    <th>County</th>
                                    <th>State</th>
                                    <th>Contact No</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($companyData as $company)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $company->company_name }}</td>
                                        <td>{{ $company->address }}</td>
                                        <td>{{ $company->city }}</td>
                                        <td>{{ isset($company->counties->county_name) ? $company->counties->county_name : '' }}
                                        </td>
                                        <td>{{ isset($company->states->short_code) ? $company->states->short_code : '' }}
                                        </td>
                                        <td>{{ $company->contact }}</td>
                                        <td>
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input"
                                                    id="customSwitch{{ $company->id }}" value="{{ $company->id }}"
                                                    onclick="companyStatus(this.value)"
                                                    @if ($company->is_active == 1) checked @endif>
                                                <label class="custom-control-label" for="customSwitch{{ $company->id }}">
                                                    @if ($company->is_active == 1)
                                                        Active
                                                    @else
                                                        Inactive
                                                    @endif
                                                </label>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="edit_company ml-2" style=" cursor: pointer;"
                                                data-id="{{ $company->id }}">
                                                <img class="menuicon tbl_editbtn"
                                                    src="{{ asset('assets/images/edit.svg') }}">&nbsp;
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- AddingCompany --}}
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="companyForm" name="companyForm" method="post" role="form" enctype="multipart/form-data">
                    @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title">Add Company</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Company Name<span class="text-danger"> *
                                        <span></label>
                                <input id="companyname" name="company_name" type="text" class="form-control"
                                    autocomplete="off" placeholder="Enter Company Name" required
                                    data-parsley-trigger="focusout" data-parsley-trigger="keyup"
                                    data-parsley-pattern="^[A-Za-z & . ]*$">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">City<span class="text-danger"> <span></label>
                                <input id="city" name="city" type="text" class="form-control" autocomplete="off"
                                    placeholder="Enter City" data-parsley-trigger="focusout" data-parsley-trigger="keyup"
                                    data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Contact Number<span class="text-danger">
                                        <span></label>
                                <input type="text" class="form-control" id="contactno" name="contact"
                                    placeholder="(XXX) YYY-ZZZZ" maxlength="19" minlength="10" autocomplete="off">
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Photo<span class="text-danger">
                                        <span></label>
                                <input type="file" name="photo" id="photo" class="form-control" data-height="250"
                                    data-parsley-trigger="keyup" accept=".jpg,.png,.svg"
                                    data-parsley-fileextension='jpg,png,svg,jpeg'
                                    data-parsley-errors-container="#startTimeErrorContainer" data-parsley-trigger="change">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">State<span class="text-danger">
                                        <span></label>
                                <select id="state" name="state" type="text" class="form-control" autocomplete="off"
                                    placeholder="Enter State" data-parsley-trigger="focusout"
                                    data-parsley-trigger="keyup">
                                    <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-4">
                                <label for="name-input" class="col-form-label">County<span class="text-danger">
                                        <span></label>
                                <select id="county" name="county" type="text" class="form-control"
                                    autocomplete="off" placeholder="Enter County" data-parsley-trigger="focusout"
                                    data-parsley-trigger="keyup">
                                </select>
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Zipcode<span class="text-danger">
                                        <span></label>
                                <input id="zipcode" name="zipcode" type="text" class="form-control"
                                    autocomplete="off" placeholder="Enter Zipcode" maxlength="5">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Address<span class="text-danger">
                                        <span></label>
                                <input id="address" name="address" type="text" class="form-control"
                                    autocomplete="off" placeholder="Enter Address">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Email<span class="text-danger">
                                        <span></label>
                                <input id="email" name="email" type="email" class="form-control"
                                    autocomplete="off" placeholder="Enter Email">
                            </div>
                            <div class="col-lg-2">
                                <br>
                                <div class="mt-2">
                                    <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="companyVal();">Submit</button>

                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Edit Model Company --}}
    <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 company</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" id="updatecompanyfrm" name="updatecompanyfrm" data-parsley-validate
                    enctype="multipart/form-data">
                    @csrf
                    <input name="id" value="" id="company_id_ed" type="hidden" />
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <label for="compamy-name-input" class="col-form-label">Company<span class="text-danger">
                                        <span></label>
                                <input id="company_name_ed" name="company_name" value="" type="text"
                                    class="form-control" autocomplete="off" placeholder="Enter City"
                                    data-parsley-trigger="focusout" data-parsley-trigger="keyup"
                                    data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">

                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">City<span class="text-danger">
                                        <span></label>
                                <input id="city_ed" name="city" id="city_ed" value="" type="text"
                                    class="form-control" autocomplete="off" placeholder="Enter City"
                                    data-parsley-trigger="focusout" data-parsley-trigger="keyup"
                                    data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Contact Number<span class="text-danger">
                                        <span></label>
                                <input type="text" class="form-control" id="contact_ed" name="contact"
                                    placeholder="(XXX) YYY-ZZZZ" minlength="10" maxlength="19" autocomplete="off">
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Photo<span class="text-danger">
                                        <span></label>
                                <input type="file" value="" name="photo" id="photo_ed" class="form-control"
                                    data-height="250" data-parsley-trigger="keyup" accept=".jpg,.png,.svg"
                                    data-parsley-fileextension='jpg,png,svg,jpeg'
                                    data-parsley-errors-container="#startTimeErrorContainer"
                                    data-parsley-trigger="change">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">State<span class="text-danger">
                                        <span></label>
                                <select id="state_ed" name="state" value="" aria-valuemax="text"
                                    class="form-control" autocomplete="off" placeholder="Enter State"
                                    data-parsley-trigger="focusout" data-parsley-trigger="keyup">
                                    <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-4">
                                <label for="name-input" class="col-form-label">County<span class="text-danger">
                                        <span></label>
                                <select id="county_ed" name="county" type="text" class="form-control"
                                    value="" autocomplete="off" placeholder="Enter County"
                                    data-parsley-trigger="focusout" data-parsley-trigger="keyup">
                                    @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-4">
                                <label for="name-input" class="col-form-label">Zipcode<span class="text-danger">
                                        <span></label>
                                <input id="zip_ed" name="zipcode" type="text" class="form-control"
                                    autocomplete="off" placeholder="Enter Zipcode" maxlength="5">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Address<span class="text-danger">
                                        <span></label>
                                <input id="address_ed" value="" name="address" type="text"
                                    class="form-control" autocomplete="off" placeholder="Enter Address">
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Email<span class="text-danger">
                                        <span></label>
                                <input id="email_ed" value="" name="email" type="email" class="form-control"
                                    autocomplete="off" placeholder="Enter Email">
                            </div>
                            <div class="col-lg-2">
                                <br>
                                <div class="mt-2">
                                    <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>
    </div>
    {{-- 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']").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='zipcode']").blur(function() {
            var zipCodeValue = $(this).val().replace(/\D/g, "");
            var paddedZipCode = ("00000" + zipCodeValue).slice(-5);
            $(this).val(paddedZipCode);
        });


        function companyStatus(value) {
            window.location.href = '/companyStatus/' + value;
        }

        $(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 = $('#datatable').DataTable({
                responsive: true,
                dom: 'l<"toolbar">Bfrtip',
                buttons: [
                    'excel'
                ],
                initComplete: function() {
                    $("div.toolbar").html(
                        '<button id="addCompany" 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 Company</button><br />'
                        );
                }
            });
        });

        function getCompany() {
            window.location.href = "/company";
        }

        function companyVal() {
            if ($("#companyForm").parsley()) {
                if ($("#companyForm").parsley().validate()) {
                    event.preventDefault();
                    if ($("#companyForm").parsley().isValid()) {
                        $.ajax({
                            type: "POST",
                            cache: false,
                            async: false,
                            url: "{{ url('/companyInsert') }}",
                            data: new FormData($("#companyForm")[0]),
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.msg == "Company Name Already Exists!") {

                                    new PNotify({
                                        title: 'Error',
                                        text: response.msg,
                                        type: 'error'
                                    });
                                    return false;
                                } else if (response.msg == "Only Image Allowed!") {

                                    new PNotify({
                                        title: 'Error',
                                        text: response.msg,
                                        type: 'error'
                                    });
                                    return false;
                                } else if (response.msg == "Company 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 companyUpdate() {
            if ($("#companyUpdateForm").parsley()) {
                if ($("#companyUpdateForm").parsley().validate()) {
                    event.preventDefault();
                    if ($(companyUpdateForm).parsley().isValid()) {
                        $.ajax({
                            type: "POST",
                            cache: false,
                            async: false,
                            url: "{{ url('/updateCompany') }}",
                            data: new FormData($("#companyUpdateForm")[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;
        }

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

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


        // Edit company
        $('#datatable').on('click', '.edit_company', function() {
            var id = $(this).data('id');
            var url = '{{ route('edit_company') }}';
            $.ajax({
                type: "post",
                url: url,
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    var res = response;
                    console.log(res);
                    $('#selected_company_name').val(res['company_name']);
                    $("#company_id_ed").val(res['id']);
                    $("#company_name_ed").val(res['company_name']);
                    $("#address_ed").val(res['address']);
                    $("#contact_ed").val(res['contact']);
                    $("#city_ed").val(res['city']);
                    $("#photo_ed").val(res['photo']);
                    $("#state_ed").val(res['state']);
                    $("#county_ed").val(res['county']);
                    $("#email_ed").val(res['email']);
                    $("#zip_ed").val(res['zip']);

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


        $('#updatecompanyfrm').on('submit', function(event) {
            event.preventDefault();
            if ($('#updatecompanyfrm').parsley().isValid()) {
                var url = '{{ route('updateCompany') }}';
                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
                        });
                    }
                });
            }
        });
    </script>

@endsection