@extends('index')
@section('content')

    <form id="card-search" style="display:none;" class="card mt-3" method="POST" action="/lesson/search" autocomplete="off">
        {{ csrf_field() }}
        <input name="category" type="hidden" value="{{ $category }}">
        <input name="subcategory" type="hidden" value="{{ $subcategory }}">
        <div class="card-body">
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="search">Nama Mata Pelajaran</label>
                    <input type="text" class="form-control" name="search" placeholder="Nama Mata Pelajaran">
                </div>
                <div class="form-group col-md-6">
                    <label>Tahun Ajaran</label>
                    <div class="input-group mb-2">
                        <select class="form-control" name="year">
                            <option value="">Semua</option>
                            @foreach ($year as $rows)
                                <option value="{{ $rows->id }}" @if ($year_select == $rows->id) selected @endif>
                                    {{ $rows->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label>Nama Bidang Study Keahlian</label>
                    <div class="input-group mb-2">
                        <select class="tb-majorselect form-control" name="study_major_id" id="study_major_id">
                            <option value="">Semua</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label>Nama Program Study Keahlian</label>
                    <div class="input-group mb-2">
                        <select class="tb-programselect form-control" name="study_program_id" id="study_program_id">
                            <option value="">Semua</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label>Nama Kompetensi Study Keahlian</label>
                    <div class="input-group mb-2">
                        <select class="tb-competencyselect form-control" name="study_competency_id">
                            <option value="">Semua</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-md-12">
                    <label></label>
                    <button type="submit" class="btn btn-primary float-right"
                        style="padding-top:3px;padding-bottom:3px;"><i class="fe fe-search"></i> Cari</button>
                </div>
            </div>
        </div>
    </form>

    @if (session('success'))
        <div class="alert alert-success mt-5">
            {{ session('success') }}
        </div>
    @endif

    <div class="card mt-5">
        <div class="card-body">
            <h2 class="card-title pt-1 float-left">{{ $modal_title }}<br><small>{{ $modal_subtitle }}</small></h2>
            <a href="#" data-toggle="modal" data-target="#createLesson" data-category="{{ $category }}"
                data-subcategory="1" data-year="{{ $year_select }}" class="btn btn-sm btn-primary float-right">Tambah</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">Mata Pelajaran</th>
                        <th scope="col">Tahun Ajar</th>
                        <th scope="col">Kopetensi Studi Keahlian</th>
                        <th scope="col">KKM</th>
                        <th scope="col">Jumlah Guru Pengajar</th>
                        <th scope="col">Jumlah Kelas</th>
                        <th scope="col">Id Mapel</th>
                        <th scope="col">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @if ($row->count())
                        @php $i = 1; @endphp
                        @foreach ($row->paginate(10) as $rows)
                            <tr>
                                <td>{{ $i }}</td>
                                <td>{{ $rows->name }}</td>
                                <td>{{ $rows->Year->name }}</td>
                                <td>{{ $rows->studyCompetency->name }}</td>
                                <td>{{ $rows->kkm }}</td>
                                <td>{{ $rows->teacherCount() }}</td>
                                <td>{{ $rows->classroomCount() }}</td>
                                <td>{{ $rows->id }}</td>
                                <td>
                                    <a href="/lesson/{{ $rows->id }}" class="pr-2">LIHAT</a>
                                    <a href="#" data-toggle="modal" data-target="#createLesson" data-category="2"
                                        data-id="{{ $rows->id }}" data-name="{{ $rows->name }}"
                                        data-year="{{ $rows->year_id }}" data-major="{{ $rows->study_major_id }}"
                                        data-program="{{ $rows->study_program_id }}"
                                        data-competency="{{ $rows->study_competency_id }}" data-kkm="{{ $rows->kkm }}"
                                        data-subcategory="{{ $rows->subcategory }}">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
                    @else
                        <tr>
                            <td colspan="6">Tidak ada data</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
        <div class="card-footer">
            {{ $row->paginate(10)->links() }}
        </div>
    </div>

    <!-- Modal Create Lesson -->
    <form class="modal fade" method="POST" action="/lesson" id="createLesson" tabindex="-1" role="dialog"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            {{ csrf_field() }}
            <input name="ajax" type="hidden" value="true">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Mata Pelajaran</h5>
                </div>
                <div class="modal-body">
                    <div id="alertLesson" class="alert alert-danger" role="alert" style="display:none;"></div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label>Nama Mata Pelajaran <span class="required">*</span></label>
                            <div class="input-group">
                                <input type="hidden" name="id" id="lesson_id" class="form-control">
                                <input autofocus autocomplete="off" required type="text" name="name"
                                    id="lesson_name" class="form-control">
                            </div>
                        </div>

                        <div class="form-group col-md-6">
                            <label>Tahun Ajaran <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="form-control" required name="year" id="year">
                                    @foreach ($year as $rows)
                                        <option value="{{ $rows->id }}">{{ $rows->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-6">
                            <label>KKM <span class="required">*</span></label>
                            <input autocomplete="off" required type="text" name="kkm" id="kkm"
                                class="form-control">
                        </div>

                        <div class="form-group col-md-4">
                            <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"
                                    id="study_major_id">
                                    <option value="">Pilih</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-4">
                            <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"
                                    id="study_program_id">
                                    <option value="">Pilih</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-4">
                            <label>Nama Kompetensi Study Keahlian <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="tb-competencyselect form-control" required name="study_competency_id"
                                    id="study_competency_id">
                                    <option value="">Pilih</option>
                                </select>
                            </div>
                        </div>

                        <div id="selectCat" class="form-group col-md-4">
                            <label>Kategori <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="form-control" name="category" id="category">
                                    <option value="1">Muatan Nasional</option>
                                    <option value="2">Muatan Kewilayahan</option>
                                    <option value="3">Muatan Keminatan</option>
                                </select>
                            </div>
                        </div>

                        <div id="selectSub" class="form-group col-md-4" style="display:none;">
                            <label>Muatan Keminatan <span class="required">*</span></label>
                            <div class="input-group mb-2">
                                <select class="form-control" required name="subcategory" id="subcategory">
                                    <option value="1">Dasar Bidang Keahlian</option>
                                    <option value="2">Dasar Program Keahlian</option>
                                    <option value="3">Dasar Kompetensi Keahlian</option>
                                </select>
                            </div>
                        </div>

                    </div>

                    <button type="button" data-toggle="modal" data-target="#addTeacher" class="btn btn-xs btn-primary"
                        id="btnAddTeacher">Tambah Pengajar</button>
                    <div id="temp" class="mt-3"></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 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">
            <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">
                                    @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" 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('majorselect');
        });

        $('#createLesson').on('show.bs.modal', function(event) {
            var modal = $(this);
            var button = $(event.relatedTarget);
            $('#lesson_id').val(button.data('id'));
            $('#lesson_name').val(button.data('name'));
            $('#year').val(button.data('year'));
            $('#kkm').val(button.data('kkm'));
            $('#category').val(button.data('category'));
            $('#subcategory').val(button.data('subcategory'));
            $.fn.loadData('majorselect', button.data('major'));
            $.fn.loadData('programselect', button.data('program'), button.data('major'));
            $.fn.loadData('competencyselect', button.data('competency'), button.data('program'));

            if ($('#lesson_id').val()) {
                $('#btnAddTeacher').hide();
            } else {
                $('#btnAddTeacher').show();
                $.fn.loadTemp();
            }

            if ($('#category').val() == 3) {
                $('#selectSub').show();
            } else {
                $('#selectSub').hide();
            }
        });

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

                }
            });
            return false;
        });

        $('#addTeacher').on('show.bs.modal', function(event) {
            var modal = $(this);
            var button = $(event.relatedTarget);
            $.fn.loadClassroom();
        });

        $('#addTeacher').on('submit', function(e) {
            e.preventDefault();
            $.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) {
                        // $.fn.loadData('major');
                        $.fn.loadTemp();
                        $('#alertTeacher').hide();
                        $('#addTeacher').modal('hide');
                    } else {
                        $('#alertTeacher').html(data.status_detail);
                        $('#alertTeacher').show();
                    }

                }
            });
            return false;
        });

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

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

        $(document).on("click", ".btn-delete-temp", function() {
            var id = $(this).data("id");
            $.ajax({
                type: "POST",
                trigger: 'manual',
                cache: false,
                url: "/lesson/temp/delete",
                data: {
                    id: id,
                },
                beforeSend: function() {},
                complete: function() {},
                success: function(data) {
                    if (data.status === 200) {
                        $.fn.loadTemp();
                    }
                }
            });
            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.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('<option value="">Loading...</option>');
                },
                complete: function() {},
                success: function(html) {
                    $('.tb-' + value).html('<option value="">Pilih</option>');
                    $('.tb-' + value).append(html);
                }
            });
        }

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

        $.fn.loadTemp = function() {
            $.ajax({
                type: "POST",
                trigger: 'manual',
                cache: false,
                url: "/lesson/temp/ajax",
                // data: {
                //     year: $('#year').val(),
                //     competency: $('#study_competency_id').val()
                // },
                dataType: "html",
                beforeSend: function() {
                    $('#temp').html('loading data...');
                },
                complete: function() {},
                success: function(html) {
                    $('#temp').html(html);
                }
            });
        }
    </script>
@endpush