@extends('layout')
@section('content')
<div class="container">
    <div class="row mt-4">
        <div class="col">
            <h1>{{$companyDetails['company_name']}}</h1>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col">
            <h1>Filing List</h1>
        </div>
    </div>
    <div class="row mt-4 mb-3">
        <label class="mb-2">Fliter By Category:</label>
        <div class="col">
            <div class="d-inline-flex">
                <div class="me-2">
                    <input class="form-check-input" type="checkbox" value="accounts" id="accounts" name="category[]">
                    <label class="form-check-label" for="accounts">Accounts</label>
                </div>
                <div class="me-2">
                    <input class="form-check-input" type="checkbox" value="capital" id="capital" name="category[]">
                    <label class="form-check-label" for="capital">Capital</label>
                </div>
                <div class="me-2">
                    <input class="form-check-input" type="checkbox" value="charges" id="charges" name="category[]">
                    <label class="form-check-label" for="charges">Charges</label>
                </div>
                <div class="me-2">
                    <input class="form-check-input" type="checkbox" value="annual-return" id="annual-return" name="category[]">
                    <label class="form-check-label" for="annual-return">Confirmation statements / Annual returns</label>
                </div>
                <div class="me-2">
                    <input class="form-check-input" type="checkbox" value="incorporation" id="incorporation" name="category[]">
                    <label class="form-check-label" for="incorporation">Incorporation</label>
                </div>
                <div class="me-2">
                    <input class="form-check-input" type="checkbox" value="officers" id="officers" name="category[]">
                    <label class="form-check-label" for="officers">Officers</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered" id="filingTable">
                <thead>
                    <tr>
                        <th>
                            Date
                        </th>
                        <th>
                            Type
                        </th>
                        <th>
                            Category
                        </th>
                        <th>
                            Description
                        </th>
                        <th>
                            Download PDF
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
@push('javascript')
<script>
    $('input[name^="category[]"]').on('change',function() {
        fetchTable();
    });
    function formatDate(date){
        let d = new Date(date);
        let options = { year: 'numeric', month: 'numeric', day: 'numeric' };
        d = d.toLocaleDateString("en-GB", options)
        return d;
    }
    function fetchTable(){

        $('#filingTable').DataTable().destroy();
        let category = $('input[name^="category[]"]:checked').map(function() {
                return $(this).val();
        }).get();
        let url = '{{url("/filingHistoryList/")."/".$companyDetails["company_number"]}}';

        new DataTable('#filingTable', {
            ajax:{
                url: url,
                data:{category:category},
                error: function(){
                    $(".users-error").html("");
                    $("#filingTable").append('<tbody class="users-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');

                }
            },
            processing: true,
            serverSide: true,
            lengthChange: false,
            searching: false,
            ordering: false,
            language:{
                "infoFiltered": ""
            },
            columns:[
                { data: 'date' },
                { data: 'type' },
                { data: 'category' },
                { data: 'description' },
                { data: 'links.document_metadata' },
            ],
            "columnDefs": [
                {
                    "targets": 0,
                    "render": function(data, type, row, meta){
                        return formatDate(data);
                    }
                },
                {
                    "targets": 4,
                    "render": function(data, type, row, meta){

                        if(data!= undefined)
                        {
                            return `<button class="btn btn-primary download-link" data-link="${data}">Download</button> (${row.pages} pages)`;
                        }else{
                            return '';
                        }

                    }
                }
            ]
        });
    }
    $(document).on('click','.download-link',function(){
        link = $(this).attr('data-link');
        $.ajax({
            type: "POST",
            url: "{{url('/downloadPDF')}}",
            cache: false,
            data:{
                "_token": "{{ csrf_token() }}",
                link:link
            },
            xhrFields: {
                responseType: 'blob' // This tells jQuery to handle the response as a blob
            },
            success:function(response){
                console.log(response);
                var blob=new Blob([response]);
                var link=document.createElement('a');
                link.href=window.URL.createObjectURL(blob);
                link.download="company_house.pdf";
                link.click();
                link.remove();
            },
            error:function(response){
                console.log(response);
            }
        });
    });
    $(document).ready(function(){
        fetchTable()
    });

</script>
@endpush