@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Levels</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add New Level</h3>
                    </div>

                    <div class="card-body">
                        <p>Create a Brand new Level</p>
                        <form method="POST" action="{{route('levels.post')}}" class="form-horizontal">
                            @csrf
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="education_system_name_create">Education System <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="education_system_name_create" name="esid" class="form-control select2-show-search" required>
                                        <option value="0" disabled selected>Select</option>
                                        @foreach ($educationSystems as $item)

                                            <option value="{{$item->esid}}">{{$item->esname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_name_create">Board <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="board_name_create" name="bid" class="form-control select2-show-search" required>


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

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="level_name_create">Name <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="lname" value="{{ old('lname')}}" class="form-control" id="level_name_create" placeholder=""
                                            required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="level_short_name_create">Short Name <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="lshort_name" value="{{ old('lshort_name')}}" class="form-control" id="level_short_name_create"
                                            placeholder="" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="level_description_create">Description</label>
                                    </div>
                                    <div class="col-md-9">

                                        <textarea class="form-control" name="ldescription" id="level_description_create"
                                            rows="3">{{ old('ldescription')}}</textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Website</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="url" name="lurl" value="{{ old('lurl')}}" id="level_url_create" onchange="return validURL('level_url_create')" class="form-control" placeholder="">
                                    </div>
                                </div>
                            </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">Add New
                                        Level</button>
                                </div>
                            </div>

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

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Levels List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="table table-striped table-bordered table-vcenter text-nowrap" id="level_table">
                                <thead>
                                    <tr>

                                        <th style="text-align: center;">Id</th>
                                        <th>Education System</th>
                                        <th>Board</th>
                                        <th>Short Name</th>

                                        <th>Name</th>
                                        <th style="text-align: center;">Description</th>
                                        {{-- <th style="text-align: center;">Website</th> --}}

                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $count=0
                                    @endphp
                                    @foreach ($levels as $l )
                                    <tr>
                                        <td style="text-align: center;">{{++$count}}</td>
                                        <td>{{$educationSystems->firstWhere('esid',$l->esid)->esname}}</td>
                                        <td>{{$boards->firstWhere('bid',$l->bid)->bname}}</td>
                                        <td>{{$l->lshort_name}}</td>
                                        <td>{{$l->lname}}</td>
                                        <td style="text-align: center;">
                                            <i class="mdi mdi-information-outline leading-loose"
                                                data-bs-toggle="tooltip" data-bs-placement="bottom" title=""
                                                data-bs-original-title="{{$l->ldescription}}"></i>
                                        </td>
                                        {{-- <td style="text-align: center;"><a href="{{$l->lurl}}" target="_blank"><i
                                                    class="fa fa-globe text-secondary"></i></a></td> --}}
                                        <td style="text-align: center;">
                                            <div data-bs-toggle="tooltip" data-bs-original-title="Edit">
                                                <button type="button" value="{{$l->lid}}"
                                                    class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                                    data-bs-effect="effect-sign" data-bs-toggle="modal"
                                                    data-bs-original-title="Edit" data-bs-target="#edit"><i
                                                        class="fa fa-edit fs-16"></i></button>
                                            </div>
                                            <a href="javascript:void(0)" onClick="confirmDelete(event,{{$l->lid}})" class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                    data-bs-toggle="tooltip" data-bs-original-title="Delete"
                                                    title='Delete'>
                                                    <i class="fa fa-trash fs-16"></i>
                                            <form method="POST" action="{{ route('levels.destroy', $l->lid) }}" id="delete-form-{{$l->lid}}">
                                                @csrf
                                                <input name="_method" type="hidden" value="DELETE">

                                            </form>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit form modal -->
<div class="modal  fade effect-sign show" id="edit" tabdocumentation="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-Modal3">Edit</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" id="level_form_update" name="levelform" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="education_system_name_update">Education System <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="education_system_name_update" name="esid" class="form-control select2-show-search" required>

                                            @foreach ($educationSystems as $item)

                                            <option value="{{$item->esid}}">{{$item->esname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_name_update">Board <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="board_name_update" name="bid" class="form-control select2-show-search" required>

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

                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="level_name_update">Name <i class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="lname" class="form-control" id="level_name_update" placeholder="" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="level_short_name_update">Short Name <i class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="lshort_name" class="form-control" id="level_short_name_update"
                                    placeholder="" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="level_description_update">Description</label>
                            </div>
                            <div class="col-md-9">

                                <textarea class="form-control" name="ldescription" id="level_description_update"
                                    rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="level_url_update">Website</label>
                            </div>
                            <div class="col-md-9">
                                <input type="url" name="lurl" id="level_url_update" onchange="return validURL('level_url_update')" class="form-control" placeholder="">
                            </div>
                        </div>
                    </div> --}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                <input type="hidden" id="level_id" name="level_id" value="0">
            </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('admin-js')
<script>
    $(document).ready(function () {
        $edit_bid=0;
        // Get Record data using it's id
        jQuery('body').on('click', '.edit', function () {
            var level_id = $(this).val();
            $.get('/staff/levels/' + level_id, function (data) {
                jQuery('#level_id').val(data.lid);
                $edit_bid=data.bid;
                jQuery('#education_system_name_update').val(data.esid).change();
                jQuery('#level_name_update').val(data.lname);
                jQuery('#level_description_update').val(data.ldescription);
                // jQuery('#level_url_update').val(data.lurl);
                jQuery('#level_short_name_update').val(data.lshort_name);
                jQuery('#submit').val("update");
                jQuery('#level_form_update').attr('action','/staff/levels/' + level_id)
            })
        });

    // Education system and boards dependent select in update form
        $('#education_system_name_update').on('change', function () {
                var $board = $('#board_name_update');
                $('#board_name_update').empty();
                $('#board_name_update').append(`<option value="0" disabled selected>Processing...</option>`);
                $.ajax({
                    url: "{{ route('getBoard') }}",
                    type: 'GET',
                    data: {
                        esid: $(this).val()
                    },
                    success: function (data) {
                        $('#board_name_update').empty();

                        $.each(data, function (id, value) {
                            $board.append('<option value="' + id + '">' + value + '</option>');
                        });
                        jQuery('#board_name_update').val($edit_bid).change();

                        }
                });
            });


    })

</script>
<script>
    $(document).ready(function(){
        $('#level_table').dataTable( {
            "drawCallback": function( settings ) {
            }
        })
    })
    </script>
@endsection