@extends('layouts.app')

@section('title', 'Data Jabatan')

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        .container {
            width: 90%;
            max-width: 900px;
            background: #ffffff;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        .button {
            display: inline-block;
            padding: 14px 15px;
            margin-top: 10px;
            color: #ffffff;
            background: #4e73df;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: background 0.3s ease;
        }
        .button:hover {
            background: #ACB6E5;
        }
        .alert {
            padding: 15px;
            background-color: #d1f2eb;
            color: #117864;
            margin-bottom: 20px;
            border-left: 6px solid #1abc9c;
            border-radius: 8px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            overflow: hidden;
            border-radius: 15px;
        }
        thead {
            background-color: #4e73df;
            color: white;
            text-align: center;
        }
        th, td {
            padding: 15px;
            text-align: center;
            font-size: 15px;
            border-bottom: 1px solid #e1e1e1;
        }
        tbody tr:nth-child(even) {
            background-color: #f4f9fd;
        }
        tbody tr:hover {
            background-color: #e1e6fc;
        }
        p {
            text-align: center;
            margin-top: 10px;
            font-size: 15px;
            color: #555;
        }

        .button-opsi {
            display: inline-block ;
            padding: 10px 15px;
            margin-top: 2px;
            color: #ffffff;
            background: #4e73df;
            text-decoration: none;
            border: none;
            border-radius: 15px;
            font-size: 15px;
            font family: 'Poppins', sans-serif;
            font-weight: 300;
            transition: background 0.3s ease;
            margin-right: 5px;
            cursor: pointer;
        }
        .button-group {
            display: flex;
            justify-content: right;
            margin-top: 20px;
            padding: 0 20px;
            font-size: 15px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 20px;
            border: none;
            text-decoration: none;
            font-size: 15px;
            color: white;
            font-weight: bold;
        }

        .btn-kembali {
            background-color: #4e73df;
        }

        .btn-tambah {
            background-color: #4e73df;
        }
    </style>

@section('content')
<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800">Data Jabatan</h1>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <button id="btn-tambah-jabatan" class="btn btn-primary">+ Tambah Data Jabatan</button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="jabatan-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Jabatan</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($jabatans as $key => $jabatan)
                        <tr id="jabatan-{{ $jabatan->id }}">
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $jabatan->jabatan }}</td>
                            <td>
                                <button class="btn btn-sm btn-info btn-edit" data-id="{{ $jabatan->id }}">Edit</button>
                                <button class="btn btn-sm btn-danger btn-hapus" data-id="{{ $jabatan->id }}">Hapus</button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="jabatanModal" tabindex="-1" role="dialog" aria-labelledby="jabatanModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="jabatanModalLabel">Tambah Jabatan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="jabatanForm">
                <div class="modal-body">
                    @csrf
                    <input type="hidden" id="jabatan_id">
                    <div class="form-group">
                        <label for="jabatan">Nama Jabatan</label>
                        <input type="text" class="form-control" id="jabatan" name="jabatan" required>
                        <div class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary" id="btn-simpan">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
<script>
$(document).ready(function () {
    const csrfToken = $('meta[name="csrf-token"]').attr('content');

    // 1. Tampilkan Modal untuk Tambah Data
    $('#btn-tambah-jabatan').on('click', function() {
        let id = $(this).data('id');
        $('#jabatanModal').modal('show');
        $('#jabatanForm').attr('action', '/dashboard/jabatan');
        $('#jabatanForm')[0].reset();
        $('#jabatanModalLabel').text('Tambah Data Jabatan');
        $('#jabatan_id').val('');
        $('#nama_jabatan').removeClass('is-invalid');
    });

    // 2. Tampilkan Modal untuk Edit Data
    $('#jabatan-table').on('click', '.btn-edit', function() {
        let id = $(this).data('id');
        $('#jabatanModal').modal("show")
        $.get('/dashboard/jabatan/' + id, function(data) {
            $('#jabatanModalLabel').text('Edit Data Jabatan');
            $('#jabatan_id').val(data.id);
            $('#jabatan').val(data.jabatan).removeClass('is-invalid');
        });
    });

    // 3. Proses Simpan atau Update Data
    $('#jabatanForm').on('submit', function(e) {
        e.preventDefault();
        let id = $('#jabatan_id').val();
        let url = id ? '/dashboard/jabatan/' + id : '/dashboard/jabatan';
        let method = id ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            method: method,
            data: $(this).serialize(),
            success: function(response) {
                $('#jabatanModal').modal('hide');
                Swal.fire('Sukses!', response.success, 'success');
                setTimeout(() => location.reload(), 1500);
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                if (errors.jabatan) {
                    $('#jabatan').addClass('is-invalid').next('.invalid-feedback').text(errors.jabatan[0]);
                }
            }
        });
    });

    // 4. Proses Hapus Data
    $('body').on('click', '.btn-hapus', function() {
        let id = $(this).data('id');
        Swal.fire({
            title: 'Anda yakin?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/dashboard/jabatan/' + id,
                    method: 'DELETE',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        Swal.fire('Terhapus!', response.success, 'success');
                        $('#jabatan-' + id).remove();
                         // Opsional: Reload untuk update nomor urut jika perlu
                        // setTimeout(() => location.reload(), 1500);
                    }
                });
            }
        });
    });
});
</script>
@endpush