@extends('layouts.master')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('collect_fee.index') }}" method="GET">

                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group mb-2">
                                    @component('components.search_student', [
                                        'student_name' => $student_name ?? '',
                                        'student_id_no' => request()->student_id_no ?? '',
                                        'required' => '',
                                    ])
                                    @endcomponent
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    {{ generateDropdown($studentClasses, 'class="form-control student_class select2" id="student_class" name="student_class"', request()->query('student_class'), "Select Class") }}
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    {{ generateDropdown([], 'class="form-control section" id="section" name="section"', request()->query('section'), "Select Section") }}
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    <input type="date" name="from_date" value="{{old('from_date', request()->from_date)}}" class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group mb-2">
                                    <input type="date" name="to_date" value="{{old('to_date', request()->to_date)}}" class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-1">
                                <button class="btn btn-info">Search</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
            <h5>Fee Invoices</h5>
            @can('accounting-finance.collect-fees.create')
                <a href="{{ route('collect_fee.create') }}" class="btn btn-primary">Collect New Fees</a>
            @endcan
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table" id="dataTable">
                    <thead class="thead-light">
                        <tr>
                            <th>SN</th>
                            <th>Name</th>
                            <th>Class</th>
                            <th>Invice No</th>
                            <th>Total Amount</th>
                            <th>Total Discount</th>
                            <th>Late Fine</th>
                            <th>Payable Amount</th>
                            <th>Payment Method</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @php
                            $sn = 0;
                        @endphp

                        @if ($collectedFees)

                        @endif
                        @foreach ($collectedFees as $fee)
                            <tr>
                                <td>{{++$sn}}</td>
                                <td>{{$fee->student->first_name.' '.$fee->student->last_name}}</td>
                                <td>{{$fee->student->studentClass->class_name}}</td>
                                <td>{{$fee->invoice_no}}</td>
                                <td>{{$fee->total_amount}}</td>
                                <td>{{$fee->total_discount}}</td>
                                <td>{{$fee->late_fine}}</td>
                                <td>{{($fee->total_amount-$fee->total_discount)+$fee->late_fine}}</td>
                                <td>{{$fee->payment_method}}</td>
                                <td>{{$fee->invoice_date}}</td>
                                <td class="d-flex justify-content-start">
                                    @can('accounting-finance.collect-fees.view')
                                        <a href="{{ route('collect_fee.show', $fee->uuid) }}" class="btn btn-sm btn-info mr-1" target="_blank">View</a>
                                    @endcan
                                    @can('accounting-finance.collect-fees.edit')

                                    @endcan
                                    @can('accounting-finance.collect-fees.delete')
                                        <form action="{{ route('collect_fee.destroy', $fee->id) }}"
                                            method="POST"
                                            onsubmit="return confirm('Are you sure you want to delete this')"
                                            style="display:inline-block;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                        </form>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('.student_class').on('change', function(){
            let student_class_id = $('.student_class').val();
            getSection(student_class_id);
        });

        let student_class_id = "{{ request()->query('student_class') ?? '' }}";

        if(student_class_id!=''){
            getSection(student_class_id);
        }

        function getSection(student_class_id){

            let section_id = "{{ request()->query('section') ?? '' }}";
            if(student_class_id){
                $.get('{{ route('sections.list_by_class') }}', { student_class_id: student_class_id }, function(response) {
                    let sections = response;
                    console.log(sections);
                    let option = '<option value="">Select Section</option>';
                    for(let i=0;i<sections.length;i++){
                        // if(sections[i].student_class_id == student_class_id){
                            if(section_id==sections[i].id){
                                option += '<option value='+sections[i].id+' selected>'+sections[i].section_name+'</option>';
                            }else{
                                option += '<option value='+sections[i].id+' >'+sections[i].section_name+'</option>';
                            }

                        // }
                    }
                    console.log(option);
                    $('select.section').empty().append(option);
                });
            }
        }
    </script>
@endpush