@extends('layouts.admin')
@section('content')
    <section class="content-header">
        <label>
           Data Guru & Karyawan
        </label>
        <ol class="breadcrumb">
            <li><a href="{{ url('dashboard') }}"><i class="fa fa-home"></i> Dashboard</a></li>
            <li class="active">Guru & Karyawan</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <button class="btn btn-info btn-sm" onclick="reload()">
                            <i class="fa fa-refresh"></i> Refresh
                        </button>
                        <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#md-upload">
                            <i class="fa fa-plus"></i> Tambah
                        </button>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Nama </label>
                                    <div class="input-group">
                                        <span class="input-group-addon"><li class="fa fa-search"></li></span>
                                        <input type="text" class="form-control" placeholder="nama" id="src_name" name="src_name">
                                    </div>    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    
        <div class="row">
            <div class="col-lg-12">
                <div class="box box-success">
                        <div class="box-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="ajax-datatables_img"
                                            style="width: 100%">
                                            <thead>
                                                <tr>
                                                    <th width="5%">No</th>
                                                    <th width="6%">Gambar</th>
                                                    <th>Nama</th>
                                                    <th>Posisi</th>
                                                    <th width="15%">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="md-upload">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Tambah Guru & Karyawan</h4>
                </div>
                <form id="upload-img-form">
                    <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <div class="form-group mb-4">
                                        <label>Gambar - <span style="color: red">Max Size 1Mb</span></label>
                                        <input type="file" class="form-control" id="img_source"
                                            name="img_source">
                                    </div>
                                    <center>
                                        <img width="100%" id="source_img" style="border-radius: 5px"
                                            src="{{ asset('assets/admin/images/no-image.png') }}" alt="" />
                                    </center>

                                </div>

                                <div class="col-lg-6 mb-3">
                                    <div class="form-group mb-4">
                                        <label>Nama Lengkap<span class="require"></span></label>
                                        <input type="text" class="form-control" placeholder="Enter text alt" id="fullname" name="fullname">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="credit">Posisi</label>
                                        <select class="form-control select2 inp-fadd" id="position" name="position" style="width: 100%;" required>
                                            <option value="">- Pilih -</option>
                                            <option value="Kepala Sekolah">Kepala Sekolah </option>
                                            <option value="Wakil Kepala Sekolah">Wakil Kepala Sekolah</option>
                                            <option value="Guru">Guru</option>
                                            <option value="Staf">Staf</option>
                                            <option value="Ka Prodi">Ka Prodi</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-de-secondary btn-sm" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="btn-upload"><i class="fa fa-save"></i> Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="md-edit_img" tabindex="-1" role="dialog" aria-labelledby="md-edit_img" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit Guru & Karyawan</h4>
                </div>
                <form id="edit-img-form">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="hidden" id="idImage" name="idImage">
                                    <label class="form-label" for="source">Gambar (<span style="color: red">Max Size  1Mb</span>)</label>
                                    <input type="file" class="form-control" id="eimg_source" name="eimg_source"><br>
                                    <center>
                                        <img width="100%" id="esource_img" style="border-radius: 5px"
                                            src="{{ asset('assets/admin/images/no-image.png') }}" alt="" />
                                    </center>
                                </div>
                            </div>

                            <div class="col-lg-6 mb-3">
                                <div class="form-group mb-4">
                                    <label>Nama Lengkap<span class="require"></span></label>
                                    <input type="text" class="form-control" placeholder="Enter text alt" id="efullname" name="fullname">
                                </div>
                                <div class="form-group">
                                    <label class="form-label" for="credit">Posisi</label>
                                    <select class="form-control select2 inp-fadd" id="eposition" name="position" style="width: 100%;" required>
                                        <option value="">- Pilih -</option>
                                        <option value="Kepala Sekolah">Kepala Sekolah </option>
                                        <option value="Wakil Kepala Sekolah">Wakil Kepala Sekolah</option>
                                        <option value="Guru">Guru</option>
                                        <option value="Staf">Staf</option>
                                        <option value="Ka Prodi">Ka Prodi</option>
                                    </select>
                                </div>
                            </div>
                    </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="btn-edit_upload"><i class="fa fa-save"></i> Simpan</button>
                    </div><!--end modal-footer-->
                </form>

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

    <div class="modal fade" id="md-delete" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Hapus Guru & Karyawan</h4>
                </div>
                <div class="modal-body">
                    <p style="text-align: center">
                        <i class="fa fa-exclamation-triangle" style="font-size: 35px;color:#C23F44" ></i>&nbsp
                        <label style="font-size: 35px;"> Apakah anda yakin ? </label>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">                            
                        <li class="fa fa-times"></li> Close                   
                    </button>
                    <button type="submit" class="btn btn-danger" id="btn-del"  onclick="del()"><li class="fa fa-trash"></li> Proses</button>
                </div>
            </div>
        </div>
    </div>
    
    <input type="hidden" id="idEmployee">
    <script>
        var table;
        $(document).ready(function() {   
            
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
 

            $("#img_source").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#source_img").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
    
            $("#eimg_source").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#esource_img").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
    
    
            $("#upload-img-form").on("submit", (function(e) {
                e.preventDefault();

                var fullname = $("#fullname").val();
                var img_source = $("#img_source").prop('files')[0];
                var position = $("#position").val();

                var form_data = new FormData();
                form_data.append('fullname', fullname);
                form_data.append('img_source', img_source);
                form_data.append('position', position);

                $.ajax({
                    url: "{{ route('createEmployee') }}",
                    type: "POST",
                    data: form_data,
                    daraType: "json",
                    contentType: false,
                    processData: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btn-upload").attr("disabled", "disabled");
                        $("#btn-upload").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                    },
                    success: function(data) {
                        if (data.status == "success") {
                            var img = "{{ asset('assets/admin/images/no-image.png') }}";
                            $("#source_img").attr("src", img);
                            $('#md-upload').modal('toggle');
                            $('#fullname').val("");
                            $('#position').val("").trigger('change');
                            table.ajax.reload(null, false);
                        }
                        notif(data.message, data.status);
                    },
                    complete: function() {
                        $("#btn-upload").removeAttr("disabled");
                        $("#btn-upload").html("<i class='fa fa-save'></i> Simpan & Gunakan");
                    }
                });
            }));

            $("#edit-img-form").on("submit", (function(e) {
                e.preventDefault();

                var id = $("#idEmployee").val();
                var fullname = $("#efullname").val();
                var img_source = $("#eimg_source").prop('files')[0];
                var position = $("#eposition").val();

                var form_data = new FormData();
                form_data.append('fullname', fullname);
                form_data.append('img_source', img_source);
                form_data.append('position', position);
                form_data.append('id', id);

                $.ajax({
                    url: "{{ route('updateEmployee') }}",
                    type: "POST",
                    data: form_data,
                    daraType: "json",
                    contentType: false,
                    processData: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btn-edit_upload").attr("disabled", "disabled");
                        $("#btn-edit_upload").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                    },
                    success: function(data) {
                        if (data.status == 'success') {
                            $('#md-edit_img').modal('toggle');
                            table.ajax.reload(null, false);
                        }
                        notif(data.message, data.status);
                    },
                    complete: function() {
                        $("#btn-edit_upload").removeAttr("disabled");
                        $("#btn-edit_upload").html("<i class='fa fa-save'></i> Simpan");
                    }
                });
            }));
    
            $("#src_name").keypress(function(e) {
                if (e.which == 13) {
                    table.ajax.reload(null, false);
                }
            });
    
             table = $('#ajax-datatables_img').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                responsive: true,
                ajax: {
                    url: "{{ route('getEmployee') }}",
                    data: function(d) {
                        d.src_name = $('#src_name').val()
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                    },
                    {
                        data: 'img',
                        name: 'img',
                    },
                    {
                        data: 'fullname',
                        name: 'fullname',
                    },
                    {
                        data: 'position',
                        name: 'position',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        });

        function edit_img(id) {
            $('#md-edit_img').modal('show');
            $.ajax({
                url: "{{ route('getbyEmployee') }}",
                type: "GET",
                data: {
                    id
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $(".inp").attr("disabled", "disabled");
                    $('#md-edti_img').modal('show');
                },
                success: function(data) {
                    $("#idEmployee").val(data.id);
                    $("#efullname").val(data.fullname);
                    $("#eposition").val(data.position).trigger('change');
                    if (data.source !== "") {
                        var img = "{{ asset('storage/uploads/employee') }}/" + data.source;
                    } else {
                        var img = "{{ asset('assets/admin/images/no-image.png') }}";
                    }

                    $("#esource_img").attr("src", img);

                },
                complete: function() {
                    $(".inp").removeAttr("disabled");
                }
            });

        }

        function del() {
        var id = $("#idEmployee").val();
        var _token = $("#_token").val();
        $.ajax({
            url: "{{route('deleteEmployee')}}",
            type: "POST",
            data: {
                id,
                _token
            },
            daraType: "json",
            cache: false,
            beforeSend: function() {
                $("#btn-del").attr("disabled", "disabled");
                $("#btn-del").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
            },
            success: function(data) {
                if (data.status == "success") {
                    table.ajax.reload(null, false);
                    $('#md-delete').modal('toggle');
                }

                notif(data.message, data.status);
            },
            complete: function() {
                $("#btn-del").removeAttr("disabled");
                $("#btn-del").html("<li class='fa fa-trash'></li> Proses");
            }
        });
    }

        function getId(id) {
            $("#idEmployee").val(id);
        }

    </script>
@endsection