@extends('layouts/eims_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <style>
        .page-item.active .page-link {
            background-color: lightgrey !important;
            border: 1px solid black;
        }

        .page-link {
            color: black !important;
        }

        .table.table-condensed > thead > tr > td,
        .table.table-condensed > tbody > tr > td,
        .table.table-condensed > tfoot > tr > td,
        .table.table-condensed > thead > tr > th,
        .table.table-condensed > tbody > tr > th,
        .table.table-condensed > tfoot > tr > th {
            padding: 5px 3px !important;
            font-size: 10px !important;
            border: 1px solid #dbdbdb !important;

        }

        .table thead tr th {
            font-size: 8px !important;
        }

        tr.footerrow {
            font-weight: bold;
        }

        p.text-center.reportHeading {
            font-size: 15px;
        }
    </style>


    <div class="row page-wrap ">
        <div class="col-md-12">
            <div>
                <div>


                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-title">
                                <h2>{{ $data['pageTitle'] }}</h2>
                            </div>
                            <div class="panel-options">
                                <a href="" class="btn btn-info pull-right addViewBtn printIcon" id="printIcon">
                                    <i class="glyphicon glyphicon-plus-sign addIcon"></i>Print
                                </a>
                            </div>
                        </div>


                        <div class="panel-body panelBodyView printIcon" id="printDiv">
                            @php

                                $searchElements = [
                                    ['element' => 'report_level', 'showAll' => 'no'],
                                    ['element' => 'fillCampusId', 'showAll' => 'no', 'showHeadoffice' => 'no'],
                                    ['element' => 'fillProgramId'],
                                    ['element' => 'fillSessionId'],
                                    ['element' => 'fillSemesterClassId'],
                                    ['element' => 'fillSemesterClassGroupId'],
                                    ['element' => 'fillSectionId'],
                                    ['element' => 'fillShiftId'],
                                    ['element' => 'fillStudentId'],
                                    ['element' => 'dateFrom'],
                                    ['element' => 'dateTo'],
                                ];
                            @endphp
                            @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                            <div class="row vert-offset-top-2" id="stockReportPdf">

                                <style>
                                    @media print {

                                        #stockReportPdf {
                                            visibility: visible;
                                            overflow-x: unset;
                                        }

                                        .text-nowrap {
                                            white-space: normal;
                                        }

                                        table th {
                                            border-top: 1px solid red !important;
                                        }

                                        .table thead tr th {
                                            font-size: 8px !important;
                                            border: 1px solid #474444 !important;
                                            font-weight: bold;
                                        }

                                        .table thead tr td {
                                            border: 1px solid #848484 !important;
                                        }

                                        .table.table-condensed > tbody > tr > td {
                                            border: 1px solid #848484 !important;
                                            color: #000 !important;
                                            padding: 5px 2px !important;
                                            font-size: 7px !important;
                                        }

                                        .table.table-condensed > tfoot > tr > th {
                                            border: 1px solid #827a7a !important;
                                            border-left: 1px solid #827a7a !important;
                                            border-right: 1px solid #827a7a !important;
                                        }

                                        tr.footerrow {
                                            font-weight: bold;
                                        }

                                        p.text-center.reportHeading {
                                            font-size: 15px;
                                        }
                                    }
                                </style>
                                <p class="text-center reportHeading">
                                    <span class="companyNameData" style="color:#fff;"><b> {{ $data['company']->name }}
                                        </b></span><br>
                                    <span
                                        style="color:#fff;font-size:11px;"><b>{{ $data['company']->address }}</b></span><br>
                                    <span style="color:#fff;"><b>{{ $data['pageTitle'] }} Report</b></span><br>
                                    <span style="color:#fff;"><b><span
                                                id="reportlevelName">Campus Name: </span></b></span>
                                    <span id="brnachName" style="color:#fff;"></span><br>
                                    <span style="color:#fff;"><b>As on:</b> </span>
                                    <span id="daterange" style="color:#fff;"></span><br>
                                </p>

                                <p class="text-right" style="color:#fff;">Printed Date: {{ date('d-m-Y') }}</p>
                                <table
                                    class="table table-striped table-bordered table-condensed first-col-dark dataTable no-footer"
                                    cellpadding="0" cellspacing="0" width="100" id="dueReport">
                                    <thead>
                                    <tr>

                                        <th rowspan="2" style="width: 3%">SL</th>
                                        <th colspan="2">STUDENT INFORMATION</th>
                                        <th colspan="3">FEES INFORMATION</th>
                                        <th rowspan="2">FEES AMOUNT (TK)</th>
                                        <th rowspan="2">COLLECTION AMOUNT (TK)</th>
                                        {{--                                        <th rowspan="2">BALANCE AMOUNT (TK)</th>--}}
                                    </tr>
                                    <tr>
                                        <th>ID</th>
                                        <th>NAME</th>
                                        <th>COLLECTION DATE</th>
                                        <th>BILL NO</th>
                                        <th>TYPE</th>
{{--                                        <th>DUE AMOUNT (TK)</th>--}}
                                    </tr>
                                    </thead>
                                    <tbody id="table_data">
                                    </tbody>
                                </table>

                                <div class="row userInfoMainDiv" style="padding: 100px 15px 5px 15px; ">
                                    <table class="" id=""
                                           style="color:black;font-size: 12px; font-weight: bold; width:100%">
                                        <tbody>
                                        <tr>
                                            <td style="text-align:left;  width: 25%">Prepared By</td>
                                            <td style="text-align:center;  width: 20%">Verified By</td>
                                            <td style="text-align:right; width: 25%">Reviewed By</td>
                                            <td style="text-align:right;">Approved By</td>
                                        </tr>
                                        </tbody>
                                    </table>

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

    <script>
        'use strict';

        function money(value) {
            if (typeof value === 'string') {
                value = Number(value.replace(/[^0-9.-]+/g, ""));
            }
            return isNaN(value) ? 0.0 : parseFloat(value);
        }

        $(document).ready(function () {
            // sreach by
            $("#fillAreaId").change(function (event) {
                var areaName = $('#fillAreaId option:selected').text();
                $('#reportlevelName').html("Area Name: ");
                $('#brnachName').html(areaName);
            });
            $("#fillZoneId").change(function (event) {
                var zoneName = $('#fillZoneId option:selected').text();
                $('#reportlevelName').html("Zone Name: ");
                $('#brnachName').html(zoneName);
            });
            $("#fillRegionId").change(function (event) {
                var regionName = $('#fillRegionId option:selected').text();
                $('#reportlevelName').html("Region Name: ");
                $('#brnachName').html(regionName);
            });

            $("#fillBranchId").change(function (event) {
                var branchName = $('#fillBranchId option:selected').text();
                if (branchName != '') {
                    $('#reportlevelName').html("Branch Name: ");
                    $('#brnachName').html(branchName);
                } else {
                    $('#reportlevelName').html("Branch Name: ");
                    $('#brnachName').html("ALL");
                }

            });
            //...........search by end

            $('form').submit(function (event) {
                event.preventDefault();

                let datetime = '';
                const dateFrom = $('#fillDateFrom').val();
                const dateTo = $('#fillDateTo').val();
                if (dateFrom !== '') {
                    datetime += 'From: ' + dateFrom;
                }
                if (dateTo !== '') {
                    datetime += ' To: ' + dateTo;
                }
                $('#daterange').html(datetime);

                $('#loadingModal').show();
                $('#table_footer_data').html('');
                $('#table_data').html('');

                var branch = $('#fillBranchId').val();
                var area = $('#fillAreaId').val();
                var zone = $('#fillZoneId').val();
                var region = $('#fillRegionId').val();
                var reportLevel = $('#fillReportLevel').val();
                if (dateTo == "" || dateFrom == "") {

                    $('#loadingModal').hide();
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select from date and to date!',
                        showConfirmButton: true,
                    })
                    return false;
                } else if (reportLevel == '' || reportLevel == "Branch") {

                    if (branch == '') {
                        $('#loadingModal').hide();
                        Swal.fire({
                            icon: 'error',
                            title: 'Please select branch first!',
                            showConfirmButton: true,
                        })
                        return false;
                    }

                } else if (reportLevel == "Area") {
                    if (area == "") {
                        $('#loadingModal').hide();
                        Swal.fire({
                            icon: 'error',
                            title: 'Please select area first!',
                            showConfirmButton: true,
                        })
                        return false;
                    }

                } else if (reportLevel == "Zone") {
                    if (zone == "") {
                        $('#loadingModal').hide();
                        Swal.fire({
                            icon: 'error',
                            title: 'Please select zone first!',
                            showConfirmButton: true,
                        })
                        return false;
                    }

                } else if (reportLevel == "Region") {
                    if (region == "") {
                        $('#loadingModal').hide();
                        Swal.fire({
                            icon: 'error',
                            title: 'Please select region first!',
                            showConfirmButton: true,
                        })
                        return false;
                    }

                } else if (branch == '') {
                    $('#loadingModal').hide();
                    Swal.fire({
                        icon: 'error',
                        title: 'Please select branch first!',
                        showConfirmButton: true,
                    })
                    return false;
                }

                $.ajax({
                    type: 'post',
                    url: '{{ Request::url() }}',
                    data: $('form').serialize(),
                    dataType: 'json',
                    success: function (_response) {
                        $('#loadingModal').hide();
                        // console.log(_response.branch);
                        //$('#loadingModal').hide();
                        if (_response.responseStatus === 'success') {

                            var html = '';
                            let totalFeesAmount = 0;
                            var totalCollectionAmount = 0;
                            var totalDueAmount = 0;
                            var totalOutstandingAmountWithSC = 0;
                            var totalOutstandingAmountWithOutSC = 0;
                            $.each(_response.data, function (key, value) {
                                html = '<tr >';
                                html += '<td class="text-nowrap text-center"> ' + value.sl + '</td>';
                                html += '<td class="text-nowrap text-center"> ' + value.student_id_no + ' </td>';
                                html += '<td> ' + value.student_name + ' </td>';
                                html += '<td class="text-nowrap text-center"> ' + value.view_fees_collection_date + ' </td>';
                                html += '<td class="text-nowrap text-center"> ' + value.view_fees_bill_no + ' </td>';
                                html += '<td class="text-nowrap"> ' + value.fees_type + ' </td>';
                                html += '<td style="text-align:right"> ' + money(value.view_fees_amount) + ' </td>';
                                html += '<td style="text-align:right"> ' + money(value.view_collection_amount) + ' </td>';
                                html += '</tr> ';
                                $('#table_data').append(html);

                                totalFeesAmount += parseFloat(value.view_fees_amount);
                                totalCollectionAmount += parseFloat(value.view_collection_amount);
                                totalDueAmount += parseFloat(value.view_due_amount);
                            });

                            var footer = '';

                            footer = '<tr style="font-weight:bold">';
                            footer += '<td colspan="6" style="text-align:center"> TOTAL </td>';
                            footer += '<td style="text-align:right"> ' + zerocheck(totalFeesAmount) + ' </td>';
                            footer += '<td style="text-align:right"> ' + zerocheck(totalCollectionAmount) + ' </td>';
                            // footer += '<td style="text-align:right"> ' + zerocheck(totalFeesAmount) + ' </td>';
                            @if (isset($data['branchName']->name) && $data['branchName']->name == 'Head Office')
                                footer += '<td style="text-align:right"> ' + zerocheck(
                                totalOutstandingAmountWithOutSC) + ' </td>';
                            @endif

                                footer += '</tr> ';

                            $('#table_data').append(footer);


                        } else {
                            $('#loadingModal').hide();
                            Swal.fire({
                                icon: 'error',
                                title: 'Something went wrong!',
                                showConfirmButton: true
                            })
                        }

                    },
                    error: function (_response) {
                        $('#loadingModal').hide();
                        const responseJSON = _response.responseJSON;
                        Swal.fire({
                            icon: responseJSON.responseStatus,
                            title: responseJSON.responseTitle,
                            text: responseJSON.responseText,
                        })

                    }
                });
            });
        });


        function zerocheck(value) {
            if (value === 0 || value === undefined || value === null) {
                return "-";
            } else {
                return value.toLocaleString("en-IN", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                // return value.toLocaleString("bn-BD",2);

            }

        }


        $("#printIcon").click(function () {

            var printContents = document.getElementById("stockReportPdf").innerHTML;
            var printStyle =
                '<style>@page {size: auto;margin: 0mm;margin-top:20px;margin-bottom:20px;margin-right:10px;} @media print  { .table thead tr th {white-space: normal;} #stockReportPdf {width: 100%;height: auto;overflow: visible;} }</style>';
            var printDiv =
                '<div id="order-details-wrapper" style="margin-top:25px;padding-left:10px;padding-right:10px;">' +
                printStyle + printContents + '</div>';

            document.body.innerHTML = printDiv;

            var originalContents = document.body.innerHTML;
            window.print();
            document.body.innerHTML = originalContents;
            // location.reload();

        });
    </script>
@endsection