@extends('operations.layout.mainlayout')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Turn Around Time - Test</h1>
                </div>
                <div class="col-sm-6">

                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid" id="time-table-div">
            <div class="row">
                <div class="col-12">
                    <div class="col-12 col-sm-12 col-md-12">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-order" role="alert" style="@if(empty($error))display: none;@endif">@if(!empty($error)){{$error}}@endif</div>
                            </div>
                        </div>
                        <br />
                        <div class="card bg-light">
                            <div class="card-header text-muted border-bottom-0">
                            </div>
                            <form method="get" action="" style="width:100%;">
                                <div class="card-body pt-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>Result Date from</b></span>
                                                    {{--<input id="treport-date-from" class="form-control" type="date" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Date From">--}}
                                                    <input autocomplete="off" id="treport-date-from" class="form-control date-from-invoice" type="text" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Date From">
                                                </div>
                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>Result Date to</b></span>
                                                    {{--<input id="treport-date-to" class="form-control" type="date" name="date_to" value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To">                                              </div>--}}
                                                    <input autocomplete="off" id="treport-date-to" class="form-control date-to-invoice" type="text" name="date_to" value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To"></div>
                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>Status</b></span>
                                                    <select class="form-control multi" id="treport-status-id" name="status[]" multiple="multiple">
                                                        @foreach($statuses as $status)
                                                            <option value="{{$status->LAB_ORDER_STATUS_ID}}" {{ !empty($selectedStatuses) && collect($selectedStatuses)->contains($status->LAB_ORDER_STATUS_ID) ? 'selected' : '' }}>{{$status->DESC_EN}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Test Name</b></span>
                                                        <select class="form-control category-test" id="treport-category-id" name="status">
                                                            <option value="">Select Test Name</option>
                                                            @foreach($packages as $package)
                                                                <option value="{{$package->ID}}" @if(!empty($selectedCategoryId) && $selectedCategoryId == $package->ID) selected @endif>{{$package->NAME_EN}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Processing Branch</b></span>
                                                        <select class="form-control rhospital_id" id="treport-hospital-id" name="hospital">
                                                            <option value="">Select Processing Branch</option>
                                                            @foreach($hospitals as $ehospital)
                                                                <option  @if(!empty($hospital) && $hospital == $ehospital->ID) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Unit</b></span>
                                                        <select class="form-control" id="tat-unit-id">
                                                            <option value="">Select Unit</option>
                                                            @foreach($units as $unit)
                                                                <option value="{{$unit->ID}}" @if(!empty($selectedUnitId) && $selectedUnitId == $unit->ID) selected @endif>{{$unit->NAME_EN}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                <div class="card-footer">
                                    <div class="text-right">
                                        <input type="checkbox" name="only_urgent" value="only_urgent" id="only-urgent">
                                        <label for="only-urgent" style="margin-right: 10px;font-weight: 300;"> Only Urgent</label>

                                        <input type="checkbox" name="exceed_tat" value="exceed_tat" id="exceed-tat">
                                        <label for="exceed-tat" style="margin-right: 10px;font-weight: 300;"> Exceed tat</label>

                                        <input type="checkbox" name="only_reset" value="reset" id="only-reset">
                                        <label for="only-reset" style="margin-right: 10px;font-weight: 300;"> Only Reset</label>

                                    </div>
                                    <div class="text-right">

                                    </div>

                                </div>

                            </form>
                        </div>

                    <div class="card">
                    <div class="card-body">
                        <div class="card">
                            <div class="card-body">
                                <table id="tat-test-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Service Name</th>
                                        <th>Total Received by Service</th>
                                        <th>Total Delayed by Service</th>
                                        <th>Average Delay Time in Hours</th>
                                        <th>Delay Time Percentage (from Setup Time)</th>
                                        <th>Total Delay Per Service Percentage</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th>Total</th>
                                        <th id="total-received"></th>
                                        <th id="total-delayed"></th>
                                        <th id="avg-delay"></th>
                                        <th id="delay-percentage"></th>
                                        <th id="total-delay-percentage"></th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                </div>
                </div>
                </div>

            </div>

        </div>

        </div>
    </section>
</div>


@endsection

@section('footer-scripts')
    <script>

        function getQueryParam(param) {
            var urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }

        $(document).ready(function() {
            $('#treport-date-from').val(getQueryParam('date_from'));
            $('#treport-date-to').val(getQueryParam('date_to'));
            /*$('#treport-hospital-id').val(getQueryParam('hospital_id'));*/
            $('#treport-hospital-id').val(getQueryParam('hospital_id')).trigger('change.select2');
            $('#supervisor-id').val(getQueryParam('supervisor_id'));
            $('#treport-status-id').val(getQueryParam('status_id'));
            $('#treport-category-id').trigger('change.select2');
            $('#tat-unit-id').val(getQueryParam('tat_unit_id'));
            $('#treport-identification').val(getQueryParam('identification'));
            $('#treport-mobile').val(getQueryParam('mobile'));
            $('#treport-name').val(getQueryParam('name'));

            if (getQueryParam('only_urgent') === 'true') {
                $('#only-urgent').prop('checked', true);
            }
            if (getQueryParam('exceed_tat') === 'true') {
                $('#exceed-tat').prop('checked', true);
            }
            if (getQueryParam('only_reset') === 'true') {
                $('#only-reset').prop('checked', true);
            }
            TatTestReportTable.draw();
            // TatTestReportTable.draw();
        });

        var TatTestReportTable = $("#tat-test-table").DataTable({
            dom: 'lBfrtip',
            buttons: [
                'copy', {
                    extend: 'excel',
                    text: 'Excel',
                    title: 'TAT Test Report',
                    filename: 'TatTestReport',
                    exportOptions: {
                        format: {
                            body: function ( data, row, column, node ) {
                                return node.textContent || node.innerText;
                            }
                        }
                    },
                    customize: function(xlsx) {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        $('row c', sheet).each(function() {
                            var cell = $(this);
                            var text = cell.text();
                            var parentRow = cell.parent();
                            var tableRow = $('#tat-test-table').DataTable().row(parentRow.index() - 1).nodes().to$().children();
                            if (tableRow.length > cell.index()) {
                                var tableCell = $(tableRow[cell.index()]);
                                if (tableCell.css('color') === 'rgb(255, 133, 133)') {
                                    cell.attr('s', '2');
                                } else if (tableCell.css('color') === 'rgb(53, 177, 0)') {
                                    cell.attr('s', '3');
                                }
                            }
                        });
                    }
                }, {
                    extend: 'csv',
                    charset: 'UTF-8',
                    bom: true,
                    filename: 'TatTestReport',
                    title: 'TatTestReport'
                }, 'pdf', {
                    extend: 'print',
                    text: 'Print',
                    autoPrint: false,
                    title: 'TAT Test Report'
                }
            ],
            responsive: true,
            autoWidth: false,
            serverSide: true,
            lengthMenu: [[10, 25, 50, 100, 500, 5000, 10000], [10, 25, 50, 100, 500, 5000, 10000]],
            processing: true,
            ajax: {
                url: '/operations/data/tat-test-report',
                data: function (d) {
                    d.date_from = $('#treport-date-from').val(),
                        d.date_to = $('#treport-date-to').val(),
                        d.hospital_id = $('#treport-hospital-id').val(),
                        d.supervisor_id = $('#supervisor-id').val(),
                        d.status_id = $('#treport-status-id').val(),
                        d.category_id = $('#treport-category-id').val(),
                        d.unit_id = $('#tat-unit-id').val(),
                        d.only_reset = $('#only-reset').is(':checked'),
                        d.exceed_tat = $('#exceed-tat').is(':checked'),
                        d.only_urgent = $('#only-urgent').is(':checked'),
                        d.identification = $('#treport-identification').val(),
                        d.mobile = $('#treport-mobile').val(),
                        d.name = $('#treport-name').val()
                }
            },
            columns: [
                { data: "NAME_EN", name: "NAME_EN" },
                { data: "total_received", name: "total_received", render: renderZeroIfEmpty },
                { data: "total_delayed", name: "total_delayed", render: renderZeroIfEmpty },
                { data: "avg_delay_time_formatted", name: "avg_delay_time_formatted", render: renderZeroIfEmpty },
                { data: "delay_time_percentage_formatted", name: "delay_time_percentage_formatted", render: renderZeroIfEmpty },
                { data: "total_delay_percentage_formatted", name: "total_delay_percentage_formatted" }
            ],
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();
                var json = api.ajax.json();


                var totalReceived = json.grand_total_received || 0;
                var totalDelayed = json.grand_total_delayed || 0;
                var avgDelayTime = json.grand_avg_delay_time || 0;
                var delayTimePercentage = json.grand_delay_time_percentage || 0;
                var totalDelayPercentage = json.grand_total_delay_percentage || 0;

                $(api.column(1).footer()).html(totalReceived);
                $(api.column(2).footer()).html(totalDelayed);
                $(api.column(3).footer()).html(isNaN(avgDelayTime) ? '00:00' : (Math.floor(avgDelayTime / 60)).toString().padStart(2, '0') + ':' + (Math.floor(avgDelayTime % 60)).toString().padStart(2, '0'));
                $(api.column(4).footer()).html(isNaN(delayTimePercentage) ? '0.00%' : delayTimePercentage.toFixed(2) + '%');
                $(api.column(5).footer()).html(isNaN(totalDelayPercentage) ? '0.00%' : totalDelayPercentage.toFixed(2) + '%');
            }
        });

        function renderZeroIfEmpty(data, type, row) {
            return data ? data : 0;
        }

        $("#treport-date-from, #treport-date-to, #treport-hospital-id, #supervisor-id, #only-reset, #exceed-tat, #only-urgent, #tat-unit-id, #treport-status-id, #treport-category-id, #treport-identification, #treport-mobile, #treport-name").change(function () {
            TatTestReportTable.draw();
        });
    </script>
@endsection