@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Education System</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 Education System</h3>
                    </div>
                    <div class="card-body">
                        <p>Create a Brand new Education System</p>

                        <form method="POST" action="{{route('regulation.education-system.post')}}"
                            class="form-horizontal" 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_create"
                                            id="examplenameInputname2">Name <i class="text-danger"
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="esname" value="{{ old('esname')}}" class="form-control"
                                            id="education_system_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="education_system_description_create">Description</label>
                                    </div>
                                    <div class="col-md-9">

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

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

                                        <select id="grade" name="grade[]" class="form-control select2-show-search" multiple required>
                                            @foreach ($grades as $grade)
                                            <option value="{{$grade->id}}">{{$grade->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Annual <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <label class="form-swich">
                                            <input type="hidden" name="is_annual" value="0">
                                            <input type="checkbox" name="is_annual" class="form-switch-input" value="1" {{ old('is_annual') ? 'checked' : '' }}>
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description"></span>
                                        </label>
                                    </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
                                        Education System</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">Education Systems List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="table table-striped table-bordered table-vcenter text-nowrap" id="edu_table">
                                <thead>
                                    <tr>

                                        <th style="text-align: center;">Id</th>
                                        <th>Name</th>
                                        <th>Grades</th>
                                        <th>Anuual</th>
                                        <th style="text-align: center;">Description</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $count=0
                                    @endphp
                                    @foreach ($educationSystems as $es )
                                    <tr>
                                        <td style="text-align: center;">{{++$count}}</td>

                                        <td>{{$es->esname}}</td>
                                        <td>
                                            @foreach ($es->grades as $grade)
                                                <span class="badge badge-info">{{ $grade->name }}</span>
                                            @endforeach
                                        </td>
                                        <td>
                                            @if ($es->is_annual)
                                            Yes
                                            @else
                                            No
                                            @endif
                                        </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="{{$es->esdescription}}"></i>
                                        </td>

                                        <td style="text-align: center;">
                                            <div data-bs-toggle="tooltip" data-bs-original-title="Edit">
                                                <button type="button" value="{{$es->esid}}"
                                                    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,{{$es->esid}})" 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('regulation.education-system.destroy', $es->esid) }}" id="delete-form-{{$es->esid}}">
                                                @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 id="education_system_form_update" name="education_system_form_update"
                    enctype="multipart/form-data">
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="education_system_name_update">Name <i
                                        class="text-danger" class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="esname" class="form-control" id="education_system_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="education_system_description_update">Description</label>
                            </div>
                            <div class="col-md-9">

                                <textarea class="form-control text-start" name="esdescription"
                                    id="education_system_description_update" rows="6"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="grade">Grade<i class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">
                                <select id="grade_update" name="grade[]" class="form-control select2-show-search" multiple required>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2">Annual <i
                                        class="text-danger">(required)</i></label>
                            </div>
                            <div class="col-md-9">
                                <label class="form-swich">
                                <input type="checkbox" name="is_annual" class="form-switch-input" id="is_annual_update">
                                <span class="form-switch-indicator"></span>
                                <span class="form-switch-description"></span>
                                </label>
                            </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="education_system_id" name="esid" value="0">
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('admin-js')
<script>
    $(document).ready(function () {
        // Check if the image is inserted
        // $( "form" ).submit(function(event){
        //     validate_image(event)
        // })
        // Get Record data using it's id
        jQuery('body').on('click', '.edit', function () {
            var education_system_id = $(this).val();
            $.get('/staff/regulation/education-system/' + education_system_id, function (data) {
                jQuery('#education_system_id').val(data.esid);
                jQuery('#education_system_name_update').val(data.esname);
                jQuery('#education_system_description_update').val(data.esdescription);
                jQuery('#education_system_url_update').val(data.esurl);
                jQuery('#is_annual_update').prop("checked", data.is_annual == 1);

                // Fill the grades select input
                var gradeSelect = $('#grade_update');
                gradeSelect.empty(); // Clear existing options
                $.each(data.grades, function(index, grade) {
                    gradeSelect.append(
                        $('<option></option>').val(grade.id).text(grade.name)
                    );
                });

                gradeSelect.val(data.grade_ids).change();

                // Update submit button value
                jQuery('#submit').val("update");
            });
        });

        // Update Record
        $("#submit").click(function (e) {
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            var formData = new FormData();

            // var files = $('#education_system_image_update')[0].files;
            // if (files.length > 0) {
            //     formData.append('esimage', files[0]);
            // }
            formData.append('_method', 'PUT');
            formData.append('esname', jQuery('#education_system_name_update').val());
            formData.delete('grade[]');
            jQuery('#grade_update').val().forEach(function(grade) {
                formData.append('grade[]', grade); // Append each selected grade
            });
            formData.append('esdescription', jQuery('#education_system_description_update').val());
            // formData.append('esurl', jQuery('#education_system_url_update').val());
            // formData.append('esimage', jQuery('#education_system_image_update').val());
            formData.append('is_annual', jQuery('#is_annual_update').is(':checked') ? 1 : 0);
            var state = jQuery('#submit').val();
            var type = "POST";
            var education_system_id = jQuery('#education_system_id').val();
            var ajaxurl = '/staff/regulation/education-system/' + education_system_id;

            $.ajax({
                url: ajaxurl,
                type: type,
                processData: false,
                contentType: false,
                cache: false,
                data: formData,
                enctype: 'multipart/form-data',
                success: function (data) {
                    jQuery('#edit').modal('hide')
                    setInterval('location.reload()', 1500);
                    Swal.fire(
                        "Success",
                        "Education System Updated Successfully",
                        "success",
                    );
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        notif({
                            type: "error",
                            msg: xhr.responseJSON.error,
                            position: "right",
                            opacity: 0.8,
                            autohide: true
                        });
                    }
                }
            });
        });

    })


</script>
{{-- draw all data tables --}}
<script>
    $(document).ready(function(){
        $('#edu_table').dataTable( {
            "drawCallback": function( settings ) {
            }
        })
    })
    </script>
@endsection