@extends('layouts.app')

@section('title', 'Jadwal Masuk')
@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>Jadwal Masuk</h5>
                                <span>Manajemen jadwal masuk kelas</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">Jadwal Masuk</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Tabel Jadwal Masuk -->
            <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 Jadwal Masuk</h3>
                            <div>
                                <!-- Tombol Hapus Terpilih, disembunyikan secara default -->
                                <button type="button" class="btn btn-danger" id="deleteSelectedBtn" style="display: none;">
                                    <i class="ik ik-trash-2"></i> Hapus Terpilih
                                </button>
                                <!-- Tombol Tambah Jadwal dengan ID khusus -->
                                <button type="button" class="btn btn-primary" id="btnTambahJadwal" data-toggle="modal"
                                    data-target="#modalTambahJadwal">
                                    <i class="ik ik-plus"></i> Tambah Jadwal
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        <!-- Kolom centang -->
                                        <th><input type="checkbox" id="selectAll"></th>
                                        <th>No</th>
                                        <th>Jam Masuk</th>
                                        <th>Jam Pulang</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($jadwal as $item)
                                        <tr>
                                            <td><input type="checkbox" class="select-item" value="{{ $item->id }}"></td>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $item->jam_masuk }}</td>
                                            <td>{{ $item->jam_pulang }}</td>
                                            <td>
                                                <span
                                                    class="badge 
                      @if ($item->status == 'aktif') badge badge-success
                      @else
                        badge badge-danger @endif
                    ">{{ ucfirst($item->status) }}</span>
                                            </td>
                                            <td>
                                                <a href="#" class="editJadwal" data-id="{{ $item->id }}"
                                                    data-masuk="{{ $item->jam_masuk }}"
                                                    data-pulang="{{ $item->jam_pulang }}" data-status="{{ $item->status }}">
                                                    <i class="ik ik-edit f-16 mr-15 text-green"></i>
                                                </a>
                                                <a href="#" class="hapusJadwal" data-id="{{ $item->id }}">
                                                    <i class="ik ik-trash-2 f-16 text-red"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Tambah Jadwal -->
            <div class="modal fade" id="modalTambahJadwal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Tambah Jadwal Masuk</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <form action="{{ route('jadwalmasuk.store') }}" method="POST" id="formTambahJadwal">
                            @csrf
                            <div class="modal-body">
                                <div class="form-group">
                                    <label>Jam Masuk</label>
                                    <input type="time" id="jam_masuk" name="jam_masuk" class="form-control"
                                        step="1" required
                                        oninvalid="this.setCustomValidity('Jam masuk tidak boleh kosong.')"
                                        oninput="this.setCustomValidity('')">
                                </div>
                                <div class="form-group">
                                    <label>Jam Pulang</label>
                                    <input type="time" id="jam_pulang" name="jam_pulang" class="form-control"
                                        step="1" required
                                        oninvalid="this.setCustomValidity('Jam pulang tidak boleh kosong.')"
                                        oninput="this.setCustomValidity('')">
                                </div>
                                <div class="form-group">
                                    <label>Status</label>
                                    <select name="status" class="form-control" required>
                                        <option value="aktif">Aktif</option>
                                        <option value="non aktif">Non Aktif</option>
                                    </select>
                                </div>
                                <!-- Elemen untuk menampilkan pesan error validasi -->
                                <span id="jadwalError" class="text-danger"></span>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                                <button type="submit" class="btn btn-primary" id="btnSimpanJadwal">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal Edit Jadwal -->
            <div class="modal fade" id="editJadwalModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Jadwal</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <form id="formEditJadwal" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="modal-body">
                                <input type="hidden" name="id">
                                <div class="form-group">
                                    <label>Jam Masuk</label>
                                    <input type="time" name="jam_masuk" class="form-control" step="1" required
                                        oninvalid="this.setCustomValidity('Jam masuk tidak boleh kosong.')"
                                        oninput="this.setCustomValidity('')">
                                </div>
                                <div class="form-group">
                                    <label>Jam Pulang</label>
                                    <input type="time" name="jam_pulang" class="form-control" step="1" required
                                        oninvalid="this.setCustomValidity('Jam pulang tidak boleh kosong.')"
                                        oninput="this.setCustomValidity('')">
                                </div>
                                <div class="form-group">
                                    <label>Status</label>
                                    <select name="status" class="form-control" required>
                                        <option value="aktif">Aktif</option>
                                        <option value="non aktif">Non Aktif</option>
                                    </select>
                                </div>
                            </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>
                    </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>
        // ========================================================================
        // Fungsi untuk menampilkan alert Bootstrap
        // ========================================================================
        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);
        }

        $(document).ready(function() {
            // Inisialisasi DataTable
            if ($.fn.DataTable.isDataTable('#data_table')) {
                $('#data_table').DataTable().destroy();
            }

            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"
                },
                paging: true,
                searching: true,
                ordering: true,
                drawCallback: function(settings) {
                    var api = this.api();
                    api.column(1, {
                        page: 'current'
                    }).nodes().each(function(cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }
            });

            $('#data_table_filter input').addClass('form-control form-control-sm');
            $('#data_table_length select').addClass('form-control form-control-sm');

            var currentlyEditing = null;
            var deleteMode = ''; // 'single' atau 'mass'
            var deleteId = null;
            var deleteIds = [];

            // ========================================================================
            // VALIDASI SAAT KLIK TOMBOL SIMPAN PADA MODAL TAMBAH JADWAL MASUK
            // ========================================================================
            $('#formTambahJadwal').on('submit', function(e) {
                e.preventDefault();
                var form = this;
                var jamMasuk = $(form).find('input[name="jam_masuk"]').val().trim();
                var jamPulang = $(form).find('input[name="jam_pulang"]').val().trim();

                $.ajax({
                    url: '{{ route('jadwalmasuk.check-unique') }}',
                    method: 'GET',
                    data: {
                        jam_masuk: jamMasuk,
                        jam_pulang: jamPulang
                    },
                    success: function(response) {
                        if (response.exists) {
                            showBootstrapAlert(
                                'Jadwal dengan jam masuk dan jam pulang tersebut sudah ada.'
                            );
                        } else {
                            $('#formTambahJadwal').off('submit');
                            form.submit();
                        }
                    },
                    error: function() {
                        showBootstrapAlert('Terjadi kesalahan saat memeriksa keunikan jadwal.');
                    }
                });
            });

            // --- Fitur Centang dan Toggle Tombol ---
            function toggleButtonVisibility() {
                if ($('.select-item:checked').length > 0) {
                    $('#deleteSelectedBtn').show();
                    $('#btnTambahJadwal').hide();
                } else {
                    $('#deleteSelectedBtn').hide();
                    $('#btnTambahJadwal').show();
                }
            }

            $('#selectAll').on('click', function() {
                var isChecked = $(this).prop('checked');
                $('.select-item').prop('checked', isChecked);
                toggleButtonVisibility();
            });

            $('#data_table').on('click', '.select-item', function() {
                if (!$(this).prop('checked')) {
                    $('#selectAll').prop('checked', false);
                }
                toggleButtonVisibility();
            });

            $('#deleteSelectedBtn').on('click', function(e) {
                e.preventDefault();
                if (currentlyEditing) {
                    showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
                    return;
                }
                deleteMode = 'mass';
                deleteIds = [];
                $('.select-item:checked').each(function() {
                    deleteIds.push($(this).val());
                });
                if (deleteIds.length === 0) {
                    showBootstrapAlert('Pilih minimal satu data untuk dihapus.');
                    return;
                }
                $('#deleteConfirmModal').modal('show');
            });

            // --- Inline Edit Jadwal Masuk ---
            // Saat mulai edit, simpan HTML asli (bukan text) dari setiap cell
            $('#data_table').on('click', '.editJadwal', function(e) {
                e.preventDefault();
                // Validasi: kalo ada centang aktif, tolak aksi edit
                if ($('.select-item:checked').length > 0) {
                    showBootstrapAlert('Batalkan centang semua baris terlebih dahulu untuk mengedit data.');
                    return;
                }
                var row = $(this).closest('tr');
                if (currentlyEditing && currentlyEditing[0] !== row[0]) {
                    showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
                    return;
                }
                row.addClass('editing');
                currentlyEditing = row;
                // Simpan HTML asli tiap cell
                var originalData = {
                    jamMasuk: row.find('td').eq(2).html(),
                    jamPulang: row.find('td').eq(3).html(),
                    status: row.find('td').eq(4).html(),
                    aksi: row.find('td').eq(5).html()
                };
                row.data('original', originalData);

                var id = $(this).data('id');
                var jamMasuk = $(this).data('masuk');
                var jamPulang = $(this).data('pulang');
                var status = $(this).data('status').toLowerCase();

                // Ganti cell dengan input field/editable form
                row.find('td').eq(2).html(
                    '<input type="time" step="1" class="form-control input-jam-masuk" value="' +
                    jamMasuk.substr(0, 8) + '">');
                row.find('td').eq(3).html(
                    '<input type="time" step="1" class="form-control input-jam-pulang" value="' +
                    jamPulang.substr(0, 8) + '">');

                var selectHtml = '<select class="form-control input-status">' +
                    '<option value="aktif" ' + (status === 'aktif' ? 'selected' : '') + '>Aktif</option>' +
                    '<option value="non aktif" ' + (status === 'non aktif' ? 'selected' : '') +
                    '>Non Aktif</option>' +
                    '</select>';
                row.find('td').eq(4).html(selectHtml);

                var aksiHtml = '<a href="#" class="saveJadwal" data-id="' + id +
                    '"><i class="ik ik-check text-success" style="font-size: 18px;"></i></a> ' +
                    '<a href="#" class="cancelJadwal"><i class="ik ik-x text-danger" style="font-size: 18px; margin-left:12px;"></i></a>';
                row.find('td').eq(5).html(aksiHtml);
            });

            // Handler cancel edit, langsung restore HTML asli dari data('original')
            $('#data_table').on('click', '.cancelJadwal', function(e) {
                e.preventDefault();
                var row = $(this).closest('tr');
                var originalData = row.data('original');
                row.find('td').eq(2).html(originalData.jamMasuk);
                row.find('td').eq(3).html(originalData.jamPulang);
                row.find('td').eq(4).html(originalData.status);
                row.find('td').eq(5).html(originalData.aksi);
                row.removeClass('editing');
                currentlyEditing = null;
            });

            $('#data_table').on('click', '.saveJadwal', function(e) {
                e.preventDefault();
                var row = $(this).closest('tr');
                var id = $(this).data('id');

                var newJamMasuk = row.find('.input-jam-masuk').val().trim();
                var newJamPulang = row.find('.input-jam-pulang').val().trim();
                var newStatus = row.find('.input-status').val();

                if (newJamMasuk.length === 5) {
                    newJamMasuk += ':00';
                }
                if (newJamPulang.length === 5) {
                    newJamPulang += ':00';
                }

                $.ajax({
                    url: '/jadwal-masuk/' + id,
                    method: 'PUT',
                    data: {
                        jam_masuk: newJamMasuk,
                        jam_pulang: newJamPulang,
                        status: newStatus,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            // Update baris yang diedit
                            row.find('td').eq(2).text(newJamMasuk);
                            row.find('td').eq(3).text(newJamPulang);
                            var badgeClass = (newStatus.toLowerCase() === 'aktif') ?
                                'badge badge-success' : 'badge badge-danger';
                            var statusTampil = newStatus.charAt(0).toUpperCase() + newStatus
                                .slice(1);
                            row.find('td').eq(4).html('<span class="' + badgeClass + '">' +
                                statusTampil + '</span>');

                            var editIcon = '<a href="#" class="editJadwal" data-id="' + id +
                                '" data-masuk="' + newJamMasuk + '" data-pulang="' +
                                newJamPulang + '" data-status="' + newStatus + '">' +
                                '<i class="ik ik-edit f-16 mr-15 text-green"></i></a>';
                            var deleteIcon = '<a href="#" class="hapusJadwal" data-id="' + id +
                                '">' +
                                '<i class="ik ik-trash-2 f-16 text-red"></i></a>';
                            row.find('td').eq(5).html(editIcon + ' ' + deleteIcon);

                            // Kalau status yang diupdate jadi "aktif", update semua baris lain jadi "non aktif"
                            if (newStatus.toLowerCase() === 'aktif') {
                                $('#data_table tbody tr').each(function() {
                                    var otherRow = $(this);
                                    if (otherRow[0] !== row[0]) {
                                        // Ubah cell status jadi "Non Aktif"
                                        otherRow.find('td').eq(4).html(
                                            '<span class="badge badge-danger">Non Aktif</span>'
                                        );
                                        // Update data-status pada icon edit, biar pas diklik, statusnya juga "non aktif"
                                        var editLink = otherRow.find('a.editJadwal');
                                        if (editLink.length) {
                                            editLink.data('status', 'non aktif');
                                        }
                                    }
                                });
                            }

                            row.removeClass('editing');
                            currentlyEditing = null;
                        }
                    },
                    error: function(xhr) {
                        var response = xhr.responseJSON;
                        var message = response && response.message ? response.message :
                            'Terjadi kesalahan saat memperbarui data.';
                        showBootstrapAlert(message);
                    }

                });

            });

            // --- Hapus Data ---
            $('#data_table').on('click', '.hapusJadwal', function(e) {
                e.preventDefault();
                // Tambahan validasi: jika ada centang aktif, tolak aksi hapus
                if ($('.select-item:checked').length > 0) {
                    showBootstrapAlert(
                        'Batalkan centang semua baris terlebih dahulu untuk menghapus data.');
                    return;
                }
                if (currentlyEditing) {
                    showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
                    return;
                }
                deleteMode = 'single';
                deleteId = $(this).data('id');
                $('#deleteConfirmModal').modal('show');
            });

            $('#confirmDeleteBtn').on('click', function() {
                if (deleteMode === 'single' && deleteId) {
                    $.ajax({
                        url: '/jadwal-masuk/' + deleteId,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                var row = $('#data_table').find('a.hapusJadwal[data-id="' +
                                    deleteId + '"]').closest('tr');
                                row.fadeOut(400, "swing", function() {
                                    table.row(row).remove().draw(false);
                                });
                            } else {
                                showBootstrapAlert('Gagal menghapus data.');
                            }
                        },
                        error: function() {
                            showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
                        }
                    });
                } else if (deleteMode === 'mass' && deleteIds.length > 0) {
                    $.ajax({
                        url: '/jadwal-masuk/hapus-massal',
                        type: 'POST',
                        data: {
                            ids: deleteIds,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                $('.select-item:checked').each(function() {
                                    var row = $(this).closest('tr');
                                    row.fadeOut(400, "swing", function() {
                                        table.row(row).remove().draw(false);
                                    });
                                });
                                $('#selectAll').prop('checked', false);
                                $('.select-item').prop('checked', false);
                                toggleButtonVisibility();
                            } else {
                                showBootstrapAlert('Gagal menghapus data.');
                            }
                        },
                        error: function(xhr) {
                            console.log(xhr.responseText);
                            showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
                        }
                    });
                }
                $('#deleteConfirmModal').modal('hide');
            });

            // Listener tombol ESC: uncheck semua centang & batalkan edit jika ada
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' || e.keyCode === 27) {
                    // Uncheck semua checkbox
                    $('.select-item').prop('checked', false);
                    $('#selectAll').prop('checked', false);
                    toggleButtonVisibility();

                    // Kalau ada baris yang sedang aktif edit, trigger cancel-nya
                    if (currentlyEditing) {
                        currentlyEditing.find('.cancelJadwal').trigger('click');
                    }
                }
            });

        });
    </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(2),
        #data_table td:nth-child(2) {
            width: 80px !important;
        }

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