@extends('layouts.admin')

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

                    <div class="card-body">
                        <form method="POST" action="{{route('admin.teacher.invite.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" id="iname">Name <i
                                                class="text-danger" class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="ifname" class="form-control" id="ifname"
                                            required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" id="imname">Middle Name <i
                                                class="text-danger" class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="imname" class="form-control" id="imname"
                                             required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" id="ilname">Last Name <i
                                                class="text-danger" class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="ilname" class="form-control" id="ilname"
                                           required>
                                    </div>
                                </div>
                            </div>

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

                                        <input type="email" class="form-control" name="iemail" id="iemail"
                                          placeholder="jdoe@example.com"  required></input>
                                    </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">Invite</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">Invites List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
                                <thead>
                                    <tr class="text-center">

                                        <th style="text-align: center;">Id</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th style="text-align: center;">Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $count=0;
                                    @endphp
                                    @foreach ($invites as $invite )
                                    <tr class="text-center">
                                        <td>{{++$count}}</td>
                                        <td style="text-align: center;">
                                            {{$invite->ifname}}
                                            {{$invite->imname}}
                                            {{$invite->ilname}}
                                        </td>
                                        <td style="text-align: center;">
                                            {{$invite->iemail}}
                                        </td>
                                        <td style="text-align: center;">
                                            <span class="badge badge-success" >{{$invite->istatus}}</span>
                                        </td>

                                                <td style="text-align: center;">
                                                    <a class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                    href="{{route('admin.teacher.invite.resend',$invite->iid)}}"
                                                        data-bs-toggle="tooltip"
                                                        data-bs-original-title="Resend Invitation"><i
                                                            class="fa fa-envelope fs-16"></i></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="eduform" name="eduform" enctype="multipart/form-data">
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" id="examplenameInputname2">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="esname"
                                    placeholder="" required >
                            </div>
                        </div>
                    </div>

                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2">Description</label>
                            </div>
                            <div class="col-md-9">

                                <textarea class="form-control text-start" name="esdescription" id="desc"
                                    rows="6" ></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="text" id="website" name="esurl" class="form-control" placeholder="">
                            </div>
                        </div>
                    </div>

                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2">Image </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 Image"  readonly="" required>
                                        <label class="input-group-btn">
                                            <span class="btn btn-primary br-bs-0 br-ts-0">
                                                Browse <input id="imageUpdate" type="file" name="image" accept="image/*" onchange="return fileValidation('imageUpdate')" style="display: none;" required>
                                            </span>
                                        </label>
                                    </div>
                                </div>

                            </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="es_id" name="es_id" value="0">
            </div>
			</form>
        </div>
    </div>
</div>
@endsection
@section('admin-js')
<script>
$(document).ready(function(){
        // Get Record data using it's id
		jQuery('body').on('click', '.edit', function () {
            var es_id = $(this).val();
            $.get('/staff/regulation/education-system/' + es_id, function (data) {
                jQuery('#es_id').val(data.esid);
                jQuery('#esname').val(data.esname);
                jQuery('#desc').val(data.esdescription);
                jQuery('#website').val(data.esurl);
                // jQuery('#image').val(data.esimage);
                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 = $('#imageUpdate')[0].files;
        if(files.length > 0 ){
            formData.append('image',files[0]);
        }
        formData.append('_method', 'PUT');
        formData.append('esname', jQuery('#esname').val());
        formData.append('esdescription', jQuery('#desc').val());
        formData.append('esurl', jQuery('#website').val());
        formData.append('esimage', jQuery('#image').val());
        var state = jQuery('#submit').val();
        var type = "POST";
        var es_id = jQuery('#es_id').val();
        var ajaxurl = '/staff/regulation/education-system/' + es_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({
                    title: "Success",
                    text: "Education System Updated Successfully",
                    type: "success",
                });
            },
            error: function (data) {
                console.log('Error:', data.responseJSON.message);
            }
        });
    });

	})


        function fileValidation(id) {
            var fileInput =
                document.getElementById(id);

            var filePath = fileInput.value;

            // Allowing file type
            var allowedExtensions =
                    /(\.jpg|\.jpeg|\.png|\.gif)$/i;

            if (!allowedExtensions.exec(filePath)) {
                alert('Invalid file type');
                fileInput.value = '';
                return false;
            }


        }


</script>
@endsection