@extends('layouts/acc_layout')
@section('title', '| Late Collection')
@section('content')
    <style type="text/css">
        .form-group,
        .form-control {
            font-size: 11px !important;
            color: black !important;
        }

        .form-control {
            padding: 5px !important;
        }

        #reportSubmit {
            font-size: 12px;
            margin-top: 20px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered,
        .select2-container--default .select2-results>.select2-results__options {
            font-size: 11px !important;
        }
    </style>
    <script type="text/javascript">
        $("#loadingModal").show();
        $(document).keydown(function(e) {
            if (e.keyCode == 27) return false;
        });
    </script>
    <div class="row">
        <div class="col-md-12 ">
            <div class="panel panel-default" style="background-color:#708090;">
                <div class="panel-heading" style="padding-bottom:0px">

                    <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Late Collection
                        Deposit List</h3>
                </div>

                

                <div class="panel-options" style="margin-top: 20px; margin-left: 10px;">
                    <a href="{{ url('lateCollectionDeposit/add') }}" class="btn btn-info pull-right addViewBtn"
                        style="margin-right: 10px;">
                        <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add</a>
                </div>

                @if($userBranchId == 1)
                    <div class="panel-options" style="margin-top: 20px; margin-left: 10px;">
                        <a href="#" class="btn btn-info addViewBtn pull-right " id="pendingModalBtn" style="margin-right: 10px;">
                            <i class="glyphicon glyphicon-th-list addIcon"></i> Show Pending Branches
                        </a>
                    </div>
                @endif

                <div class="panel-body panelBodyView">
                    <!-- Filtering Start-->
                    {!! Form::open([
                        'url' => '',
                        'role' => 'form',
                        'class' => 'form-horizontal form-groups',
                        'id' => 'filterFormId',
                        'method' => 'get',
                    ]) !!}
                    <div class="row">
                        {{-- <div class="col-md-12"> --}}
                        @if (!in_array($userRoleId, Config('services.branch_level_user_roles')))
                            <div class="col-md-1">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Report Level:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filReportLevel', $reportLevelList, null, [
                                            'id' => 'filReportLevel',
                                            'class' => 'form-control input-sm',
                                            'autocomplete' => 'off',
                                            'autofocus',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2" id="areaDiv" style="display: none;">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Area:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        <select id="filArea" name="filArea" class="form-control custom-select2 input-sm">
                                            <option value="">--Select Area--</option>
                                            @foreach ($areaList as $area)
                                                <option value="{{ $area->id }}">{{ $area->name }}</option>
                                                @php
                                                    $barnchIds = str_replace(['"', '[', ']'], '', $area->branchId);
                                                    $barnchIds = explode(',', $barnchIds);
                                                    $branches = DB::table('gnr_branch')
                                                        ->whereIn('id', $barnchIds)
                                                        ->select(
                                                            DB::raw(
                                                                "CONCAT ( LPAD(branchCode,3,0) ,' - ', name ) AS name",
                                                            ),
                                                        )
                                                        ->get();
                                                @endphp
                                                @foreach ($branches as $branch)
                                                    <option value="" disabled="disabled">&nbsp
                                                        {{ $branch->name }}</option>
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2" id="zoneDiv" style="display: none;">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Zone:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        <select id="filZone" name="filZone" class="form-control custom-select2 input-sm">
                                            <option value="">--Select Zone--</option>
                                            @foreach ($zoneList as $zone)
                                                <option value="{{ $zone->id }}">{{ $zone->name }}</option>
                                                @php
                                                    $areaIds = str_replace(['"', '[', ']'], '', $zone->areaId);
                                                    $areaIds = explode(',', $areaIds);
                                                    $areas = DB::table('gnr_area')
                                                        ->whereIn('id', $areaIds)
                                                        ->select(
                                                            DB::raw("CONCAT ( LPAD(code,3,0) ,' - ', name ) AS name"),
                                                        )
                                                        ->get();
                                                @endphp
                                                @foreach ($areas as $area)
                                                    <option value="" disabled="disabled">&nbsp
                                                        {{ $area->name }}</option>
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2" id="regionDiv" style="display: none;">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Division:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        <select id="filRegion" name="filRegion"
                                            class="form-control custom-select2 input-sm">
                                            <option value="">--Select Division--</option>
                                            @foreach ($regionList as $region)
                                                <option value="{{ $region->id }}">{{ $region->name }}</option>
                                                @php
                                                    $zoneIds = str_replace(['"', '[', ']'], '', $region->zoneId);
                                                    $zoneIds = explode(',', $zoneIds);
                                                    $zones = DB::table('gnr_zone')
                                                        ->whereIn('id', $zoneIds)
                                                        ->select(
                                                            DB::raw("CONCAT ( LPAD(code,3,0) ,' - ', name ) AS name"),
                                                        )
                                                        ->get();
                                                @endphp
                                                @foreach ($zones as $zone)
                                                    <option value="" disabled="disabled">&nbsp
                                                        {{ $zone->name }}</option>
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2" id="branchDiv">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filBranch', ['' => '--All--'] + $branchList, null, [
                                            'id' => 'filBranch',
                                            'class' => 'form-control custom-select2 input-sm',
                                            'autocomplete' => 'off',
                                        ]) !!}
                                        <p id='filBranchE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (in_array($userRoleId, Config('services.branch_level_user_roles')))
                            <div class="col-md-1" id="branchDiv">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        {!! Form::select('filBranch', $branchList, null, [
                                            'id' => 'filBranch',
                                            'class' => 'form-control custom-select2 input-sm',
                                            'autocomplete' => 'off',
                                        ]) !!}
                                        <p id='filBranchE' style="max-height:3px; color:red;"></p>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="col-md-1">
                            <div class="form-group">
                                <div class="col-md-12">
                                    {!! Form::label('', 'Date:', ['class' => 'control-label pull-left']) !!}
                                </div>
                                <div class="col-md-12">
                                    {!! Form::text('filDate', null, [
                                        'id' => 'filDate',
                                        'class' => 'form-control input-sm',
                                        'autocomplete' => 'off',
                                    ]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <div class="col-md-12">
                                    {!! Form::label('', 'Start Date:', ['class' => 'control-label pull-left']) !!}
                                </div>
                                <div class="col-md-12">
                                    {!! Form::text('filStartDate', null, [
                                        'id' => 'filStartDate',
                                        'class' => 'form-control input-sm',
                                        'autocomplete' => 'off',
                                    ]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <div class="col-md-12">
                                    {!! Form::label('', 'End Date:', ['class' => 'control-label pull-left']) !!}
                                </div>
                                <div class="col-md-12">
                                    {!! Form::text('filEndDate', null, [
                                        'id' => 'filEndDate',
                                        'class' => 'form-control input-sm',
                                        'autocomplete' => 'off',
                                    ]) !!}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-1">
                            <div class="form-group">
                                {!! Form::label('', '', ['class' => 'control-label col-md-12']) !!}
                                <div class="col-md-12">
                                    {!! Form::submit('Show ', ['id' => 'reportSubmit', 'class' => 'btn btn-primary btn-xs']) !!}
                                </div>
                            </div>
                        </div>

                    </div>

                    {!! Form::close() !!}
                    <!-- filtering end-->

                </div> {{-- panel-body panelBodyView DIV --}}
                <div id="reportingDiv">
                </div>
            </div>
        </div>
    </div>
    <!-- pending branches Modal -->
    <div id="pendingModal" class="modal fade "style="margin-top:4%;" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title">Pending Branches</h4>
                    <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
                    <button type="button" class="btn btn-primary" style="float: right;" id="downloadPdfTop">Download as PDF</button>

                </div>
                <div class="modal-body">
                    <div id="pendingModalData">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="downloadPdfBottom">Download as PDF</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?
                    <input type="hidden" id="DMId" value="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="DM">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Include jsPDF Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <!-- Include jsPDF-Autotable Plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.24/jspdf.plugin.autotable.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            function loadReportingDiv(queryParams = '') {
                $('#loadingModal').show();
                $("#reportingDiv").load('{{ URL::to('lateCollectionDeposit/list') }}' + '?' + queryParams,
                    function() {
                        $('#loadingModal').hide(); // Hide loading modal after content is loaded
                    });
            }

            // Load data automatically when the page loads
            loadReportingDiv();
            $("form").submit(function(event) {
                event.preventDefault();

                var serializeValue = $(this).serialize();
                $('#loadingModal').show();

                $("#reportingDiv").load('{{ URL::to('lateCollectionDeposit/list') }}' + '?' +
                    serializeValue);
            });
            // Handle pagination via AJAX
            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();
                var url = $(this).attr('href');
                $('#loadingModal').show();
                $("#reportingDiv").load(url);
            });




            
        });

        $('#pendingModalBtn').on('click', function(e) {
                // e.preventDefault();
                $.ajax({
                    url: "{{ url('lateCollectionDeposit/pendingBranches') }}",
                    type: "GET",
                    dataType: 'html',
                    success: function(html) {
                        $('#pendingModalData').html(html);

                        // Show the modal once data is loaded
                        $('#pendingModal').modal('show');
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                    }
                });
            });
    </script>


    <script type="text/javascript">
        $(document).ready(function() {

            $("#filStartDate").closest('.col-md-1').hide();
            $("#filEndDate").closest('.col-md-1').hide();

            $("#filBranch").change(function() {
                var selectedBranch = $(this).val();
                if (selectedBranch === "") { // When '--All--' is selected
                    $("#filDate").closest('.col-md-1').show();
                    $("#filStartDate").closest('.col-md-1').hide();
                    $("#filEndDate").closest('.col-md-1').hide();
                } else { // When any specific branch is selected
                    $("#filDate").closest('.col-md-1').hide();
                    $("#filStartDate").closest('.col-md-1').show();
                    $("#filEndDate").closest('.col-md-1').show();
                }
            });

            // Trigger change to apply initial visibility rules
            $("#filBranch").trigger('change');

            $("#filDate").on('input', function(event) {
                this.value = '';
            });
            $("#filDate").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy'
            });
            $("#filStartDate").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy'
            });
            $("#filEndDate").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy'
            });
            $("#loadingModal").hide();
            /*on change filReportLevel hide/show contents*/
            $("#filReportLevel").change(function(event) {
                if ($(this).val() == "Branch") {
                    $("#branchDiv").show();
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                    $("#filArea").prop('required', false);
                    $("#filZone").prop('required', false);
                    $("#filRegion").prop('required', false);
                } else if ($(this).val() == "Area") {
                    $("#branchDiv").hide();
                    $("#areaDiv").show();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                    $("#filArea").prop('required', true);
                    $("#filZone").prop('required', false);
                    $("#filRegion").prop('required', false);
                } else if ($(this).val() == "Zone") {
                    $("#branchDiv").hide();
                    $("#areaDiv").hide();
                    $("#zoneDiv").show();
                    $("#regionDiv").hide()
                    $("#filArea").prop('required', false);
                    $("#filZone").prop('required', true);
                    $("#filRegion").prop('required', false);
                } else if ($(this).val() == "Region") {
                    $("#branchDiv").hide();
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").show();
                    $("#filArea").prop('required', false);
                    $("#filZone").prop('required', false);
                    $("#filRegion").prop('required', true);
                }
            });
            /*end on change filReportLevel hide/show contents*/
            $("#filReportLevel").trigger('change');
            $(document).on('click', '#downloadPdfTop, #downloadPdfBottom', function() {
                const {
                    jsPDF
                } = window.jspdf;
                var doc = new jsPDF('p', 'mm', 'a4');

                // Adding Title to PDF
                doc.setFontSize(16);
                doc.text('Pending Branches', 14, 15);

                // Prepare the table data
                var tableColumns = [
                    ['#SL', 'Branch', '#SL', 'Branch']
                ];
                var tableRows = [];

                $('#pendingModalData tbody tr').each(function() {
                    var row = [];
                    $(this).find('td').each(function() {
                        row.push($(this).text());
                    });
                    tableRows.push(row);
                });

                // Generate PDF table
                doc.autoTable({
                    head: tableColumns,
                    body: tableRows,
                    startY: 20,
                    theme: 'grid',

                    styles: {
                        fontSize: 10
                    }
                });

                // Save the PDF
                var today = new Date().toLocaleDateString('en-GB');
                doc.save('Late_Collection_Pending_Branch_List('+ today + ').pdf');
            });

        }); /* Ready*/
    </script>
@endsection