@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Enrollments</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="tab-menu-heading  d-flex justify-content-center">
                            <div class="tabs-menu ">
                                <!-- Tabs -->
                                <ul class="nav panel-tabs">
                                    <li class="">
                                        <a href="#tab1" class="active" data-bs-toggle="tab">
                                            Manual
                                            <i class="fa fa-hand-paper-o ms-1"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#tab2" data-bs-toggle="tab" class="">
                                            From CSV
                                            <i class="fa fa-file-excel-o ms-1"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="panel-body tabs-menu-body">
                            <div class="tab-content">
                                <div class="tab-pane active py-6" id="tab1">
                                    <form enctype="multipart/form-data" method="POST"
                                        action="{{route('courseofferings.addEnrollment')}}" class="form-horizontal" id="create_form">
                                        @csrf
                                        <div class="form-group">
                                            <label for="student" class=" mt-3 mb-sm-1"> Student: <i
                                                    class="text-danger">(required)</i></label>
                                            <select class="form-control select2-show-search" id="student" required name="student">
                                                <option value="0" disabled selected>Search with userID or email</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="student" class=" mt-3 mb-sm-1"> Course Name: <i
                                                    class="text-danger">(required)</i></label>
                                                    <select class="form-control select2-show-search" id="course"  name="course" required>
                                                    </select>
                                            {{-- <select class="form-control select2-show-search" id="course" required name="course">
                                                <option value="0" disabled selected>Select Course*</option>
                                                @foreach ($courses as $course )
                                                    <option value="{{ $course->coffid }}" {{$course->coffid == request()->course ? 'selected':''}}>
                                                        {{$course->has_label ? ' ( '.$course->label.' ) ':''}} {{$course->acyname . "_" . $course->cname.' '.' ( '.$course->lshort_name.' ) ' }}
                                                    {{$course->ttname}}
                                                    </option>
                                                @endforeach
                                            </select> --}}
                                        </div>
                                        <div class="form-group">
                                            <label for="group" class=" mt-3 mb-sm-1"> Group Name: <i
                                                class="text-danger">(required)</i></label>
                                            <select class="form-control select2-show-search" id="group" required name="group">
                                            </select>
                                        </div>
                                        <div class="form-group d-none">
                                            <label for="payment_type" class=" mt-3 mb-sm-1"> Payment Type: <i
                                                    class="text-danger">(required)</i></label>
                                            <select name="payment_type" class="form-select select2" id="payment_type" readonly>
                                                {{-- <option value="1">By Lesson</option> --}}
                                                <option  value="2">By Course</option>
                                                {{-- <option value="3">Discount</option>
                                                <option value="4">Free</option> --}}
                                            </select>
                                        </div>
                                        <div class="form-group" id="discount" style="display: none">
                                            <label for="dsicount" class=" mt-3 mb-sm-1"> Discount: <i
                                                    class="text-danger">(required)</i></label>
                                           <input type="number" min="1" name="discount" class="form-control" >
                                        </div>
                                        <div class="form-group mb-0 row justify-content-end">
                                            <div class="col-md-3">
                                                <button type="submit" class="btn btn-primary waves-effect waves-light">Enroll</button>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                                <div class="tab-pane py-6" id="tab2">
                                    <div class="alert alert-primary">
                                        <div class="d-flex">
                                            <form method="get" action="{{route('courseofferings.downloadExcelTemplate')}}">
                                                <b>*Please download this template file in order to be able to upload the data properly</b>
                                                <button type="submit" class="btn btn-sm text-light ms-3" style="background:#8c2828">
                                                    Download
                                                    <i class="fa fa-cloud-download ms-1"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                    <form class="mt-6" id="upload_form" enctype="multipart/form-data" method="POST" action="{{route('courseofferings.enrollmentsImport')}}">
                                        @csrf
                                        <div id="loading_section" class="d-none" style="background:#ef9230;z-index:100;opacity:.5;position:absolute;top:0;left:0;width:100%;height:100%">
                                            <div class="dimmer active m-0">
                                                <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label class="form-label mt-2" for="course">Course</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <select name="course" id="upload_course" class="form-control select2-show-search" required>
                                                    <option value="0" disabled selected>Select Course*</option>
                                                        @foreach ($courses as $course )
                                                            <option value="{{ $course->coffid }}" {{$course->coffid == request()->course ? 'selected':''}}>
                                                                {{$course->has_label ? ' ( '.$course->label.' ) ':''}} {{$course->acyname . "_" . $course->cname.' '.' ( '.$course->lshort_name.' ) ' }}
                                                            {{$course->ttname}}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3 mt-4">
                                                    <label for="upload_group" class=" mt-3 mb-sm-1"> Group Name: <i
                                                        class="text-danger">(required)</i></label>
                                                </div>
                                                <div class="col-md-9 mt-4">
                                                    <select class="form-control select2-show-search" id="upload_group" required name="group">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label class="form-label mt-2" for="file">File <i
                                                            class="text-danger">(required)</i></label>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="control-group form-group">
                                                        <div class="input-group file-browser">
                                                            <input type="text" class="form-control border-end-0 browse-file bg-transparent" placeholder="Upload CSV" readonly="" required>
                                                            <label class="input-group-btn mb-0">
                                                            <span class="btn btn-primary br-bs-0 br-ts-0">
                                                                Browse <input type="file" name="file" style="display: none;" required accept=".csv">
                                                            </span>
                                                        </label>
                                                        </div>
                                                    </div>
                                                    <div class="text-muted">
                                                        <span>*max allowed number of students are 100 per upload</span><br>
                                                        <span>*allowed format is csv only</span><br>
                                                        {{-- <span>*enrollment method:</span><br>
                                                        <span>1 is for by lesson</span><br>
                                                        <span>2 is for by course</span><br>
                                                        <span>3 is for by lesson with discount, so please don't forget to insret the discount</span><br>
                                                        <span>4 is for free</span><br> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3 d-flex justify-content-center">
                                            <div class="">
                                                <button type="submit" class="btn btn-primary waves-effect waves-light" id="upload_btn">
                                                    Upload
                                                    <i class="fa fa-cloud-upload ms-1"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin-js')
  <script>

        // for manual enroll
        $('#course').on('change', function() {
            var $group = $('#group');
            var url="{{ route('getCourseOfferingGroups',[':coffid']) }}"
            url=url.replace(':coffid',$(this).val())

            $('#group').empty();
            $('#group').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: url,
                type: 'GET',
                success: function(data) {
                    $('#group').empty();
                    $('#group').append(
                        `<option value="0" disabled selected>Select Group*</option>`);
                    $.each(data, function(id, value) {
                        $group.append('<option value="' + value.gid + '">' +
                            value.group_name.gname + '</option>');
                    });
                }
            });
        });
        // for csv enroll
        $('#upload_course').on('change', function() {
            var $group = $('#upload_group');
            var url="{{ route('getCourseOfferingGroups',[':coffid']) }}"
            url=url.replace(':coffid',$(this).val())

            $('#upload_group').empty();
            $('#upload_group').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: url,
                type: 'GET',
                success: function(data) {
                    $('#upload_group').empty();
                    $('#upload_group').append(
                        `<option value="0" disabled selected>Select Group*</option>`);
                    $.each(data, function(id, value) {
                        $group.append('<option value="' + value.gid + '">' +
                            value.group_name.gname + '</option>');
                    });
                }
            });
        });

        $('#payment_type').change(function() {
            if ($(this).val() === '3') {
                $('#discount').css('display','block')
            }else{
                $('#discount').css('display','none')
            }
        });

        $('#upload_form').on('submit',function(){
            $('#upload_btn').attr('disabled',true)
            $('#upload_btn').html(
                `
                Uploading
                <div class="progress progress-md mb-3">
                    <div class="progress-bar progress-bar-indeterminate progress-bar-striped " style="background:#8c2828"></div>
                </div>
                `
            )
            $('#loading_section').removeClass('d-none')
        })

  </script>

  <script>
    $('#student').on('select2:select', function (e) {
            var selectedData = e.params.data;
            var esid = selectedData.esid;

            var $course = $('#course');
            $('#course').empty();
            $('#course').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('educationSystemFilter') }}",
                type: 'GET',
                data: {
                    esid: esid
                },
                success: function(data) {
                    $('#course').empty();
                    $('#course').append(
                        `<option value="0" disabled selected>Select Course*</option>`);
                    // offered course
                    $.each(data.course, function(id, value) {
                        value.teaching_team.coaching_teachers.map((teacher)=>{
                                    $course.append('<option value="' + value.coffid + '">' +
                                    (value.has_label ? '( '+value.label+' ) ' : '') +  value.course.cname + ' ( '+ value.course.level.lshort_name+' ) '
                                    +'_ '+ teacher.first_name+' '+ teacher.middle_name+' '+ teacher.last_name
                                    +'_ '+value.academic_year_session.sessions.sname+'_'+value.academic_year_session.year
                                    +'</option>');
                                })
                    });
                }
            });
        });
  </script>
@endsection