@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Sessions</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 Session</h3>
                    </div>

                    <div class="card-body">
                        <p>Create a Brand new Session</p>
                        <form method="POST" action="{{route('sessions.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="session_name_create">Name <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="sname" value="{{ old('sname')}}" class="form-control" id="session_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="session_description_create">Description</label>
                                    </div>
                                    <div class="col-md-9">

                                        <textarea class="form-control" name="sdescription" id="session_description_create"
                                            rows="3">{{ old('sdescription')}}</textarea>
                                    </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
                                        Session</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">Sessions List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="table table-striped table-bordered table-vcenter text-nowrap" id="session_table">
                                <thead>
                                    <tr>

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


                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $count=0
                                    @endphp
                                    @foreach ($sessions as $s )

                                    <tr>
                                        <td style="text-align: center;">{{++$count}}</td>
                                        <td>{{$educationSystems->firstWhere('esid',$s->esid)->esname}}</td>
                                        <td>{{$boards->firstWhere('bid',$s->bid)->bname}}</td>

                                        <td>{{$s->sname}}</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="{{$s->sdescription}}"></i>
                                        </td>



                                        <td style="text-align: center;">
										<div data-bs-toggle="tooltip"  data-bs-original-title="Edit">
                                            <button type="button"
											    value="{{$s->sid}}"
                                                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,{{$s->sid}})" 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('sessions.destroy', $s->sid) }}" id="delete-form-{{$s->sid}}">
                                                @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="session_form_update" name="sessionform" 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="session_name_update">Name <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="sname" class="form-control" id="session_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="session_description_update">Description</label>
                                    </div>
                                    <div class="col-md-9">

                                        <textarea class="form-control" name="sdescription" id="session_description_update"
                                            rows="3"></textarea>
                                    </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="session_id" name="session_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 session_id = $(this).val();
            $.get('/staff/sessions/' + session_id, function (data) {
                $edit_bid=data.bid;
                jQuery('#session_id').val(data.sid);
                jQuery('#education_system_name_update').val(data.esid).change();
                jQuery('#session_name_update').val(data.sname);
                jQuery('#session_description_update').val(data.sdescription);
                jQuery('#submit').val("update");
                jQuery('#session_form_update').attr('action','/staff/sessions/' + session_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>
{{-- draw all data tables --}}
<script>
    $(document).ready(function(){
        $('#session_table').dataTable( {
            "drawCallback": function( settings ) {
            }
        })
    })
    </script>
@endsection