@extends('layouts.dashboard')

@section('title-content')
    <title>{{ config('app.name') }} | Fee Controller</title>
@endsection


@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="boxpane">
                <div class="boxpane-header">
                    <h2 class="blue"><i class="fa-fw fa fa-dashboard"></i>
                        Fee Controller - All programmes
                    </h2>

                    <div class="boxpane-icon">
                        <ul class="btn-tasks">
                            <li class="dropdown">
                                <a data-toggle="dropdown" href="#">
                                    <i class="icon fa fa-tasks" data-placement="left" title="{{ 'Actions' }}"></i>
                                </a>
                                <ul class="dropdown-menu pull-right" class="tasks-menus" role="menu"
                                    aria-labelledby="dLabel">
                                    <li>
                                        <a type="button" data-toggle="modal" data-target="#exampleModal" href="#">
                                            <i class="fa fa-plus-circle"></i>
                                            {{ 'Add Control' }}
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        {!! Form::open([
                            'route' => 'finances.tuition-fees-store',
                            'class' => 'create-courses-setup',
                            'method' => 'POST',
                            'role' => 'form',
                        ]) !!}
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Create Fee Control for a Program</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="row m-md-2">
                                        <div class="col-md-12 mb-4">
                                            <label>Select Program <span class="text-danger">*</span></label>
                                            <select name="program_id" id="program_id" class="mb-3 col-md-12">
                                                <option value=""></option>
                                                @foreach ($programs as $p)
                                                    <option value="{{ $p->id }}">{{ $p->program_name }} [
                                                        {{ $p->program_code }}]
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label>Enter Semester One Minimum Amount <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" id="sem1_min_amount" name="sem1_min_amount"
                                                class="date form-control col-md-12">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label>Enter Semester Two Minimum Amount <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" id="sem2_min_amount" name="sem2_min_amount"
                                                class="col-md-12 date form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-folder"></i>
                                        Save</button>
                                </div>
                            </div>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
                <div class="boxpane-content">
                    <div class="row">
                        <div class="col-lg-12">
                            <p class="introtext">
                                Here below is the list of all academic programmes and their tuition fees Controller.Click
                                edit fee to change the tuition fee of the programme.
                            </p>
                            <div class="table-responsive">
                                <table id="factTable" class="table table-bordered table-hover" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th style="width:3%">#</th>
                                            <th>Programme Name</th>
                                            <th>Academic Year</th>
                                            <th>Sem One Min Amount </th>
                                            <th>Sem Two Min Amount</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/dashboard/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#factTable').DataTable({
                processing: true,
                serverSide: true,

                ajax: '{{ route('finances.tuition-fees-json') }}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'program_name',
                        name: 'program_name'
                    },
                    {
                        data: 'academic_year',
                        name: 'academic_year'
                    },
                    {
                        data: 'sem1_min_amount',
                        name: 'sem1_min_amount'
                    },
                    {
                        data: 'sem2_min_amount',
                        name: 'sem2_min_amount'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
            $('#program_id').select2({
                //minimumResultsForSearch: -1,
                placeholder: 'Select Program'
            });
        })
    </script>
@endsection