{{-- resources/views/yayasan/master/periode/index.blade.php --}}

@extends('layouts.app')

@section('title', 'Master Periode Yayasan')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">

<style>
    /* Toggle switch */
    .status-toggle {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 25px;
    }
    .status-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0;
        right: 0; bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 25px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 21px;
        width: 21px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #28a745;
    }
    input:checked + .slider:before {
        transform: translateX(25px);
    }
</style>
@endpush

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm pb-4">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Master Periode Yayasan</h3>
                            <div class="nk-block-des text-soft">
                                <p>Kelola daftar periode dalam yayasan.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            @if (Auth::user() && Auth::user()->unit_id=='99')
                            <button class="btn btn-primary-custom" id="btnTambahPeriode">
                                <em class="icon ni ni-plus"></em>
                                <span>Tambah Periode Baru</span>
                            </button>
                            @endif
                        </div>
                    </div>
                </div>

                <div id="alert-container"></div>

                <div class="card card-preview">
                    <div class="card-inner border-bottom">
                         <div class="card-title-group">
                            <div class="card-title">
                                <h5 class="title">Daftar Periode</h5>
                            </div>
                             <div class="card-tools me-n1">
                                <ul class="btn-toolbar gx-1">
                                    <li>
                                        <div class="form-control-wrap">
                                            <div class="form-icon form-icon-left"><em class="icon ni ni-search"></em></div>
                                            <input type="text" class="form-control" placeholder="Cari...">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="periode-table" class="table table-custom">
                            <thead>
                                <tr>
                                    <th width="5%">#</th>
                                    <th>Tahun</th>
                                    <th>Semester</th>
                                    <th>Status</th>
                                    <th class="text-center" width="15%">Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="modal fade" id="modalPeriode" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="formPeriode">
                    <div class="modal-header">
                        <h5 class="modal-title">Tambah Periode</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="tahun" class="form-label">Tahun</label>
                            <select class="form-select" id="tahun" name="tahun" required>
                                <option value='2026'>2026</option><option value='2027'>2027</option><option value='2028'>2028</option><option value='2029'>2029</option><option value='2030'>2030</option><option value='2031'>2031</option>                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="semester" class="form-label">Semester</label>
                            <select class="form-select" id="semester" name="semester" required>
                                <option value="1">Gasal</option>
                                <option value="2">Genap</option>
                            </select>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="status" name="status">
                            <label class="form-check-label" for="status">Aktif</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modalEditPeriode" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
              <form id="formEditPeriode">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Periode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="alert alert-danger error-message" style="display:none;"></div>

                    <div class="mb-3">
                        <label for="tahun" class="form-label">Tahun</label>
                        <select class="form-select" name="tahun" id="tahun"></select>

                    </div>
                    <div class="mb-3">
                        <label for="semester" class="form-label">Semester</label>
                        <select class="form-select" name="semester" id="semester">
                          <option value="1">1</option>
                          <option value="2">2</option>
                      </select>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Simpan</button>
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
              </div>
          </form>
      </div>
  </div>
</div>


</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        var table = $('#periode-table').DataTable({
            ajax: "{{ route('yayasan.master.periode.index') }}",
            columns: [
            { data: 'id', render: function(data,type,row,meta){ return meta.row+1; } },
            { data: 'tahun' },
            { data: 'semester' },
            { data: 'status', render: function(data,type,row){
                var checked = data == 1 ? 'checked' : '';
                return `
                <label class="status-toggle">
                <input type="checkbox" class="toggle-status" data-id="${row.id}" ${checked}>
                <span class="slider"></span>
                </label>
                `;
            }, orderable:false, searchable:false },
            { data: 'id', className: 'text-center', render: function(data,type,row){
                let action = `<div class="d-flex justify-content-center gap-2">`;
                action += `<button class="btn-action btn-action-edit edit-periode" data-id="${data}" title="Edit"><em class="icon ni ni-edit"></em></button>`;
                
                if(row.status == 0){ 
                    action += `<button class="btn-action btn-action-delete delete-periode" data-id="${data}" title="Hapus"><em class="icon ni ni-trash"></em></button>`;
                }
                action += `</div>`;
                return action;
            }, orderable:false, searchable:false }
            ]
        });

        $(document).on('change', '.toggle-status', function(){
            let id = $(this).data('id');
            let checked = $(this).is(':checked');

            $.ajax({
                url: "/yayasan/master/periode/" + id + "/toggle",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(res){
                    if(res.success){

                        $('#periode-table').DataTable().ajax.reload(null, false);
                    }
                }
            });
        });


        $('#btnTambahPeriode').on('click', function(){
            $('#formPeriode')[0].reset();
            $('#modalPeriode .modal-title').text('Tambah Periode');
            $('#modalPeriode').modal('show');
        });

        $('#formPeriode').on('submit', function(e){
            e.preventDefault();

            $.ajax({
                url: "{{ route('yayasan.master.periode.store') }}",
                method: "POST",
                data: $(this).serialize(),
                success: function(res){
                    if(res.success){ 
                        $('#modalPeriode').modal('hide');
                        $('#periode-table').DataTable().ajax.reload(); 
                        Swal.fire('Berhasil', res.message, 'success');
                    } else { 
                        Swal.fire('Peringatan', res.message, 'warning');
                    }
                },
                error: function(err){
                    console.log(err);

                    if(err.responseJSON && err.responseJSON.errors){
                        let messages = Object.values(err.responseJSON.errors).flat().join('<br>');
                        Swal.fire('Error', messages, 'error');
                    } else {
                        Swal.fire('Error', 'Terjadi kesalahan server', 'error');
                    }
                }
            });
        });

        $('#periode-table').on('click', '.edit-periode', function(){
            var id = $(this).data('id');

            $.get('/yayasan/master/periode/' + id, function(res){
                if(res.success){
                    $('#formEditPeriode').data('id', id);

                    var tahunSelect = $('#modalEditPeriode #tahun');
                    var semesterSelect = $('#modalEditPeriode #semester');

                    semesterSelect.val(res.data.semester);

                    tahunSelect.empty(); 
                    var tahunDb = parseInt(res.data.tahun);
                    var startYear = new Date().getFullYear();
                    var endYear = tahunDb + 5;

                    for(var y = startYear; y <= endYear; y++){
                        tahunSelect.append(`<option value="${y}" ${y == tahunDb ? 'selected' : ''}>${y}</option>`);
                    }

                    $('#modalEditPeriode .error-message').hide();

                    $('#modalEditPeriode').modal('show');
                } else {
                    Swal.fire('Error', 'Data tidak ditemukan', 'error');
                }
            });
        });

        $('#formEditPeriode').on('submit', function(e){
            e.preventDefault(); 

            var id = $(this).data('id');
            var tahun = $('#modalEditPeriode #tahun').val();
            var semester = $('#modalEditPeriode #semester').val();

            $.ajax({
                url: '/yayasan/master/periode/' + id,
                type: 'PUT',
                data: {
                    tahun: tahun,
                    semester: semester,
                },
                success: function(res){
                    if(res.success){

                        $('#periode-table').DataTable().ajax.reload(null, false);

                        $('#modalEditPeriode').modal('hide');

                        Swal.fire('Sukses', 'Periode berhasil diperbarui', 'success');
                    } else {

                        $('#modalEditPeriode .error-message')
                        .text(res.message)
                        .show();
                    }
                },
                error: function(xhr){
                    var errMsg = 'Terjadi kesalahan server';
                    if(xhr.responseJSON && xhr.responseJSON.message){
                        errMsg = xhr.responseJSON.message;
                    }
                    $('#modalEditPeriode .error-message')
                    .text(errMsg)
                    .show();
                }
            });
        });


        $('#periode-table').on('click', '.delete-periode', function(){
            let id = $(this).data('id');

            Swal.fire({
                title: 'Hapus Periode?',
                text: "Data yang sudah dipakai transaksi tidak bisa dihapus!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Hapus'
            }).then((result) => {
                if(result.isConfirmed){
                    $.ajax({
                        url: `/yayasan/master/periode/${id}`,
                        type: 'DELETE',
                        success: function(res){
                            if(res.success){
                                $('#periode-table').DataTable().ajax.reload();
                                Swal.fire('Berhasil', res.message, 'success');
                            } else {
                                Swal.fire('Gagal', res.message, 'error');
                            }
                        },
                        error: function(err){
                            Swal.fire('Error', 'Terjadi kesalahan!', 'error');
                        }
                    });
                }
            });
        });


    // Fungsi tampilkan alert
    function showAlert(type, message){
        $('#alert-container').html(`
            <div class="alert alert-${type}" role="alert">${message}</div>
            `);
        setTimeout(function(){ $('#alert-container').html(''); }, 4000);
    }
});
</script>
@endpush