@extends('layouts.app')
@section('css')
<style>
    .font-weight-boldest {
        font-weight: bold !important;
    }
    .text-right {
        text-align: right !important;
    }
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }
</style>
@endsection
@section('content')

    @include('layouts.toolbar')
    <div class="d-flex flex-column-fluid">
        <div class="container">
            <div class="card card-custom">
                <div class="card-header">
                    <div class="card-toolbar">
                        <ul class="nav nav-light-success nav-bold nav-pills">
                            @if($billingEnrolledCycles)
                                @foreach($billingEnrolledCycles as $cycle)
                                    <li class="nav-item">
                                        <button class="nav-link tab_active_{{$cycle->cycle_no}} active"
                                                onclick="return get_invoice_data(this, {{$cycle->cycle_no}}, {{$student->id}},{{$cycle->id}})">
                                                    <span class="nav-icon">
                                                        <i class="flaticon2-chat-1"></i>
                                                    </span>
                                            <span class="nav-text"> Invoice {{$cycle->cycle_no}} </span>
                                        </button>
                                    </li>
                                @endforeach
                            @endif

                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div id="append_invoice_data">
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script type="text/javascript">

        @php
        if ($currentCycleNo){
            $billingFirstCycle = collect($billingEnrolledCycles)->where('cycle_no', $currentCycleNo)->first();
        }else{
          $billingFirstCycle = isset($billingEnrolledCycles[0]) ? $billingEnrolledCycles[0] : NULL;
        }
        @endphp
        @if(isset($student) && isset($billingFirstCycle))
           get_invoice_data('.tab_active_'+{{$billingFirstCycle->cycle_no}},{{$billingFirstCycle->cycle_no}}, {{$student->id}},{{$billingFirstCycle->id}});
           updateInvoiceGrand({{$student->id}})
        @endif

        function get_invoice_data(ele, cycleNo, studentId,cycleId) {
            $('.active').removeClass('active');
            $(ele).addClass('active');
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity:         0.6,
                    color: '#fff',
                }
            });

            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'POST',
                url: "{{ url('after-school/billing/fetch-invoice-data') }}",
                data: {
                    _token: CSRF_TOKEN,
                    Student_id: studentId,
                    cycle_id: cycleId,
                    cycle_no: cycleNo,
                },
                success: function (results) {
                    $.unblockUI();
                    if (results.status == 'success') {
                        $('#append_invoice_data').html(results.view)
                    } else {
                        swal("Error!", results.status, "error");
                    }
                },complete: function (){
                    setTimeout(function(){
                        // updateInvoiceGrand()
                    }, 2000);
                }
            });

        }


        function updateInvoiceGrand(studentId) {
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'POST',
                url: "{{ url('after-school/billing/update-invoice-data') }}",
                data: {
                    _token: CSRF_TOKEN,
                    Student_id: studentId
                },
                success: function (results) {
                    if (results.status == 'success') {

                    } else {
                        swal("Error!", results.status, "error");
                    }
                }
            });

        }
    </script>
@endsection