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

<style>
    .popup {
        position: absolute;
        padding: 3px 6px;
        background-color: #deebff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 99;
        right: -150px;
        font-size: 12px;
        width: 150px;
        max-width: 250px;
        color: black;
        white-space: normal;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">
                <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="Back Button" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
            </h4>
            <div class="col-md-1">
                <div class="page-title-right">
                    <a href="{{ route('upload.client.document') }}" class="btn btn-primary px-4 w-md form-control"><i class="bx bx-plus font-size-16 align-middle me-2"></i>Add</a>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        <!-- start row -->
        <div class="row" id="card">
            <div class="card">
                <div class="col-md-12 float-end pt-3">
                    <div class="float-end">
                        <button class="btn clearSearch tooltipMsg" onclick="return clearSearch();" type="button"><span class="mdi mdi-brush"></span><span class="tooltiptext">Clear Search Data</span></button>
                        <button class="btn openFullScreen tooltipMsg me-3" onclick="return openFullScreen();" type="button"><span class="mdi mdi-arrow-expand-all"></span><span class="tooltiptext">Open Full Screen</span></button>
                    </div>
                </div>
                <div class="card-body">
                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-hover nowrap w-100 table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th>Action</th>
                                    <th>Status</th>
                                    <th>Id<br><input type="text" class="form-control" name="id" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Family Group<br><input type="text" class="form-control" name="group" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Full Name<br><input type="text" class="form-control" name="full_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Document Type<br><input type="text" class="form-control" name="document_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Document Name<br><input type="text" class="form-control" name="document_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Document<br><input type="text" class="form-control" name="document" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                    <th>Document Number<br><input type="text" class="form-control" name="document_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Due Date<br><input type="text" class="form-control" name="due_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Remark<br><input type="text" class="form-control" name="remark" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Created By<br><input type="text" class="form-control" name="created_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Modified By<br><input type="text" class="form-control" name="modified_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>    
</div>

@include('../reachassuree_agent/master/comman/remaining-popup')

@endsection

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

<script type="text/javascript">
    var ajaxURLGetClientDocuments = "{{ route('client.documents.ajax') }}";
    var changeClientDocumentStatusURL = "{{ route('change.client.document.status') }}";
    var deleteDocument = "{{ route('delete.client.document') }}";
    var percentage = "{{ $data['percentage'] }}";
    var remaining_title = "{{ $data['remaining_title'] }}";
    var remaining_message = "{{ $data['remaining_message'] }}";
    var csrfToken = $("[name=_token").val();
    var inputNames = ['id', 'group', 'full_name', 'document_type', 'document_name', 'document', 'document_number', 'due_date', 'remark', 'created_by', 'modified_by'];

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}],
        "order": [[2, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 400; },
        "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": ajaxURLGetClientDocuments,
            "type": "POST",
            "data": { "_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "action", "bSortable": false},
            {"mData": "status", "bSortable": false},
            {"mData": "id"},
            {"mData": "group"},
            {"mData": "full_name"},
            {"mData": "document_type"},
            {"mData": "document_name"},
            {"mData": "document"},
            {"mData": "document_number"},
            {"mData": "due_date"},
            {"mData": "remark"},
            {"mData": "created_by"},
            {"mData": "modified_by"},
        ]
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();

        if(responseData['recordsTotal'] == 0){
            $('#dropdownMenuButton1').hide();
        } 
    });
    
    if(percentage != '' && percentage != 100){
        setTimeout(function() {
            expireMessage();
        }, 1000);
    }

    inputNames.forEach(function(id, index) {
        $('input[name="' + id + '"]').click(function(event) {
            event.stopPropagation();
        });

        $('input[name="' + id + '"]').on('keyup input', function() {
            table.columns(index + 1).search(this.value).draw();
        });
    });
    
    $('#remainMessageModal').hide();

    function expireMessage() {
        $('#remainMessageModal').modal('show');
        $('#remainHeading').text(remaining_title);
        $('#remainContent').text(remaining_message);
    }

    function changeStatus(id) {
        var clienDocumentStatus = document.getElementById("client_document" + id);
        if (clienDocumentStatus.checked) {
            clienDocumentStatus = 1;
        } else {
            clienDocumentStatus = 0;
        }

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

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

    function downloadDoc(id, document_number) {
        var ajaxURL = "{{ route('download.client.document') }}";

        $.ajax({
            url: ajaxURL + "?id=" + id + "&document_number=" + document_number,
            dataType: 'json', // set response data type
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    // if file is found, trigger the download
                    // var downloadLink = document.createElement('a');
                    // downloadLink.href = resultData['download_url'];
                    // downloadLink.download = resultData['file_name'];
                    // downloadLink.click();
                } else {
                    toastr["error"](resultData['msg']);
                }
            },
            error: function(xhr, status, error) {
                toastr["error"](xhr.responseJSON['message']);
            }
        });
    }

    function openFullScreen() {
        var element = document.getElementById("card");

        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    function clearSearch() {
        $('.custom-select option:first').prop('selected', true);

        for (var i = 0; i < inputNames.length; i++) {
            $('[name="' + inputNames[i] + '"]').val('');
        }
        
        table.search('').columns().search('').draw();
    }   

</script>
@endsection