@extends('index')
@section('content')
    
    <div class="card mt-5">
        <div class="card-body">
            <h2 class="card-title pt-1 float-left">{{ $row->name }}</h2>
            <a href="#" data-toggle="modal" data-target="#addTeacher" class="btn btn-sm btn-primary float-right">Tambah Pengajar</a>
        </div>
        <div class="card-body text-center" style="overflow:scroll;">
                <table class="table card-table">
                    <thead>
                        <tr>
                        <th scope="col">No</th>
                        <th scope="col">Nama Guru Pengajar</th>
                        <th scope="col">Kelas yang diajar</th>
                        <th scope="col">ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($detail->count())
                            @php $i = 1; @endphp
                            @foreach($detail->get() as $rows)
                            <tr>
                                <td>{{ $i }}</td>
                                <td>{{ $rows->user->getName() }}</td>
                                <td>
                                    @foreach($rows->getClassroom($row->id,$rows->user_id) as $class)
                                        {{ $class->classroom->name }} <br>
                                    @endforeach
                                </td>
                                <td>
                                    <a href="#" data-toggle="modal" data-target="#addTeacher" data-id="{{ $rows->user_id }}" >EDIT</a>
                                    <a href="#" class="pl-2" data-toggle="modal" data-target="#deleteModal" data-id="{{ $rows->user_id }}" data-name="{{ $rows->user->name }}">HAPUS</a>
                                </td>
                            </tr>
                            @php $i++; @endphp
                            @endforeach
                        @else 
                            <tr><td colspan="6">Tidak ada data</td></tr>
                        @endif
                    </tbody>
                </table>
        </div>
    </div>

    <!-- Modal Create Teacher -->
    <form class="modal fade" method="POST" action="#" id="addTeacher" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            {{ csrf_field() }}
            <input name="ajax" type="hidden" value="true">
            <input name="lesson_id" type="hidden" value="{{ $row->id }}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Pengajar</h5>
                </div>
                <div class="modal-body">
                    <div id="alertTeacher" class="alert alert-danger" role="alert" style="display:none;"></div>
                    <div class="row">

                        <div class="form-group col-md-12">
                            <label>Nama Guru Pengajar <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="form-control" required name="teacher" id="teacher">
                                    <option value="">Pilih</option>
                                    @foreach($teacher as $rows)
                                        <option value="{{ $rows->id }}">{{ $rows->getName() }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-12">
                            <label>Kelas yang diajar <span class="required">*</span></label>
                            <div id="classroom"></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="/lesson/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" value="{{ $row->id }}">
        <input name="user_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">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">

    $('#addTeacher').on('show.bs.modal', function(event) {
      var modal 	  = $(this);
      var button 	  = $(event.relatedTarget);
      $('#teacher').val(button.data('id'));
      if(button.data('id')) {
        $('#addTeacher').find('.modal-title').html('Edit Pengajar');
        $('#teacher').prop('disabled', true);
      } else {
        $('#addTeacher').find('.modal-title').html('Tambah Pengajar');
        $('#teacher').prop('disabled', false);
      }
      $.fn.loadClassroom();
    });

    $('#addTeacher').on('submit', function(e) {
        e.preventDefault();
        $('#teacher').prop('disabled', false);
        $.ajax({
            type: "POST",
            trigger: 'manual',
            url: "/lesson/temp",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            beforeSend: function() {
                $('#addTeacher').find('button[type=submit]').html('Loading...');
            },
            complete: function() {},
            success: function(data) {
                $('#addTeacher').find('button[type=submit]').prop('disabled', false);
                $('#addTeacher').find('button[type=submit]').html('Proses');
                if(data.status == 200) {
                    $('#alertTeacher').hide();
                    $('#addTeacher').modal('hide');
                    location.reload(true);
                } else {
                    $('#alertTeacher').html(data.status_detail);
                    $('#alertTeacher').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'));
    });

    $.fn.loadClassroom = function() {
        $.ajax({
            type: "POST",
            trigger: 'manual',
            cache: false,
            url: "/classroom/lesson/ajax",
            data: {
                year: {{ $row->year_id }},
                competency: {{ $row->study_competency_id }},
                lesson_id: {{ $row->id }},
                user_id: $('#teacher').val()
            },
            dataType: "html",
            beforeSend: function() {
                $('#classroom').html('loading data...');
            },
            complete: function() {},
            success: function(html) {
                $('#classroom').html(html);
            }
        });
    }

</script>
@endpush