@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .dataTables_scrollBody {
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 496px;
        height: 413px !important;
    }
 .row{
        align-items: center;
 }
    
 
    @media only screen and (max-width: 1200px) {
        button#btnLinkSave {
            width: auto !important;
        }
    }

    #datatable tbody td:nth-child(2) {
        white-space: normal;
        word-wrap: break-word;
        min-width: 75px;
    }

    #datatable tbody td:nth-child(3) {
        white-space: normal;
        word-wrap: break-word;
        min-width: 200px;
    }

    #datatable tbody td:nth-child(4) {
        white-space: normal;
        word-wrap: break-word;
        min-width: 300px;
    }
    .scrollable-menu {
        height: auto;
        max-height: 300px;
        overflow-x: hidden;
    }

    .dropdown-checklist {
        padding: 0px 12px;
        line-height: 0px;
    }

    .dropdown-checklist input {
        margin-left: 3px;
    }

    ::-webkit-scrollbar {
        width: 16px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

</style>

<meta name="csrf-token" content="{{ csrf_token() }}" />

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        @include('../reachassuree_admin/comman/header')
        <div class="card">
            <div class="card-body">
                <div class="tab-content">
                    @php
                        $check_privileges_add = userPrivilegesReturn(25, 27);
                        $check_privileges_edit = userPrivilegesReturn(25, 29);
                    @endphp

                    @if (($check_privileges_add == 1) || (Session::get('admin_type') == 0))
                        <form action="{{route('link.save')}}" accept-charset="utf-8" method="POST" id="formlink" class="needs-validation" novalidate>
                            @csrf
                            <div class="row" id="link">
                                <div class="col-md-3">
                                    <input type="hidden" class="form-control" id="link_id" name="link_id" value="0">
                                    <label for="company_name" class="form-label">Company Name</label>
                                    <!-- <input type="text" id="company_name" name="company_name" class=" form-control" placeholder="Company / Gov. Department etc Can Create Here" require> -->
                                    <select class="form-control select2-ajax" name="companyNameId[]" id="companyNameId" placeholder="Company / Gov. Department etc Can Create Here" required></select>
                                </div>
                                <div class="col-md-4">
                                    <label for="link_subject" class="form-label">Link For What?</label>
                                    <input type="text" id="link_subject" name="link_subject" class=" form-control" placeholder="Can Create Subject for Link Uses here" require>
                                </div>
                                <div class="col-md-3">
                                    <label for="related_link" class="form-label">Related link</label>
                                    <div>
                                        <textarea required="" class="form-control" id="related_link" name="related_link" rows="3" placeholder="Can Enter Related Link Here" require></textarea>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="mb-1">
                                        <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                        <button type="submit" class="form-control btn btn-primary" id="btnLinkSave">Save</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    @elseif (($check_privileges_edit == 1) || (Session::get('admin_type') == 0))
                        <div id="edit_form" style="display:none;">
                            <form action="{{route('link.save')}}" accept-charset="utf-8" method="POST" id="formlink" class="needs-validation" novalidate>
                                @csrf
                                <div class="row" id="link">
                                    <div class="col-md-3">
                                        <input type="hidden" class="form-control" id="link_id" name="link_id" value="0">
                                        <label for="company_name" class="form-label">Company Name</label>
                                        <!-- <input type="text" id="company_name" name="company_name" class=" form-control" placeholder="Company / Gov. Department etc Can Create Here" require> -->
                                        <select class="form-control select2-ajax" name="companyNameId[]" id="companyNameId" placeholder="Company / Gov. Department etc Can Create Here" required>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="link_subject" class="form-label">Link For What?</label>
                                        <input type="text" id="link_subject" name="link_subject" class=" form-control" placeholder="Can Create Subject for Link Uses here" require>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="related_link" class="form-label"> Related link</label>
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control" id="related_link" name="related_link" placeholder="Can Enter Related Link Here" require>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="mb-1">
                                            <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <button type="submit" class="form-control btn btn-primary" id="btnLinkSave">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    @endif

                    <div class="row">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element">
                            <thead class="table-light">
                                <tr>
                                    <th>Sr.No</th>
                                    <th>Company Name</th>
                                    <th>Link For What?</th>
                                    <th> Related link</th>
                                    <th>Action</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var ajaxURLLink = '{{route("links.ajax")}}';
    var deleteLink = "{{route('links.delete')}}";
    var status = '{{route("links.status")}}';
    var ajaxURLEditDetail = '{{route("link.edit")}}';
    var ajaxSearch = '{{route("company.search")}}';
    var ajaxUpdateCategory = '{{route("company.update")}}';
    var csrfToken = $("[name=_token]").val();

    //- delete faq
    function linksDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteLink + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function changestatus(id) {
        var link_status = document.getElementById("link_status" + id);
        
        if (link_status.checked) {
            link_status = 1;
        } else {
            link_status = 0;
        }

        $.ajax({
            type: 'GET',
            url: status + "?id=" + id + "&link_status=" + link_status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }
            }
        });
    }

    // Link Ajax
    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLLink,
            "type": "POST",
            "data": {"_token": csrfToken,}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "company_name"},
            {"mData": "link_subject"},
            {"mData": "related_link"},
            {"mData": "action", "bSortable": false},
            {"mData": "status", "bSortable": false},
        ]
    });

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        }

        $('#formlink').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            resetInputForm();
            $('#datatable').DataTable().ajax.reload(null, false);
            $("#btnLinkSave").html("Add");
            $("#edit_form").hide();
        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }

    function resetInputForm() {
        $('#formlink').trigger("reset");
        $('.select2-ajax').val('').trigger("change");
        $("#formlink").removeClass('was-validated');
        $('#link_id').val(0);
    }

    // edit view function for edit
    function editView(id) {
        resetInputForm();

        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });

        $.ajax({
            type: 'GET',
            url: ajaxURLEditDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#edit_form").show();
                    $("#link_id").val(resultData['data']['id']);
                    $("#link_subject").val(resultData['data']['link_subject']);
                    $("#related_link").val(resultData['data']['related_link']);
                    $('#companyNameId').empty();
                    var newOption = new Option("" + resultData['data']['name'] + "", "" + resultData['data']['company_id'] + "", false, false);
                    $('#companyNameId').append(newOption).trigger('change');
                }
                $("#btnLinkSave").html("Update");
            }
        });
    }

    $(document).ready(function() {
        $("#companyNameId").select2({
            tags: true,
            ajax: {
                url: ajaxSearch,
                dataType: 'json',
                delay: 2000,
                data: function(params) {
                    return {
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search & Add for a Category',
        });
    });
</script>
@endsection