@extends('layouts.main')

@section('isi')
<div id="kt_app_content_container" class="app-container container-fluid">
    <div class="card">
        <div class="card-header"><div class="card-title fs-4 fw-bold">Sesi Jadwal — {{ $prodi->jenjang }} - {{ $prodi->prodi }} ({{ $statusPelatihan }})</div></div>
        <div class="card-header border-0 pt-6">
            <div class="card-title"><div class="d-flex align-items-center position-relative my-1"><i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i><input type="text" id="table-search" class="form-control form-control-light w-250px ps-12" placeholder="Cari"></div></div>
            <div class="card-toolbar gap-2"><a href="{{ route('sesi.index') }}" class="btn btn-light btn-sm">Kembali</a><button type="button" id="addButton" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Tambah Data</button></div>
        </div>
        <div class="card-body pt-0">
            <table id="table_sesi" class="table align-middle table-row-dashed fs-6 gy-5">
                <thead><tr class="text-start text-gray-900 fw-bold fs-7 text-uppercase gs-0"><th>No</th><th>Kode Sesi</th><th>Hari</th>@if ($statusPelatihan === 'Intensif')<th>Hari Ke</th>@endif<th>Sesi</th><th>Jam</th><th class="text-center">Aksi</th></tr></thead>
            </table>
        </div>
    </div>
</div>
@include('master.sesi.modals-form')
@endsection

@push('js-vendor')
<script src="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.js"></script>
@endpush

@push('js-page')
<script>
$(function () {
    $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
    const modal = new bootstrap.Modal(document.getElementById('modal-sesi'));
    const timePickerOptions = {
        enableTime: true,
        noCalendar: true,
        dateFormat: 'H:i',
        time_24hr: true,
        allowInput: true,
        disableMobile: true,
        minuteIncrement: 1
    };
    const jamMulaiPicker = $('#jam_mulai').flatpickr(timePickerOptions);
    const jamSelesaiPicker = $('#jam_selesai').flatpickr(timePickerOptions);
    const columns = [
        {data: 'DT_RowIndex', orderable: false, searchable: false},
        {data: 'kd_sesi', name: 'kd_sesi'}, {data: 'hari', name: 'hari'},
        @if ($statusPelatihan === 'Intensif') {data: 'harike', name: 'harike'}, @endif
        {data: 'sesi', name: 'sesi'}, {data: 'pukul', name: 'pukul'},
        {data: 'aksi', orderable: false, searchable: false, className: 'text-center'}
    ];
    const table = $('#table_sesi').DataTable({processing: true, serverSide: true, ajax: @json(route('sesi.detail', ['kode_prodi' => $prodi->kd_prodi, 'stspel' => $statusPelatihan])), columns: columns});
    $('#table-search').on('keyup', function () { table.search(this.value).draw(); });

    function resetForm() { $('#form-sesi')[0].reset(); jamMulaiPicker.clear(); jamSelesaiPicker.clear(); $('#sesi_id').val(''); $('#form-sesi .is-invalid').removeClass('is-invalid'); $('#modal-title').text('Tambah Sesi'); }
    $('#addButton').on('click', function () { resetForm(); modal.show(); });
    $('#table_sesi').on('click', '.editButton', function () {
        resetForm();
        $.post(@json(route('sesi.edit')), {id: $(this).data('id')}).done(function (data) {
            $('#sesi_id').val(data.idsesi); $('#hari').val(data.hari); $('#hari_ke').val(data.harike); $('#sesi_ke').val(data.sesi);
            jamMulaiPicker.setDate((data.jam_mulai || '').substring(0, 5), true, 'H:i'); jamSelesaiPicker.setDate((data.jam_selesai || '').substring(0, 5), true, 'H:i'); $('#modal-title').text('Update Sesi'); modal.show();
        });
    });
    $('#form-sesi').on('submit', function (event) {
        event.preventDefault(); const button = $('#saveButton').prop('disabled', true); $('#form-sesi .is-invalid').removeClass('is-invalid');
        $.post(@json(route('sesi.storeOrUpdate')), $(this).serialize()).done(function (res) { modal.hide(); table.ajax.reload(null, false); Swal.fire('Berhasil', res.message, 'success'); })
        .fail(function (xhr) { const errors = xhr.responseJSON?.errors || {}; Object.keys(errors).forEach(function (key) { $('[name="'+key+'"]').addClass('is-invalid'); $('[data-error="'+key+'"]').text(errors[key][0]); }); Swal.fire('Gagal', xhr.responseJSON?.message || 'Data gagal disimpan.', 'error'); })
        .always(function () { button.prop('disabled', false); });
    });
    $('#table_sesi').on('click', '.deleteButton', function () {
        const id = $(this).data('id'); Swal.fire({title: 'Hapus data sesi?', icon: 'warning', showCancelButton: true, confirmButtonText: 'Ya, hapus', cancelButtonText: 'Batal'}).then(function (result) {
            if (!result.isConfirmed) return; $.post(@json(route('sesi.destroy')), {id: id}).done(function (res) { table.ajax.reload(null, false); Swal.fire('Berhasil', res.message, 'success'); }).fail(function (xhr) { Swal.fire('Gagal', xhr.responseJSON?.message || 'Data gagal dihapus.', 'error'); });
        });
    });
});
</script>
@endpush