@extends('layouts.main')

@section('title','Setting Ujian Semester')
@section('header','Setting Ujian Semester')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Setting Ujian Semester</li>
@endsection

@section('content')

@include('layouts.index.filters', ['date_range' => 0, 'filter' => 0, 'filter_default' => 'All', 'exports' => 0, 'create' => $create])

<div class="card card-primary">
    <div class="card-body">
        <div class="dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>

@if($update)
<div class="modal fade" id="detailData" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form action="#" class="form-update-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Setting Ujian Semester</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Jenis Ujian</label> <small class="text-danger">*</small>
                                <select name="jenis_ujian" class="form-control form-control-sm" required autofocus>
                                    <option value="" selected disabled>Pilih Jenis Ujian</option>
                                    <option value="MID SEMESTER">MID SEMESTER</option>
                                    <option value="AKHIR SEMESTER">AKHIR SEMESTER</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Semester</label> <small class="text-danger">*</small>
                                <select name="semester" class="form-control form-control-sm" required>
                                    <option value="" selected disabled>Pilih Semester</option>
                                    <option value="GANJIL">GANJIL</option>
                                    <option value="GENAP">GENAP</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Tahun Ajaran</label> <small class="text-danger">*</small>
                                <select name="id_tahun_ajaran" class="form-control form-control-sm select-tahun-ajaran-update" required>
                                    <option value="" selected disabled>Pilih Tahun Ajaran</option>
                                    @foreach($tahun_ajaran as $b)
                                    <option value="{{$b->id}}">{{$b->tahun_ajaran}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Jenis Sekolah</label> <small class="text-danger">*</small>
                                <select name="id_jenis_sekolah" class="form-control form-control-sm select-jenis-sekolah-update" required>
                                    <option value="" selected disabled>Pilih Tahun Ajaran terlebih dahulu</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Tanggal Mulai</label> <small class="text-danger">*</small>
                                <input type="date" name="tanggal_mulai" class="form-control form-control-sm" required>
                                <input name="id" hidden>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Tanggal Selesai</label> <small class="text-danger">*</small>
                                <input type="date" name="tanggal_selesai" class="form-control form-control-sm" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Status</label> <small class="text-danger">*</small>
                                <select name="status_aktif" class="form-control form-control-sm" required>
                                    <option value="AKTIF">AKTIF</option>
                                    <option value="NONAKTIF">NONAKTIF</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="detailFooter"></div>
            </form>
        </div>
    </div>
</div>
@endif

@if($create)
<div class="modal fade" id="createData" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form action="#" class="form-create-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Tambah Setting Ujian Semester</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Jenis Ujian</label> <small class="text-danger">*</small>
                                <select name="jenis_ujian" class="form-control form-control-sm" required autofocus>
                                    <option value="" selected disabled>Pilih Jenis Ujian</option>
                                    <option value="MID SEMESTER">MID SEMESTER</option>
                                    <option value="AKHIR SEMESTER">AKHIR SEMESTER</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Semester</label> <small class="text-danger">*</small>
                                <select name="semester" class="form-control form-control-sm" required>
                                    <option value="" selected disabled>Pilih Semester</option>
                                    <option value="GANJIL">GANJIL</option>
                                    <option value="GENAP">GENAP</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Tahun Ajaran</label> <small class="text-danger">*</small>
                                <select name="id_tahun_ajaran" class="form-control form-control-sm select-tahun-ajaran-create" required>
                                    <option value="" selected disabled>Pilih Tahun Ajaran</option>
                                    @foreach($tahun_ajaran as $b)
                                    <option value="{{$b->id}}">{{$b->tahun_ajaran}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Jenis Sekolah</label> <small class="text-danger">*</small>
                                <select name="id_jenis_sekolah" class="form-control form-control-sm select-jenis-sekolah-create" required disabled>
                                    <option value="" selected disabled>Pilih Tahun Ajaran terlebih dahulu</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Tanggal Mulai</label> <small class="text-danger">*</small>
                                <input type="date" name="tanggal_mulai" class="form-control form-control-sm" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Tanggal Selesai</label> <small class="text-danger">*</small>
                                <input type="date" name="tanggal_selesai" class="form-control form-control-sm" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Status</label> <small class="text-danger">*</small>
                                <select name="status_aktif" class="form-control form-control-sm" required>
                                    <option value="AKTIF" selected>AKTIF</option>
                                    <option value="NONAKTIF">NONAKTIF</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                <button type="submit" class="btn btn-success btn-sm">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection
@push('custom-scripts')
<script>
    $('.select-jenis-sekolah-create').select2({
        placeholder: 'Jenis Sekolah',
    });
    $('.select-jenis-sekolah-update').select2({
        placeholder: 'Jenis Sekolah',
    });
    $('.select-tahun-ajaran-create').select2({
        placeholder: 'Tahun Ajaran',
    });
    $('.select-tahun-ajaran-update').select2({
        placeholder: 'Tahun Ajaran',
    });

    // Event handler untuk tahun ajaran CREATE
    $(document).on('change', '.select-tahun-ajaran-create', function() {
        var id_tahun_ajaran = $(this).val();
        var selectJenisSekolah = $('.select-jenis-sekolah-create');

        if(!id_tahun_ajaran) {
            selectJenisSekolah.prop('disabled', true);
            selectJenisSekolah.html('<option value="" selected disabled>Pilih Tahun Ajaran terlebih dahulu</option>');
            return;
        }

        // Loading state
        selectJenisSekolah.html('<option value="" selected disabled>Loading...</option>');
        selectJenisSekolah.prop('disabled', true);

        // Fetch jenis sekolah berdasarkan tahun ajaran
        $.ajax({
            url: '/web_api/settings/ujian_semester/get_jenis_sekolah',
            type: 'POST',
            dataType: 'json',
            data: {
                _token: $('input[name=_token]').val(),
                id_tahun_ajaran: id_tahun_ajaran
            },
            success: function(result) {
                console.log('Success response:', result);
                if(result.status && result.data.length > 0) {
                    var options = '<option value="" selected disabled>Pilih Jenis Sekolah</option>';
                    result.data.forEach(function(item) {
                        options += '<option value="' + item.id + '">' + item.jenis_sekolah + '</option>';
                    });
                    selectJenisSekolah.html(options);
                    selectJenisSekolah.prop('disabled', false);
                    selectJenisSekolah.select2({
                        placeholder: 'Jenis Sekolah',
                    });
                } else {
                    selectJenisSekolah.html('<option value="" selected disabled>Tidak ada jenis sekolah untuk tahun ajaran ini</option>');
                    selectJenisSekolah.prop('disabled', true);
                }
            },
            error: function() {
                selectJenisSekolah.html('<option value="" selected disabled>Error loading data</option>');
                selectJenisSekolah.prop('disabled', true);
            }
        });
    });

    // Event handler untuk tahun ajaran UPDATE
    $(document).on('change', '.select-tahun-ajaran-update', function() {
        var id_tahun_ajaran = $(this).val();
        var selectJenisSekolah = $('.select-jenis-sekolah-update');

        if(!id_tahun_ajaran) {
            selectJenisSekolah.prop('disabled', true);
            selectJenisSekolah.html('<option value="" selected disabled>Pilih Tahun Ajaran terlebih dahulu</option>');
            return;
        }

        // Loading state
        selectJenisSekolah.html('<option value="" selected disabled>Loading...</option>');
        selectJenisSekolah.prop('disabled', true);

        // Fetch jenis sekolah berdasarkan tahun ajaran
        $.ajax({
            url: '/web_api/settings/ujian_semester/get_jenis_sekolah',
            type: 'POST',
            dataType: 'json',
            data: {
                _token: $('input[name=_token]').val(),
                id_tahun_ajaran: id_tahun_ajaran
            },
            success: function(result) {
                console.log('Success response:', result);
                if(result.status && result.data.length > 0) {
                    var options = '<option value="" selected disabled>Pilih Jenis Sekolah</option>';
                    result.data.forEach(function(item) {
                        options += '<option value="' + item.id + '">' + item.jenis_sekolah + '</option>';
                    });
                    selectJenisSekolah.html(options);
                    selectJenisSekolah.prop('disabled', false);
                    selectJenisSekolah.select2({
                        placeholder: 'Jenis Sekolah',
                    });
                } else {
                    selectJenisSekolah.html('<option value="" selected disabled>Tidak ada jenis sekolah untuk tahun ajaran ini</option>');
                    selectJenisSekolah.prop('disabled', true);
                }
            },
            error: function() {
                selectJenisSekolah.html('<option value="" selected disabled>Error loading data</option>');
                selectJenisSekolah.prop('disabled', true);
            }
        });
    });
    var param = {
        filter: "",
    }
    $(document).ready(function(e){
        loadThis(param)
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
        };
        loadThis(param);
    });
    function loadThis(params){
        url = "/web_api/settings/ujian_semester/getData";
        th = '<th>JENIS UJIAN</th>' +
             '<th>SEMESTER</th>' +
             '<th>JENIS SEKOLAH</th>' +
             '<th>TAHUN AJARAN</th>' +
             '<th width="10%">PERIODE UJIAN</th>' +
             '<th width="5%">STATUS</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "jenis_ujian", 'className':'nowrap'},
                    { "data": "semester", 'className':'nowrap'},
                    { "data": "id_jenis_sekolah", 'className':'nowrap'},
                    { "data": "id_tahun_ajaran", 'className':'nowrap'},
                    { "data": "tanggal_mulai", 'className':'nowrap'},
                    { "data": "status_aktif", 'className':'text-center'},
                    { "data": "id", 'className':'text-center'},
                  ];

        col_def = [
                {
                    "targets" : 0,
                    "data": "jenis_ujian",
                    "render" : function (data, type, row) {
                        return '<span class="badge badge-info">'+row.jenis_ujian+'</span>';
                    }
                },
                {
                    "targets" : 1,
                    "data": "semester",
                    "render" : function (data, type, row) {
                        return '<span class="badge badge-secondary">'+row.semester+'</span>';
                    }
                },
                {
                    "targets" : 2,
                    "data": "id_jenis_sekolah",
                    "render" : function (data, type, row) {
                        if(!row.jenis_sekolah) return '-';
                        return row.jenis_sekolah.jenis_sekolah;
                    }
                },
                {
                    "targets" : 3,
                    "data": "id_tahun_ajaran",
                    "render" : function (data, type, row) {
                        if(!row.tahun_ajaran) return '-';
                        return row.tahun_ajaran.tahun_ajaran;
                    }
                },
                {
                    "targets" : 4,
                    "data": "tanggal_mulai",
                    "render" : function (data, type, row) {
                        return '<small>' + row.tanggal_mulai_formatted + ' s/d ' + row.tanggal_selesai_formatted + '</small>';
                    }
                },
                {
                    "targets" : 5,
                    "data": "status_aktif",
                    "render" : function (data, type, row) {
                        var btn_bg = 'bg-danger';
                        if(row.status_aktif == 'AKTIF'){
                            btn_bg = 'bg-green';
                        }
                        return '<a href="#" class="btn btn-sm '+btn_bg+' text-white btn-view-only">'+row.status_aktif+'</a>';
                    }
                },
                {
                    "targets" : 6,
                    "data": "id",
                    "render" : function (data, type, row) {
                        var btn = '';
                        if({{$update}}){
                            var status_text = 'NONAKTIFKAN';
                            if(row.status_aktif == 'NONAKTIF') status_text = 'AKTIFKAN';

                            btn = '<div class="btn-group">' +
                                    '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">' +
                                        'Action ' +
                                    '</button>' +
                                    '<div class="dropdown-menu" role="menu" style="">' +
                                        '<a href="#" class="dropdown-item btn-status-aktif" data-id="'+row.id+'"><i class="fa fa-power-off mr-2 text-danger"></i> '+status_text+'</a>' +
                                        '<a href="#" class="dropdown-item btn-detail" data-id="'+row.id+'"><i class="fa fa-edit text-warning mr-3 ml-1"></i> EDIT</a>' +
                                    '</div>' +
                                   '</div>';
                        }
                        return btn;
                    }
                },
            ];

        order = [[0, 'desc']];
        sDom = '';
        buttons = [];
        loadTable(url, params, th, col_def, columns, order, sDom, buttons);
    }
</script>

@if($create)
<script>
    $(document).ready(function(e){
        $(document).on('submit', '.form-create-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/settings/ujian_semester/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                jenis_ujian: ini.find('select[name=jenis_ujian]').val(),
                semester: ini.find('select[name=semester]').val(),
                id_jenis_sekolah: ini.find('select[name=id_jenis_sekolah]').val(),
                id_tahun_ajaran: ini.find('select[name=id_tahun_ajaran]').val(),
                tanggal_mulai: ini.find('input[name=tanggal_mulai]').val(),
                tanggal_selesai: ini.find('input[name=tanggal_selesai]').val(),
                status_aktif: ini.find('select[name=status_aktif]').val(),
            };

            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);

            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createData').modal('hide');
                        ini.find('select[name=jenis_ujian]').val('');
                        ini.find('select[name=semester]').val('');
                        ini.find('select[name=id_jenis_sekolah]').val('');
                        ini.find('select[name=id_tahun_ajaran]').val('');
                        ini.find('input[name=tanggal_mulai]').val('');
                        ini.find('input[name=tanggal_selesai]').val('');
                        ini.find('select[name=status_aktif]').val('AKTIF');
                        loadThis(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }

            postData(post_data);

        });
    });
</script>
@endif

@if($update)
<script>
    $(document).ready(function(e){
        $(document).on('click', '.btn-status-aktif', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');

            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);

            $.ajax({
                url: '/web_api/settings/ujian_semester/status_aktif/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    loadThis(param)
                    successAlert(message);
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });

        $(document).on('click', '.btn-detail', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');

            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);

            $.ajax({
                url: '/web_api/settings/ujian_semester/getData',
                type: "get",
                data: {
                    tampil_di_list: "ALL",
                    id: id,
                }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    var form = $('.form-update-data');
                    form.find('input[name=id]').val(data.id);
                    form.find('select[name=jenis_ujian]').val(data.jenis_ujian).trigger('change');
                    form.find('select[name=semester]').val(data.semester).trigger('change');

                    // Set tahun ajaran terlebih dahulu
                    form.find('.select-tahun-ajaran-update').val(data.id_tahun_ajaran).trigger('change');

                    // Tunggu ajax selesai fetch jenis sekolah, lalu set jenis sekolah
                    setTimeout(function() {
                        form.find('.select-jenis-sekolah-update').val(data.id_jenis_sekolah).trigger('change');
                    }, 500);

                    form.find('input[name=tanggal_mulai]').val(data.tanggal_mulai);
                    form.find('input[name=tanggal_selesai]').val(data.tanggal_selesai);
                    form.find('select[name=status_aktif]').val(data.status_aktif).trigger('change');

                    var footer = '<a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>' +
                                 '<button type="submit" class="btn btn-warning btn-sm">Update</button>';
                    $('#detailFooter').html(footer)
                    $('#detailData').modal('show');
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        });

        $(document).on('submit', '.form-update-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id = ini.find('input[name=id]').val(),
                url = '/web_api/settings/ujian_semester/update/'+id;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                jenis_ujian: ini.find('select[name=jenis_ujian]').val(),
                semester: ini.find('select[name=semester]').val(),
                id_jenis_sekolah: ini.find('select[name=id_jenis_sekolah]').val(),
                id_tahun_ajaran: ini.find('select[name=id_tahun_ajaran]').val(),
                tanggal_mulai: ini.find('input[name=tanggal_mulai]').val(),
                tanggal_selesai: ini.find('input[name=tanggal_selesai]').val(),
                status_aktif: ini.find('select[name=status_aktif]').val(),
            };

            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);

            function postData(datas){
                $.ajax({
                    url: url,
                    type: "post",
                    data: datas
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#detailData').modal('hide');
                        loadThis(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }

            postData(post_data);

        });
    });
</script>
@endif

@endpush