@extends('layouts.app')

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Manajemen Pangkat Golongan</h5>
                        <div>
                            <button class="btn btn-success" id="create-new-data">Tambah Data</button>
                            <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#importModal">Import
                                Excel</button>
                            <a href="{{ route('master.pangkat-golongan.download-template') }}"
                                class="btn btn-warning">Download Template</a>
                        </div>
                    </div>
                    <div class="card-body">
                        {{-- Bagian untuk menampilkan pesan error import --}}
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                                <ul>
                                    @foreach (session('failures') as $failure)
                                        <li>Baris {{ $failure->row() }}:
                                            @foreach ($failure->errors() as $error)
                                                {{ $error }}
                                            @endforeach
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        {{-- Bagian untuk menampilkan pesan success --}}
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        <table class="table table-bordered datatable">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama Pangkat</th>
                                    <th>Golongan</th>
                                    <th>Keterangan</th>
                                    <th width="150px">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('modal')
    {{-- Modal untuk Tambah/Edit --}}
    <div class="modal fade" id="ajax-modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal-heading"></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="dataForm" name="dataForm" class="form-horizontal">
                        <input type="hidden" name="data_id" id="data_id">
                        <div class="form-group">
                            <label for="nama_pangkat" class="col-sm-12 control-label">Nama Pangkat</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="nama_pangkat" name="nama_pangkat"
                                    placeholder="Masukkan Nama Pangkat">
                                <span id="nama_pangkat-error" class="text-danger error-message"></span>
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <label for="golongan" class="col-sm-12 control-label">Golongan</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="golongan" name="golongan"
                                    placeholder="Masukkan Golongan">
                                <span id="golongan-error" class="text-danger error-message"></span>
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <label for="keterangan" class="col-sm-12 control-label">Keterangan</label>
                            <div class="col-sm-12">
                                <textarea id="keterangan" name="keterangan" rows="3" class="form-control" placeholder="Masukkan Keterangan"></textarea>
                                <span id="keterangan-error" class="text-danger error-message"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveBtn" value="create">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal untuk Import --}}
    <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">Import Data Pangkat Golongan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('master.pangkat-golongan.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="file">Pilih File Excel (.xls, .xlsx)</label>
                            <input type="file" name="file" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Import</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Memuat SweetAlert2 CSS dan JS --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                responsive: {
                    details: {
                        type: 'column',
                        target: 0,
                        renderer: function(api, rowIdx, columns) {
                            var data = $.map(columns, function(col) {
                                return col.hidden ?
                                    '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' +
                                    col.columnIndex + '">' +
                                    '<td><strong>' + col.title + ':</strong></td> ' +
                                    '<td>' + col.data + '</td>' +
                                    '</tr>' :
                                    '';
                            }).join('');
                            return data ? $('<table/>').append(data) : false;
                        }
                    }
                },
                columnDefs: [{
                    className: 'control',
                    orderable: false,
                    targets: 0,
                    render: function(data, type, row, meta) {
                        // Icon plus/minus + nomor row
                        return '<i class="fas fa-plus-circle text-primary me-1"></i>' + (meta
                            .row + 1);
                    }
                }],
                ajax: "{{ route('master.pangkat-golongan.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'nama_pangkat',
                        name: 'nama_pangkat'
                    },
                    {
                        data: 'golongan',
                        name: 'golongan'
                    },
                    {
                        data: 'keterangan',
                        name: 'keterangan'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('.datatable').on('click', 'td.control', function() {
                var icon = $(this).find('i');
                if (icon.hasClass('fa-plus-circle')) {
                    icon.removeClass('fa-plus-circle text-primary').addClass('fa-minus-circle text-danger');
                } else {
                    icon.removeClass('fa-minus-circle text-danger').addClass('fa-plus-circle text-primary');
                }
            });

            table.on('draw', function() {
                $('.datatable td.control i')
                    .removeClass('fa-minus-circle text-danger')
                    .addClass('fa-plus-circle text-primary');
            });

            // Event handler untuk tombol "Tambah Data"
            $('#create-new-data').click(function() {
                $('#saveBtn').val("create-data");
                $('#data_id').val('');
                $('#dataForm').trigger("reset");
                $('#modal-heading').html("Tambah Pangkat Golongan Baru");
                $('#ajax-modal').modal('show');
                // Bersihkan pesan error saat modal dibuka
                $('.error-message').text('');
            });

            // Event handler untuk tombol "Edit"
            $('body').on('click', '.edit-btn', function() {
                var data_id = $(this).data('id');
                // URL yang benar untuk memanggil metode `show`
                $.get("{{ route('master.pangkat-golongan.index') }}" + '/' + data_id, function(data) {
                    $('#modal-heading').html("Edit Pangkat Golongan");
                    $('#saveBtn').val("edit-data");
                    $('#ajax-modal').modal('show');
                    $('#data_id').val(data.id);
                    $('#nama_pangkat').val(data.nama_pangkat);
                    $('#golongan').val(data.golongan);
                    $('#keterangan').val(data.keterangan);
                    // Bersihkan pesan error saat modal dibuka
                    $('.error-message').text('');
                });
            });

            // Event handler untuk tombol "Simpan"
            $('#saveBtn').click(function(e) {
                e.preventDefault();
                $(this).html('Mengirim..');

                // Bersihkan pesan error sebelum pengiriman
                $('.error-message').text('');

                var formData = $('#dataForm').serialize();
                var url = "{{ route('master.pangkat-golongan.store') }}";
                var method = "POST";

                if ($('#saveBtn').val() === "edit-data") {
                    url = "{{ route('master.pangkat-golongan.store') }}" + '/' + $('#data_id').val();
                    method = "PUT";
                    formData += "&_method=PUT";
                }

                $.ajax({
                    data: formData,
                    url: url,
                    type: method,
                    dataType: 'json',
                    success: function(data) {
                        $('#dataForm').trigger("reset");
                        $('#ajax-modal').modal('hide');
                        $('#saveBtn').html('Simpan');
                        table.draw();
                        Swal.fire('Berhasil!', data.success, 'success');
                    },
                    error: function(data) {
                        console.log('Error:', data);
                        // Tampilkan pesan error validasi
                        if (data.status === 422) {
                            var errors = data.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                $('#' + key + '-error').text(value[0]);
                            });
                        }
                        $('#saveBtn').html('Simpan');
                    }
                });
            });

            // Event handler untuk tombol "Hapus"
            $('body').on('click', '.delete-btn', function() {
                var data_id = $(this).data("id");
                Swal.fire({
                    title: 'Apakah Anda Yakin?',
                    text: "Data yang dihapus tidak dapat dikembalikan!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Hapus!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "DELETE",
                            url: "{{ route('master.pangkat-golongan.store') }}" + '/' +
                                data_id,
                            success: function(data) {
                                table.draw();
                                Swal.fire('Terhapus!', data.success, 'success');
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });
                    }
                })
            });
        });
    </script>
@endpush