@extends('layouts.parents.master') 
@section('title')
    {{studentCommonName(auth()->guard('student')->user()->username).__(' | DFE Ledger')}}
@endsection
@section('headerTitle')
  {{__('DFE Ledgers')}}
@endsection
@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <!-- <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{route('student.parent.dashboard')}}">Home</a></li>
              <li class="breadcrumb-item active">DFE Ledger</li>
            </ol>
          </div>
        </div>
      </div> -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                @php
                    $i=0;
                @endphp
                @foreach ($responseData['sessionYears'] as $sessionYear)
                    @php
                        if(request()->has('sessionYear')) {
                            $className = request()->sessionYear == $sessionYear->month ? 'bg-gradient-success' : 'bg-gradient-primary';
                        } else {
                            $className = $i == 0 ? 'bg-gradient-success' : 'bg-gradient-primary';
                        }
                        $i++;
                    @endphp
                    <div class="col-sm-2">
                        <a href="{{route('student.parent.dfe-ledger')}}?sessionYear={{$sessionYear->month}}" class="btn btn-block {{$className}} btn-lg">{{$sessionYear->month}}</a>
                    </div>
                @endforeach
            </div>    
        </div>
    </section>            

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
            <div class="col-12">
            <div class="card">
                <!-- /.card-header -->
                <div class="card-body">
                    <div style="overflow-x: auto;">
                        <table id="feeLedger" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <!-- <th>S.No</th>
                                    <th>Date</th> -->
                                    <th>Description({{$responseData['firstYear'][0]->month??''}})</th>
                                    <th>Fee</th>
                                    <th>Received</th>
                                    <th>Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($responseData['firstYear'] as $key)
                                    <tr>
                                        <td>{{ date('d-M-Y', strtotime($key->date))}}<br>{{$key->desc}}</b></td>
                                        <td>{{ $key->debit }}</td>
                                        <td>{{ $key->credit }}</td>
                                        <th>{{ $key->balance }}</th>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- /.card-body -->
                </div>
            </div>
        </div>
        </div>
    </section>
</div> 
<style>
    table.dataTable {
        width: 100% !important;
        white-space: nowrap;
    }
</style>
@endsection
@push('web-scripts')
   <script>
        $(document).ready(async function() {
            $('#feeLedger').DataTable({
                "scrollX": true
            });
        });
   </script>
@endpush