@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    .row{
        align-items: center;
    }
    .dataTables_scrollBody {
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 496px;
        height: 413px !important;
    }
    .scrollable-menu {
        height: auto;
        max-height: 400px;
        overflow-x: hidden;
    }

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

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

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

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

    .pos-middle {
        vertical-align: middle;
    }

    .boderWidth {
        border-bottom-width: 0 !important;
    }

    @media only screen and (max-width: 575px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }
</style>
<div class="page-content">
    <div class="container-fluid">
         <!-- start page title -->
         @include('../reachassuree_admin/comman/header')
         <!-- end page title -->        
       
        <form action="{{route('new.video.url.save')}}" method="POST" id="formAddVideoURL" class="needs-validation" novalidate enctype="multipart/form-data">
            @csrf
            <input type="hidden" class="form-control" id="id" name="id" value="">

            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="main_tab_name" class="form-label">Select Main Tab*</label>
                        <select class="form-control select2-ajax" id="main_tab_name" name="main_tab_name" required></select>
                        <div class="invalid-feedback">This value is required.</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="sub_tab_name" class="form-label">Select Sub Tab</label>
                        <select class="form-control select2-ajax" id="sub_tab_name" name="sub_tab_name"></select>
                        <div class="invalid-feedback">This value is required.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="video_url" class="form-label">Video URL*</label>
                        <input type="text" class="form-control" id="video_url" name="video_url" placeholder="Enter video url" value="" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="title" class="form-label">Title</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="Enter title" value="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <input type="text" class="form-control" id="description" name="description" placeholder="Enter description" value="">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-10">
                    <div class="mb-3">
                        <label for="usedfull_links" class="form-label">UsedFull Links</label>
                        <input type="text" class="form-control" name="usedfull_links" id="usedfull_links" placeholder="Enter links" value="">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="mb-3">
                        <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <button type="submit" class="form-control btn btn-primary" id="btnAddURL">Insert</button>
                    </div>
                </div>
            </div>
        </form>
        
        <br>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">  
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Action</th>
                                    <th>Id</th>
                                    <th>Main Tab Name</th>
                                    <th>Sub Tab Name</th>
                                    <th>Video URL</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>UsedFull Links</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/kendo.all.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var csrfToken=$("[name=_token]").val();
    var ajaxURLGetVideoURLs = "{{route('get.video.urls.ajax')}}";
    var ajaxSearchParentTab = "{{route('search.parent.tab')}}";
    var ajaxSearchSubTab = "{{route('search.sub.tab')}}";
    var ajaxURLVideoURLsDetail = "{{route('edit.video.url')}}";
    var deleteVideoURL = "{{route('delete.video.url')}}";

    $(document).ready(function(){        
        $("#main_tab_name").select2({
            ajax: {
                url: ajaxSearchParentTab,
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search_value: params.term, // search 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 for main tab name',
        });

        $("#sub_tab_name").on("select2:open", function(e) {
            if (!$("#main_tab_name option:selected").length) {
                toastr.error("Please select main tab name first.");
            }
        });

        $("#sub_tab_name").select2({
            ajax: {
                url: ajaxSearchSubTab,
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        "parent_id":function(){return $("#main_tab_name").val();},
                        search_value: params.term, // search 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 for sub tab name',
        });        
        
    });

    function resetInputForm(){
        $('#formAddVideoURL').trigger("reset").removeClass('was-validated');
        $("#main_tab_name").empty().trigger("change");
        $("#sub_tab_name").empty().trigger("change");
        $("#id").val('');
    }

    function editView(id) {
        resetInputForm();

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

        $.ajax({
            type: 'GET',
            url: ajaxURLVideoURLsDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    var newOption = new Option("" + resultData['data']['main_tab_name'] + "", "" + resultData['data']['main_tab_id'] + "", false, false);
                    $('#main_tab_name').append(newOption).trigger('change');

                    if(resultData['data']['sub_tab_name']){
                        var newOption = new Option("" + resultData['data']['sub_tab_name'] + "", "" + resultData['data']['sub_tab_id'] + "", false, false);
                        $('#sub_tab_name').append(newOption).trigger('change');
                    }

                    $("#id").val(resultData['data']['id']);
                    $("#video_url").val(resultData['data']['url']);
                    $("#title").val(resultData['data']['title']);
                    $("#description").val(resultData['data']['description']);
                    $("#usedfull_links").val(resultData['data']['usedfull_urls']);

                    $("#btnAddURL").html("Update");
                }else{
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }

    function deleteView(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: deleteVideoURL + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }else{
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }

       
    var table=$('#datatable').DataTable({
      "aoColumnDefs": [{ "bSortable": false}],
      "order":[[ 0, 'desc']],
      "scrollX": true,
      "processing": true,
      "serverSide": true,
      "scrollY": function() {return $(window).height() - 250;},
      "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": ajaxURLGetVideoURLs,
        "type": "POST",
         "data": {"_token": csrfToken}
      },
      "aoColumns" : [
        {"mData" : "action"},
        {"mData" : "id"},
        {"mData" : "main_tab_name"},
        {"mData" : "sub_tab_name"},
        {"mData" : "video_url"},
        {"mData" : "title" },
        {"mData" : "description"},
        {"mData" : "usedfull_links"},
      ]
    });

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest,
            success: showResponse 
        };

         $('#formAddVideoURL').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);
            $("#btnAddURL").html('Insert');

        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        } 
    }
</script>
@endsection