@extends('index')
@section('content')
    <div class="row mt-5">
        
        <div class="col-md-4">
            <div class="card card-info">
                <div class="card-body">
                    <p>Bidang Study Keahlian</p>
                    <hr>
                    <h2>{{ $major->count() }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-info">
                <div class="card-body">
                    <p>Program Study Keahlian</p>
                    <hr>
                    <h2>{{ $program->count() }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-info">
                <div class="card-body">
                    <p>Kopentensi Keahlian</p>
                    <hr>
                    <h2>{{ $competency->count() }}</h2>
                </div>
            </div>
        </div>
           
    </div> 
    
    <div class="card mt-5">
        <div class="card-icon-purple-dark"></div>
        <div class="card-body">
            <h2 class="card-title pt-1 mt-80 float-left">Bidang Study Keahlian</h2>
            <a href="#" class="btn btn-sm btn-primary float-right" data-toggle="modal" data-target="#createMajor">Tambah</a>
        </div>
    </div>

    <div class="card mt-3">
        <div class="tb-major card-body text-center" style="overflow:scroll;">
            <!-- <table class="table card-table">
                <thead>
                    <tr>
                    <th scope="col">No</th>
                    <th scope="col">Nama Bidang Study Keahlian</th>
                    <th scope="col">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = 1; @endphp
                    @foreach($major->limit(3)->get() as $rows)
                    <tr>
                        <td>{{ $i }}</td>
                        <td>{{ $rows->name }}</td>
                        <td>
                            <a href="" class="pr-2">LIHAT</a>
                            <a href="#" data-toggle="modal" data-target="#createMajor" data-id="{{ $rows->id }}" data-name="{{ $rows->name }}">EDIT</a>
                            <a href="#" class="pl-2" data-toggle="modal" data-target="#deleteModal" data-type="1" data-id="{{ $rows->id }}" data-name="{{ $rows->name }}">HAPUS</a>
                        </td>
                    </tr>
                    @php $i++; @endphp
                    @endforeach
                </tbody>
            </table>
            @if($major->count() > 3)
                <a href="" class="selengkapnya">Lihat Selengkapnya <span class="icon"><i class="fe fe-arrow-down"></i></span></a>
            @endif -->
        </div>
    </div>

    <div class="card mt-5">
        <div class="card-icon-purple"></div>
        <div class="card-body">
            <h2 class="card-title pt-1 mt-80 float-left">Program Study Keahlian</h2>
            <a href="" class="btn btn-sm btn-primary float-right" data-toggle="modal" data-target="#createProgram">Tambah</a>
        </div>
    </div>

    <div class="card mt-3">
        <div class="tb-program card-body text-center" style="overflow:scroll;">
            <!-- <table class="table card-table">
                <thead>
                    <tr>
                    <th scope="col">No</th>
                    <th scope="col">Nama Program Study Keahlian</th>
                    <th scope="col">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = 1; @endphp
                    @foreach($program->limit(3)->get() as $rows)
                    <tr>
                        <td>{{ $i }}</td>
                        <td>{{ $rows->name }}</td>
                        <td>
                            <a href="" class="pr-2">LIHAT</a>
                            <a href="">EDIT</a>
                            <a href="" class="pl-2">HAPUS</a>
                        </td>
                    </tr>
                    @php $i++; @endphp
                    @endforeach
                </tbody>
            </table>
            @if($program->count() > 3)
                <a href="" class="selengkapnya">Lihat Selengkapnya <span class="icon"><i class="fe fe-arrow-down"></i></span></a>
            @endif -->
        </div>
    </div>

    <div class="card mt-5">
        <div class="card-icon-purple-light"></div>
        <div class="card-body">
            <h2 class="card-title pt-1 mt-80 float-left">Kompetensi Study Keahlian</h2>
            <a href="" class="btn btn-sm btn-primary float-right" data-toggle="modal" data-target="#createCompetency">Tambah</a>
        </div>
    </div>

    <div class="card mt-3">
        <div class="tb-competency card-body text-center" style="overflow:scroll;">
            <!-- <table class="table card-table">
                <thead>
                    <tr>
                    <th scope="col">No</th>
                    <th scope="col">Nama Kompetensi Study Keahlian</th>
                    <th scope="col">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = 1; @endphp
                    @foreach($competency->limit(3)->get() as $rows)
                    <tr>
                        <td>{{ $i }}</td>
                        <td>{{ $rows->name }}</td>
                        <td>
                            <a href="" class="pr-2">LIHAT</a>
                            <a href="">EDIT</a>
                            <a href="" class="pl-2">HAPUS</a>
                        </td>
                    </tr>
                    @php $i++; @endphp
                    @endforeach
                </tbody>
            </table>
            @if($competency->count() > 3)
                <a href="" class="selengkapnya">Lihat Selengkapnya <span class="icon"><i class="fe fe-arrow-down"></i></span></a>
            @endif -->
        </div>
    </div>

    <!-- Modal Create Competency -->
    <form class="modal fade" method="POST" action="/competency" id="createCompetency" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            {{ csrf_field() }}
            <input name="ajax" type="hidden" value="true">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Kompetensi Study Keahlian</h5>
                </div>
                <div class="modal-body">
                    <div id="alertCompetency" class="alert alert-danger" role="alert" style="display:none;"></div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label>Nama Bidang Study Keahlian <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="tb-majorselect form-control" required name="study_major_id"></select>
                                <div class="input-group-prepend">
                                    <div class="input-group-text" data-toggle="modal" data-target="#createMajor"><i class="fe fe-plus-square"></i></div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group col-md-12">
                            <label>Nama Program Study Keahlian <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="tb-programselect form-control" required name="study_program_id"></select>
                                <div class="input-group-prepend">
                                    <div class="input-group-text" data-toggle="modal" data-target="#createProgram"><i class="fe fe-plus-square"></i></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group col-md-12">
                            <label>Nama Kompetensi Study Keahlian <span class="required">*</span></label>
                            <div class="input-group">
                                <input type="hidden" name="id" id="competency_id" class="form-control">
                                <input autocomplete="off" required type="text" name="name" id="competency_name" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-light">Kembali</button>
                    <button type="submit" class="btn btn-primary">Proses</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal Create Program -->
    <form class="modal fade" method="POST" action="/program" id="createProgram" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            {{ csrf_field() }}
            <input name="ajax" type="hidden" value="true">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Program Study Keahlian</h5>
                </div>
                <div class="modal-body">
                    <div id="alertProgram" class="alert alert-danger" role="alert" style="display:none;"></div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label>Nama Bidang Study Keahlian <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="tb-majorselect form-control" required name="study_major_id"></select>
                                <div class="input-group-prepend">
                                    <div class="input-group-text" data-toggle="modal" data-target="#createMajor"><i class="fe fe-plus-square"></i></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group col-md-12">
                            <label>Nama Program Study Keahlian <span class="required">*</span></label>
                            <div class="input-group">
                                <input type="hidden" name="id" id="program_id" class="form-control">
                                <input autocomplete="off" required type="text" name="name" id="program_name" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-light">Kembali</button>
                    <button type="submit" class="btn btn-primary">Proses</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal Create Major -->
    <form class="modal fade" method="POST" action="/major" id="createMajor" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            {{ csrf_field() }}
            <input name="ajax" type="hidden" value="true">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bidang Study Keahlian</h5>
                </div>
                <div class="modal-body">
                    <div id="alertMajor" class="alert alert-danger" role="alert" style="display:none;"></div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label>Nama Bidang Study Keahlian <span class="required">*</span></label>
                            <div class="input-group">
                                <input type="hidden" name="major_id" id="major_id" class="form-control">
                                <input autocomplete="off" required type="text" name="name" id="major_name" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-light">Kembali</button>
                    <button type="submit" class="btn btn-primary">Proses</button>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal Alert -->
    <form method="POST" action="/major/delete" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
        {{ csrf_field() }}
        <input name="_method" type="hidden" value="DELETE">
        <input name="id" type="hidden" id="delete_id">
        <input name="type" type="hidden" id="delete_type">
        <input name="ajax" type="hidden" value="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Perhatian!</h5>
                </div>
                <div class="modal-body text-center">
                    <div id="alertDelete" class="alert alert-danger" role="alert" style="display:none;"></div>
                    Yakin mau menghapus data "<span id="delete_name"></span>" ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Tidak</button>
                    <button type="submit" class="btn btn-primary">Ya</button>
                </div>
            </div>
        </div>
    </form>
    
@endsection
@push('script')
<script type="text/javascript">
    $(document).ready(function() {
        $.fn.loadData('major');
        $.fn.loadData('program');
        $.fn.loadData('competency');
    });

    $('#createMajor').on('show.bs.modal', function(event) {
      var modal 	  = $(this);
      var button 	  = $(event.relatedTarget);
      $('#major_id').val(button.data('id'));
      $('#major_name').val(button.data('name'));
    });

    $('#createMajor').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            trigger: 'manual',
            url: "/major",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            beforeSend: function() {
                $('#createMajor').find('button[type=submit]').html('Loading...');
            },
            complete: function() {},
            success: function(data) {
                console.log(data);
                $('#createMajor').find('button[type=submit]').prop('disabled', false);
                $('#createMajor').find('button[type=submit]').html('Proses');
                if(data.status == 200) {
                    $.fn.loadData('major');
                    $.fn.loadData('majorselect');
                    $('#alertMajor').hide();
                    $('#createMajor').modal('hide');
                } else {
                    $('#alertMajor').html(data.status_detail);
                    $('#alertMajor').show();
                }
                
            }
        });
        return false;
    });

    $('#createProgram').on('show.bs.modal', function(event) {
      var modal 	  = $(this);
      var button 	  = $(event.relatedTarget);
      $('#program_id').val(button.data('id'));
      $('#program_name').val(button.data('name'));
      $.fn.loadData('majorselect',button.data('major'));
    });

    $('#createProgram').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            trigger: 'manual',
            url: "/program",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            beforeSend: function() {
                $('#createProgram').find('button[type=submit]').html('Loading...');
            },
            complete: function() {},
            success: function(data) {
                $('#createProgram').find('button[type=submit]').prop('disabled', false);
                $('#createProgram').find('button[type=submit]').html('Proses');
                if(data.status == 200) {
                    $.fn.loadData('program');
                    $.fn.loadData('programselect');
                    $('#alertProgram').hide();
                    $('#createProgram').modal('hide');
                } else {
                    $('#alertProgram').html(data.status_detail);
                    $('#alertProgram').show();
                }
                
            }
        });
        return false;
    });

    $('#createCompetency').on('show.bs.modal', function(event) {
      var modal 	  = $(this);
      var button 	  = $(event.relatedTarget);
      $('#competency_id').val(button.data('id'));
      $('#competency_name').val(button.data('name'));
      $.fn.loadData('majorselect',button.data('major'));
      $.fn.loadData('programselect',button.data('program'),button.data('major'));
    });

    $('.tb-majorselect').on('change', function(e) {
        $.fn.loadData('programselect',null,$(this).val());
    });

    $('#createCompetency').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            trigger: 'manual',
            url: "/competency",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            beforeSend: function() {
                $('#createCompetency').find('button[type=submit]').html('Loading...');
            },
            complete: function() {},
            success: function(data) {
                $('#createCompetency').find('button[type=submit]').prop('disabled', false);
                $('#createCompetency').find('button[type=submit]').html('Proses');
                if(data.status == 200) {
                    $.fn.loadData('competency');
                    // $.fn.loadData('programselect');
                    $('#alertCompetency').hide();
                    $('#createCompetency').modal('hide');
                } else {
                    $('#alertCompetency').html(data.status_detail);
                    $('#alertCompetency').show();
                }
                
            }
        });
        return false;
    });

    $('#deleteModal').on('show.bs.modal', function(event) {
      var modal 	  = $(this);
      var button 	  = $(event.relatedTarget);
      $('#delete_id').val(button.data('id'));
      $('#delete_name').html(button.data('name'));
      $('#delete_type').val(button.data('type'));
    });

    $('#deleteModal').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            trigger: 'manual',
            url: "/major/delete",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            beforeSend: function() {
                $('#deleteModal').find('button[type=submit]').html('Loading...');
            },
            complete: function() {},
            success: function(data) {
                console.log(data);
                $('#deleteModal').find('button[type=submit]').prop('disabled', false);
                $('#deleteModal').find('button[type=submit]').html('Ya');
                if(data.status == 200) {
                    if($('#delete_type').val() == 1) {
                        $.fn.loadData('major');
                    } else if($('#delete_type').val() == 2) {
                        $.fn.loadData('program');
                    } else {
                        $.fn.loadData('competency');
                    }
                    $('#alertDelete').hide();
                    $('#deleteModal').modal('hide');
                } else {
                    $('#alertDelete').html(data.status_detail);
                    $('#alertDelete').show();
                }
                
            }
        });
        return false;
    });

    $.fn.loadData = function(value, select = null, id = null) {
        $.ajax({
            type: "POST",
            trigger: 'manual',
            cache: false,
            url: "/"+value+"/ajax",
            data: {
                id: id,
                select: select
            },
            dataType: "html",
            beforeSend: function() {
                $('.tb-'+value).html('loading data...');
            },
            complete: function() {},
            success: function(html) {
                $('.tb-'+value).html(html);
            }
        });
    }
</script>
@endpush