@extends('layouts.app')

@section('title', 'Tahun Ajaran')
@section('content')
    <div id="alert-container" class="alert-container"></div>

    <div class="main-content">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-end">
                    <div class="col-lg-8">
                        <div class="page-header-title">
                            <i class="ik ik-calendar bg-blue"></i>
                            <div class="d-inline">
                                <h5>Tahun Ajaran</h5>
                                <span>Manajemen Data Tahun Ajaran</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <nav class="breadcrumb-container" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Tahun Ajaran</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Tabel Tahun Ajaran -->
            <div class="row" style="margin-bottom: 16px">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <h3>Daftar Tahun Ajaran</h3>
                            <div>
                                <!-- Tombol Hapus Terpilih -->
                                <button type="button" class="btn btn-danger" id="deleteSelectedBtn" style="display: none;">
                                    <i class="ik ik-trash-2"></i> Hapus Terpilih
                                </button>
                                <!-- Tombol Tambah Tahun Ajaran -->
                                <button type="button" class="btn btn-primary" id="btnTambahTahunAjaran" data-toggle="modal"
                                    data-target="#modalTambahTahunAjaran">
                                    <i class="ik ik-plus"></i> Tambah Tahun Ajaran
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Tahun</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($tahunAjaran as $item)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $item->tahun }}</td>
                                            <td data-status="{{ $item->status }}">
                                                @if ($item->status == 'Y')
                                                    <span class="badge badge-success">Aktif</span>
                                                @elseif($item->status == 'T')
                                                    <span class="badge badge-danger">Tidak Aktif</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="#" class="editTahunAjaran" data-id="{{ $item->id }}"
                                                    data-status="{{ $item->status }}">
                                                    <i class="ik ik-edit f-16 mr-15 text-green"></i>
                                                </a>
                                                <a href="#" class="hapusTahunAjaran" data-id="{{ $item->id }}"
                                                    style="visibility: hidden">
                                                    <i class="ik ik-trash-2 f-16 text-red"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Tambah Tahun Ajaran (Field Status Dihapus) -->
            <div class="modal fade" id="modalTambahTahunAjaran" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Tambah Tahun Ajaran</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <!-- FORM TAMBAH TAHUN AJARAN -->
                        <form action="{{ route('tahunajaran.store') }}" method="POST" id="formTambahTahunAjaran">
                            @csrf
                            <div class="modal-body">
                                <div class="form-group">
                                    <label>Tahun Ajaran</label>
                                    <select name="tahun" id="tahun" class="form-control" required
                                        oninvalid="this.setCustomValidity('Tahun ajaran tidak boleh kosong.')"
                                        oninput="this.setCustomValidity('')">
                                        <option value="" disabled selected>Pilih Tahun Ajaran</option>
                                        @php
                                            $currentYear = date('Y');
                                            $startYear = $currentYear-2;
                                            $endYear = $currentYear +2;
                                        @endphp
                                        @for ($year = $startYear; $year <= $endYear; $year++)
                                            <option value="{{ $year }}/{{ $year + 1 }}">
                                                {{ $year }}/{{ $year + 1 }}
                                            </option>
                                        @endfor
                                    </select>
                                    <span id="tahunError" class="text-danger"></span>
                                </div>

                                <!-- Field status dihapus, karena status otomatis "B" -->
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </form>
                        <!-- END FORM TAMBAH TAHUN AJARAN -->
                    </div>
                </div>
            </div>

            <!-- Modal Konfirmasi Hapus -->
            <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
                aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="deleteConfirmModalLabel">Konfirmasi Hapus</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Apakah Anda yakin ingin menghapus data ini?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                            <button type="button" id="confirmDeleteBtn" class="btn btn-danger">Hapus</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('script')
    <script>
        var currentlyEditing = null;
        var deleteMode = ''; // 'single' atau 'mass'
        var deleteId = null;
        var deleteIds = [];

        // Fungsi alert sederhana
        function showBootstrapAlert(message) {
            var alertHtml = '<div class="alert alert-warning alert-dismissible fade show custom-alert" role="alert">' +
                '<strong>Perhatian!</strong> ' + message +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span></button></div>';
            $('#alert-container').append(alertHtml);
            setTimeout(function() {
                $('.custom-alert').fadeOut(500, function() {
                    $(this).remove();
                });
            }, 3000);
        }

        function toggleButtonVisibility() {
            if ($('.select-item:checked').length > 0) {
                $('#btnTambahTahunAjaran').hide();
                $('#deleteSelectedBtn').show();
            } else {
                $('#deleteSelectedBtn').hide();
                $('#btnTambahTahunAjaran').show();
            }
        }

        $(document).ready(function() {
            var table = $('#data_table').DataTable({
                destroy: true,
                dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                language: {
                    lengthMenu: "Tampilkan _MENU_ entri",
                    search: "Cari:",
                    info: "Menampilkan _START_ hingga _END_ dari _TOTAL_ entri",
                    infoEmpty: "Menampilkan 0 hingga 0 dari 0 entri",
                    infoFiltered: "(disaring dari _MAX_ total entri)",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    },
                    zeroRecords: "Tidak ditemukan data yang sesuai"
                },
                drawCallback: function(settings) {
                    var api = this.api();
                    api.column(0, {
                        page: 'current'
                    }).nodes().each(function(cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }
            });

            // Form tambah ajaran baru dengan cek duplikat
            $('#formTambahTahunAjaran').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var tahun = form.find('select[name="tahun"]').val();

                // Cek duplikat dulu via AJAX
                $.ajax({
                    url: '{{ route('tahunajaran.check-unique') }}',
                    method: 'GET',
                    data: {
                        tahun: tahun
                    },
                    success: function(response) {
                        if (response.exists) {
                            showBootstrapAlert(
                                'Tahun ajaran tersebut sudah ada, silahkan pilih tahun lain.'
                            );
                        } else {
                            // Kalau tidak ada duplikat, submit form via AJAX
                            $.ajax({
                                url: form.attr('action'),
                                method: 'POST',
                                data: form.serialize(),
                                success: function(resp) {
                                    // Redirect atau refresh halaman sesuai kebutuhan
                                    window.location.href =
                                        '{{ route('tahunajaran.index') }}';
                                },
                                error: function() {
                                    showBootstrapAlert(
                                        'Terjadi kesalahan saat menyimpan data.'
                                    );
                                }
                            });
                        }
                    },
                    error: function() {
                        showBootstrapAlert('Gagal memeriksa duplikat data.');
                    }
                });
            });

            // Inline edit
            $('#data_table').on('click', '.editTahunAjaran', function(e) {
                e.preventDefault();
                e.stopPropagation();

                var row = $(this).closest('tr');
                if (row.hasClass('editing')) {
                    return;
                }
                row.addClass('editing');

                // Simpan data asli untuk rollback
                var originalStatus = row.find('td').eq(2).data('status');
                row.data('original', {
                    status: originalStatus,
                    aksi: row.find('td').eq(3).html()
                });

                // Ganti status dengan dropdown (opsi: Y dan T)
                var selectHtml = '<select class="form-control input-status">' +
                    '<option value="Y" ' + (originalStatus === 'Y' ? 'selected' : '') + '>Aktif</option>' +
                    '<option value="T" ' + (originalStatus === 'T' ? 'selected' : '') +
                    '>Tidak Aktif</option>' +
                    '</select>';
                row.find('td').eq(2).html(selectHtml);

                // Ganti aksi jadi tombol simpan dan batal
                var id = $(this).data('id');
                var aksiHtml = '<a href="#" class="saveTahunAjaran" data-id="' + id + '">' +
                    '<i class="ik ik-check text-success" style="font-size: 18px;"></i></a> ' +
                    '<a href="#" class="cancelTahunAjaran"><i class="ik ik-x text-danger" style="font-size: 18px; margin-left:12px;"></i></a>';
                row.find('td').eq(3).html(aksiHtml);
                row.find('.input-status').focus();
            });




            $('#data_table').on('click', '.saveTahunAjaran', function(e) {
                e.preventDefault();
                e.stopPropagation();

                var row = $(this).closest('tr');
                var id = $(this).data('id');
                var newStatus = row.find('.input-status').val();

                $.ajax({
                    url: '/tahun-ajaran/' + id,
                    method: 'PUT',
                    data: {
                        status: newStatus,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            // Update berhasil, reload halaman biar fresh!
                            location.reload();
                        }
                    },
                    error: function(xhr) {
                        var response = xhr.responseJSON;
                        var message = response && response.message ? response.message :
                            'Terjadi kesalahan saat memperbarui data.';
                        showBootstrapAlert(message);

                        // Rollback ke data asli jika update gagal
                        if (row.data('original')) {
                            var original = row.data('original');
                            var origStatus = original.status;
                            var statusLabel = origStatus === 'Y' ? 'Aktif' : 'Tidak Aktif';
                            var badgeClass = origStatus === 'Y' ? 'success' : 'danger';

                            row.find('td').eq(2).html('<span class="badge badge-' + badgeClass +
                                '">' + statusLabel + '</span>');
                            row.find('td').eq(2).attr('data-status', origStatus);
                            row.find('td').eq(3).html(original.aksi);
                            row.removeClass('editing');
                        }
                    }
                });
            });



            // Cancel editing
            $('#data_table').on('click', '.cancelTahunAjaran', function(e) {
                e.preventDefault();
                e.stopPropagation();

                var row = $(this).closest('tr');
                if (row.data('original')) {
                    var original = row.data('original');
                    var origStatus = original.status;
                    var statusLabel = origStatus === 'Y' ? 'Aktif' : 'Tidak Aktif';
                    var badgeClass = origStatus === 'Y' ? 'success' : 'danger';

                    table.cell(row, 2).data('<span class="badge badge-' + badgeClass + '">' + statusLabel +
                        '</span>').draw(false);
                    table.cell(row, 3).data(original.aksi).draw(false);
                    row.find('td').eq(2).attr('data-status', origStatus);
                    row.removeClass('editing');
                }
            });

            // Event keyboard ESC untuk menghapus semua centang
            // Event keyboard ESC untuk membatalkan inline edit (sama kayak klik batal)
            $(document).on('keyup', function(e) {
                if (e.which === 27) { // Escape key
                    var editingRows = $('#data_table tr.editing');
                    if (editingRows.length > 0) {
                        editingRows.each(function() {
                            $(this).find('.cancelTahunAjaran').trigger('click');
                        });
                    } else {
                        // Kalau nggak ada yang lagi edit, optional: clear centang kalau masih ada
                        $('.select-item').prop('checked', false);
                        selectedIds = {};
                        toggleButtonVisibility();
                    }
                }
            });


            // Fungsi alert sederhana (kalau diperlukan lagi)
            function showBootstrapAlert(message) {
                var alertHtml =
                    '<div class="alert alert-warning alert-dismissible fade show custom-alert" role="alert">' +
                    '<strong>Perhatian!</strong> ' + message +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span></button></div>';
                $('#alert-container').append(alertHtml);
                setTimeout(function() {
                    $('.custom-alert').fadeOut(500, function() {
                        $(this).remove();
                    });
                }, 3000);
            }
        });
    </script>


    <style>
        div.dataTables_wrapper div.dataTables_paginate {
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            background-color: #fdfdfd !important;
            color: #212529 !important;
            border: 1px solid #e9e9e9 !important;
            border-radius: 0.25rem;
            padding: 0.375rem 0.75rem;
            margin-top: 15px;
            padding-bottom: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #e2e6ea !important;
            border-color: #dae0e5 !important;
            color: #212529 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #e2e6ea !important;
            border-color: #dae0e5 !important;
            color: #212529 !important;
        }

        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            max-width: 350px;
        }

        .custom-alert {
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            padding: 10px 15px;
        }

        #data_table th:first-child,
        #data_table td:first-child {
            width: 80px !important;
            text-align: center !important;
            padding: 5px !important;
        }

        #data_table th:nth-child(3),
        #data_table td:nth-child(3) {
            width: 120px !important;
        }


        #data_table th:last-child,
        #data_table td:last-child {
            width: 80px !important;
            text-align: center !important;
        }
    </style>
@endsection