@extends('layouts.master')
@section('content')
<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('student_discount.search') }}" class="row">
            @csrf

            <div class="form-group col-lg-3 col-md-4 col-sm-6">
                @component('components.search_student', ['student_name' => $student_name ?? '', 'student_id_no' => $student_id_no ?? ''])
                @endcomponent
            </div>

            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown($shifts, 'class="form-control shift_id" id="shift_id" name="shift_id"', $shift_id, "Select Shift") }}
            </div>

            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown($studentClasses, 'class="form-control student_class" id="student_class" name="student_class_id"', $student_class_id, "Select Class") }}
            </div>

            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown($sections, 'class="form-control section_id" id="section_id" name="section_id"', $section_id) }}
            </div>

            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown($groups, 'class="form-control group_id" id="group_id" name="group_id"', $group_id, "Select Group") }}
            </div>

            <div class="form-group col-lg-1 col-md-4 col-sm-6">
                <button type="submit" class="btn btn-info ">Search</button>
            </div>
        </form>
    </div>
</div>
@if (isset($students))

    <div class="card mt-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">

                    @csrf
                    @if (!empty($students))
                        <div class="table-responsive">

                            <table class="table">
                                <thead class="thead-light">
                                    <tr>
                                        <th>ID No</th>
                                        <th>Student Name</th>
                                        <th>Class</th>
                                        {{-- <th>Gurdian Number</th> --}}
                                        <th>Discount Type</th>
                                        <th>Amount/Percentage</th>
                                        <th>Note</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach($students as $student)
                                        <tr>
                                            <td>
                                                {{ $student->student_id_no }}
                                                <input type="hidden" name="student_id" value="{{$student->id}}">
                                                <input type="hidden" name="class_id" value="{{$student->student_class_id}}">
                                            </td>
                                            <td>{{ $student->first_name }} {{ $student->last_name }}</td>
                                            <td>{{ $student->studentClass->class_name ?? '' }}</td>
                                            {{-- <td>{{ $student->guardian_mobile ?? '' }}</td> --}}
                                            <td>
                                                <select name="discount_type" class="form-control" id="discount_type">
                                                    <option value="percentage">Percentage(%)</option>
                                                    <option value="fixedamount">Fixed Amount</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" name="amount" value="{{array_key_exists($student->id,$previous_discount) ? $previous_discount[$student->id]: ''}}" class="form-control">
                                            </td>
                                            <td>
                                                <input type="text" name="note" class="form-control">
                                            </td>
                                            <td>
                                                @can('accounting-finance.fees-discount.create')
                                                    <button class="btn btn-info save-discount">Save</button>
                                                @endcan
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif

                </div>

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

@endif
@stop



@section('scripts')
    <script>

        $('.save-discount').on('click', function() {

            var button = $(this);
            var originalButtonText = button.text();

            // Set the loading state
            button.text('Saving...').prop('disabled', true);

            var row = $(this).closest('tr');
            var studentId = row.find('input[name="student_id"]').val();
            var class_id = row.find('input[name="class_id"]').val();
            var discountType = row.find('select[name="discount_type"]').val();
            var amount = row.find('input[name="amount"]').val();
            var note = row.find('input[name="note"]').val();

            $.ajax({
                url: '{{ route("student_discount.store") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    student_id: studentId,
                    class_id: class_id,
                    discount_type: discountType,
                    amount: amount,
                    note: note
                },
                success: function(response) {
                    // Handle success response
                    toastr.success("Discount saved successfully!", 'Success');
                },
                error: function(xhr) {
                    // Handle error response
                    toastr.error("Error saving discount!", 'Error');
                },
                complete: function() {
                    // Revert the button back to its original state
                    button.text(originalButtonText).prop('disabled', false);
                }
            });
        });

        $('.student_class').on('change', function(){
            let student_class_id = $('.student_class').val();
            getSection(student_class_id);
        });

        let student_class_id = "{{ isset($student_class_id) ? $student_class_id : '' }}";

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

        function getSection(student_class_id){
            let section_id = "{{ isset($section_id) ? $section_id : '' }}";
            if(student_class_id){
                $.get('{{ route('sections.list_by_class') }}', { student_class_id: student_class_id }, function(response) {
                    let sections = response;

                    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>';
                            }

                        // }
                    }
                    $('select.section_id').empty().append(option);
                });
            }
        }

    </script>
@endsection