@extends('new-layout')
@section('content')
<div class="container-fluid">
    <div class="row mt-4 m-auto">
        <div class="col-md-12 m-auto">
            <div class="card">
                <div class="card-header"><h5>Company Details ({{$companyDetails['company_name']}}) ({{$companyDetails['company_number']}})</h5></div>
                <div class="card-body">
                    <!-- Tabs navs -->
                    <ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
                        <li class="nav-item" role="presentation">
                        <a
                            data-mdb-tab-init
                            class="nav-link active fs-6"
                            id="ex1-tab-1"
                            href="#ex1-tabs-1"
                            role="tab"
                            aria-controls="ex1-tabs-1"
                            aria-selected="true"
                            >Overview</a
                        >
                        </li>
                        <li class="nav-item" role="presentation">
                        <a
                            data-mdb-tab-init
                            class="nav-link fs-6"
                            id="ex1-tab-2"
                            href="#ex1-tabs-2"
                            role="tab"
                            aria-controls="ex1-tabs-2"
                            aria-selected="false"
                            >Filing History</a
                        >
                        </li>
                        <li class="nav-item" role="presentation">
                        <a
                            data-mdb-tab-init
                            class="nav-link fs-6"
                            id="ex1-tab-3"
                            href="#ex1-tabs-3"
                            role="tab"
                            aria-controls="ex1-tabs-3"
                            aria-selected="false"
                            >People</a
                        >
                        </li>
                        <li class="nav-item" role="presentation">
                            <a
                                data-mdb-tab-init
                                class="nav-link fs-6"
                                id="ex1-tab-4"
                                href="#ex1-tabs-4"
                                role="tab"
                                aria-controls="ex1-tabs-4"
                                aria-selected="false"
                                >Charges</a
                            >
                            </li>
                    </ul>
                    <!-- Tabs navs -->

                    <!-- Tabs content -->
                    <div class="tab-content" id="ex1-content">
                        <div
                        class="tab-pane fade show active"
                        id="ex1-tabs-1"
                        role="tabpanel"
                        aria-labelledby="ex1-tab-1"
                        >
                            <div class="row scrollable">
                                <div class="col-md-12">
                                    {{-- <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label>Company Name</label>
                                                    <p><b>{{$companyDetails['company_name']}}</b></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Company Number</label>
                                                    <p><b>{{$companyDetails['company_number']}}</b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div> --}}
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="fs-6">Company Status</label>
                                                    <p><b>{{Str::upper($companyDetails['company_status'])}}</b></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="fs-6">Company Type</label>
                                                    <p><b>{{$companyDetails['company_type']}}</b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label class="fs-6">Registered office address</label>
                                                    <p>
                                                        <b>
                                                            {{$companyDetails['registered_office_address']['address_line_1']}},{{array_key_exists('address_line_2',$companyDetails['registered_office_address'])?$companyDetails['registered_office_address']['address_line_2'].",":''}}

                                                            {{array_key_exists('locality',$companyDetails['registered_office_address'])?$companyDetails['registered_office_address']['locality'].",":''}}

                                                            {{array_key_exists('region',$companyDetails['registered_office_address'])?$companyDetails['registered_office_address']['region'].",":''}}

                                                            {{array_key_exists('postal_code',$companyDetails['registered_office_address'])?$companyDetails['registered_office_address']['postal_code']:''}}
                                                        </b>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="fs-6">Incorporated on</label>
                                                    <p><b>{{array_key_exists('date_of_creation',$companyDetails)? date('d/m/Y',strtotime($companyDetails['date_of_creation'])) : '' }}</b></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="fs-6">Dissolved on</label>
                                                    <p><b>{{array_key_exists('date_of_cessation',$companyDetails)? date('d/m/Y',strtotime($companyDetails['date_of_cessation'])) : 'N/A' }}</b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="fs-6">Can File</label>
                                                    <p><b>{{array_key_exists('can_file',$companyDetails)? ($companyDetails['can_file']?"True":"False") : "False" }}</b></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="fs-6">Jurisdiction</label>
                                                    <p><b>{{array_key_exists('jurisdiction',$companyDetails)? ucfirst($companyDetails['jurisdiction']) : 'N/A' }}</b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="fs-6">Liquidated</label>

                                                    <p><b>{{array_key_exists('has_been_liquidated',($companyDetails)) ? ($companyDetails['has_been_liquidated']?"True":"False") : "False" }}</b></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="fs-6">Charges</label>
                                                    <p><b>{{array_key_exists('has_charges',($companyDetails)) ? ($companyDetails['has_charges']?"True":"False") : "False" }}
                                                    </b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="fs-6">Insolvency History</label>
                                                    <p><b>
                                                        {{array_key_exists('has_insolvency_history',($companyDetails)) ? ($companyDetails['has_insolvency_history']?"True":"False") : "False" }}
                                                        </b></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="fs-6">Registered Office Is In Dispute</label>
                                                    <p><b>
                                                        {{array_key_exists('registered_office_is_in_dispute',($companyDetails)) ? ($companyDetails['registered_office_is_in_dispute']?"True":"False") : "False" }}
                                                        </b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="fs-6">Undeliverable Registered Office Address</label>
                                                    <p><b>
                                                        {{array_key_exists('undeliverable_registered_office_address',($companyDetails)) ? ($companyDetails['undeliverable_registered_office_address']?"True":"False") : "False" }}
                                                        </b></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="fs-6">Proof Status</label>
                                                    <p><b>
                                                        {{array_key_exists('proof_status',($companyDetails)) ? ucfirst($companyDetails['proof_status']) : 'N/A' }}
                                                        </b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label class="fs-6">Nature of business (SIC)</label>
                                                    <p><b>
                                                        {{array_key_exists('sic_codes',($companyDetails)) ? implode(",",$companyDetails['sic_codes']) : 'N/A' }}
                                                        </b></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
                            <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">
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="filingTable">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        Date
                                                    </th>
                                                    <th>
                                                        Type
                                                    </th>
                                                    <th>
                                                        Category
                                                    </th>
                                                    <th>
                                                        Description
                                                    </th>
                                                    <th width="18px">
                                                        Download PDF
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
                            {{-- <div class="row mt-4 mb-3">
                                <label class="mb-2">Fliter Officers:</label>
                                <div class="col">
                                    <div class="d-inline-flex">
                                        <div class="me-2">
                                            <input class="form-check-input" type="checkbox" value="current_officers" id="current_officers" name="current_officers">
                                            <label class="form-check-label" for="current_officers">Current Officers</label>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            {{-- <div class="row mt-4 mb-3">
                                <label class="mb-2">Fliter Officers By Type:</label>
                                <div class="col">
                                    <div class="d-inline-flex">
                                        <div class="me-2">
                                            <input class="form-check-input" type="checkbox" value="all" id="all" name="officers_type[]">
                                            <label class="form-check-label" for="all">All</label>
                                        </div>
                                        <div class="me-2">
                                            <input class="form-check-input" type="checkbox" value="director" id="directors" name="officers_type[]">
                                            <label class="form-check-label" for="directors">Directors</label>
                                        </div>
                                        <div class="me-2">
                                            <input class="form-check-input" type="checkbox" value="secretary" id="secretaries" name="officers_type[]">
                                            <label class="form-check-label" for="directors">Secretaries</label>
                                        </div>
                                        <div class="me-2">
                                            <input class="form-check-input" type="checkbox" value="llp-members" id="llp-members" name="officers_type[]">
                                            <label class="form-check-label" for="llp-members">LLP-Members</label>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="officersTable">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        Name
                                                    </th>
                                                    <th>
                                                        Address
                                                    </th>
                                                    <th>
                                                        Role
                                                    </th>
                                                    <th>
                                                        Number
                                                    </th>
                                                    <th>
                                                        Date of birth
                                                    </th>
                                                    <th>
                                                        Appointed on
                                                    </th>
                                                    <th>
                                                        Nationality
                                                    </th>
                                                    <th>
                                                        Country of residence
                                                    </th>
                                                    <th>
                                                        Occupation
                                                    </th>
                                                    <th>
                                                        Pre 1992 Appointment
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="ex1-tabs-4" role="tabpanel" aria-labelledby="ex1-tab-4">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="chargesTable">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        Charge
                                                    </th>
                                                    <th>
                                                        Created On
                                                    </th>
                                                    <th>
                                                        Delivered On
                                                    </th>
                                                    <th>
                                                        Status
                                                    </th>
                                                    <th>
                                                        Persons Entitled
                                                    </th>
                                                    <th>
                                                        short Particulars
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Tabs content -->
                </div>
                <div class="modal fade modal-xl" id="peopleAppointment" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered" style="over-flow:auto">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Appointments</h1>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="appointmentTable">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        Company Name
                                                    </th>
                                                    <th>
                                                        Company Status
                                                    </th>
                                                    <th>
                                                        Role
                                                    </th>
                                                    <th>
                                                        Status
                                                    </th>
                                                    <th>
                                                       Appointed On
                                                    </th>
                                                    <th>
                                                       Resigned On
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                          <button class="btn btn-danger" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Close</button>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('javascript')
<script>
    let start_index = 0;
    let itemsPerPage = 20;

    $('input[name^="category[]"]').on('change',function() {
        fetchTable();
    });
    // $('input[name^="officers_type[]"]').on('change',function() {
    //     var searchTerms = [];
    //     $.each($('input[name^="officers_type[]"]'), function(i, elem) {
    //         if ($(elem).prop("checked")) {
    //             if($(this).val() != "all"){
    //                 searchTerms.push("^" + $(this).val() + "$");
    //             }
    //         }
    //     });
    //    DataTable('#officersTable').column(2).search(searchTerms.join("|"), true, false, true).draw();
    // });
    // $('input[name="current_officers"]').on('change',function() {
    //     fetchOfficers();
    // });

    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 truncateLongText(text,size){
        let result = '';
        return result = text.substring(0, size) + '...';
    }
    function ucfirst(text) {
        var firstLetter = text.slice(0,1);
        return firstLetter.toUpperCase() + text.substring(1);
    }

    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', render: function(data, type, row, meta){return ucfirst(data)} },
                { 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-secondary download-link" data-link="${data}">Download</button> <span class="text-sm">(${row.pages} pages)</span>`;
                        }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);
            }
        });
    });

    function fetchOfficers(){
        let activeOfficers = $('input[name="current_officers"]:checked').val();
        let officersType = $('input[name^="officers_type[]"]:checked').map(function() {
                return $(this).val();
        }).get();
        $('#officersTable').DataTable().destroy();
        let url = '{{url("/officersLists/")."/".$companyDetails["company_number"]}}';

        var officerDatatable = new DataTable('#officersTable', {
            ajax:{
                url: url,
                data:{activeOfficers:activeOfficers,officersType:officersType},
                error: function(){
                    $(".users-error").html("");
                    $("#officersTable").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: 'name',render: function(data, type, row) {
                        return `<a href="javascript:void(0)" onClick="appointments('${row.links.officer.appointments}')">${data}</a>`
                    }
                },
                { data: 'address' },
                { data: 'officer_role' },
                {data:'person_number'},
                { data: 'date_of_birth' },
                { data: 'appointed_on' },
                { data: 'nationality' },
                { data: 'country_of_residence' },
                {data: 'occupation'},
                {data:'is_pre_1992_appointment'},

            ],
            "columnDefs": [
                {
                    "targets": 4,
                    "render": function(data, type, row, meta){
                        console.log(data);
                        if(data != undefined) {
                            let dates = new Date(data.year,data.month,01);
                            return dates.toLocaleString('default', { month: 'long' })+'-'+data.year;
                        }else{
                            return "";
                        }

                    }
                },
                {
                    "targets": 5,
                    "render": function(data, type, row, meta){
                        if(data != undefined) {
                            return formatDate(data);
                        }else{
                            return "";
                        }

                    }
                },
                {
                    "targets": 1,
                    "render": function(data, type, row, meta){
                        let address = ''
                        if(data.address_line_1 !=undefined){
                            address+=data.address_line_1+",";
                        }
                        if(data.locality !=undefined){
                            address+=data.locality+",";
                        }
                        if(data.postal_code !=undefined){
                            address+=data.postal_code;
                        }
                        return address;
                    }
                },
                {
                    "targets": 2,
                    "render": function(data, type, row, meta){
                        var firstLetter = data.slice(0,1);
                        return firstLetter.toUpperCase() + data.substring(1);
                    }
                },
                {
                    "targets": 7,
                    "render": function(data, type, row, meta){
                        if(data != undefined) {
                            return data;
                        }else {
                            return "";
                        }

                    }
                },
                {
                    "targets": 6,
                    "render": function(data, type, row, meta){
                        if(data != undefined) {
                            return data;
                        }else {
                            return "";
                        }

                    }
                },
                {
                    "targets": 8,
                    "render": function(data, type, row, meta){
                        if(data != undefined) {
                            return data;
                        }else {
                            return "";
                        }

                    }
                },
            ]
        });
    }

    function fetchCharges() {
        $('#chargesTable').DataTable().destroy();
        let url = '{{url("/chargesLists/")."/".$companyDetails["company_number"]}}';

        new DataTable('#chargesTable', {
            ajax:{
                url: url,
                data:{start:0,length:25},
                error: function(){
                    $(".users-error").html("");
                    $("#chargesTable").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: 'classification.description' },
                { data: 'created_on' ,render: function(data, type, row) {
                        return formatDate(data)
                    }
                },
                { data: 'delivered_on',render: function(data, type, row) {
                        return formatDate(data)
                    }
                },
                {data:'status',render: function(data, type, row) {return ucfirst(data)}},
                {
                    data: 'persons_entitled',
                    render: function(data, type, row) {
                        //return data.length;
                        var persons_entitled = '';
                        data.forEach(function(item) {
                            if (persons_entitled.length > 0) {
                                persons_entitled += ', '
                            }
                            persons_entitled += item.name;
                        });
                        return persons_entitled;
                    }
                },
                { data: 'particulars.description', render: function(data, type, row) {
                        return truncateLongText(data,40);
                    } },
            ],
        });
    }

    function appointments(link){
        $('#appointmentTable').DataTable().destroy();
        let url = '{{url("/appointmentLists/")}}';

        new DataTable('#appointmentTable', {
            ajax:{
                url: url,
                data:{"_token": "{{ csrf_token() }}",link:link,start_index:start_index,items_per_page:itemsPerPage,activeOfficers:''},
                type:"POST",
                error: function(){
                    $(".users-error").html("");
                    $("#appointmentTable").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: 'appointed_to.company_name',render: function(data, type, row) {
                        return `<h6 class="text-primary">${data}</h6>`
                    }
                },
                { data: 'appointed_to.company_status' },
                { data: 'officer_role' },
                {data:'resigned_on',render: function(data, type, row) {
                        if(data !=undefined) {
                            return "Resigned";
                        }else{
                            return "Active"
                        }
                    }
                },
                { data: 'appointed_on',render: function(data, type, row) {
                        if(data !=undefined) {
                            return formatDate(data);
                        }else{
                            return ""
                        }
                    }
                },
                { data: 'resigned_on' ,render: function(data, type, row) {
                        if(data !=undefined) {
                            return formatDate(data);
                        }else{
                            return ""
                        }
                    }
                },

            ],
        });

        $('#peopleAppointment').modal('show');
    }
    $(document).ready(function(){
        fetchTable()
        fetchOfficers()
        fetchCharges()
    });
</script>
@endpush