@extends('layouts.adminlte')

@section('title', 'MASTER JENIS PEKERJA')
@section('page_title', 'MASTER JENIS PEKERJA')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
<style>
    .jenis-pekerja-shell {
        border: 1px solid #d8e3f3;
        border-radius: 1.25rem;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }
    .jenis-pekerja-hero {
        background:
            radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 42%),
            linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
        border-bottom: 1px solid #d8e3f3;
        padding: 1.25rem 1.5rem;
    }
    .jenis-pekerja-hero-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .jenis-pekerja-hero-copy h3 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
        color: #17315c;
    }
    .jenis-pekerja-hero-copy p {
        margin: .35rem 0 0;
        color: #4b6386;
        max-width: 760px;
    }
    .jenis-pekerja-note {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .75rem;
        border-radius: 999px;
        background: rgba(245, 158, 11, 0.12);
        color: #9a6700;
        font-size: .85rem;
        font-weight: 600;
    }
    .jenis-pekerja-body {
        padding: 1.25rem 1.5rem 1.5rem;
        background: #fff;
    }
    .jenis-pekerja-table th {
        white-space: nowrap;
    }
    .jenis-pekerja-code {
        font-weight: 700;
        color: #17315c;
    }
    .jenis-pekerja-actions {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }
    @media (max-width: 768px) {
        .jenis-pekerja-hero,
        .jenis-pekerja-body {
            padding: 1rem;
        }
    }
</style>
@endpush

@section('content')
<div class="card jenis-pekerja-shell">
    <div class="jenis-pekerja-hero">
        <div class="jenis-pekerja-hero-title">
            <div class="jenis-pekerja-hero-copy">
                <h3>Master Jenis Pekerja</h3>
                <p>Kelola referensi jenis pekerja yang dipakai di form Master Karyawan, filter HRIS, dan kebutuhan payroll lainnya dari satu halaman.</p>
            </div>
            <button class="btn btn-primary" id="btnAddJenisPekerja">
                <i class="fas fa-plus me-1"></i>Tambah Jenis Pekerja
            </button>
        </div>
        <div class="mt-3 d-flex flex-wrap gap-2 align-items-center">
            <span class="jenis-pekerja-note">
                <i class="fas fa-circle-info"></i>
                Hapus hanya bisa dilakukan jika belum dipakai oleh data karyawan.
            </span>
            <a href="{{ route('master_karyawan.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-users me-1"></i>Buka Master Karyawan
            </a>
        </div>
    </div>
    <div class="jenis-pekerja-body">
        <div class="table-responsive">
            <table id="jenisPekerjaTable" class="table table-striped table-hover align-middle w-100 jenis-pekerja-table">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Kode</th>
                        <th>Nama</th>
                        <th>Status</th>
                        <th>Dipakai Karyawan</th>
                        <th>Description</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="jenisPekerjaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="jenisPekerjaModalTitle">Tambah Jenis Pekerja</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="jenisPekerjaForm">
                <div class="modal-body">
                    <input type="hidden" id="jenisPekerjaId">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="jenisPekerjaCode" maxlength="60" required>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Nama Jenis Pekerja</label>
                            <input type="text" class="form-control" id="jenisPekerjaName" maxlength="180" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="jenisPekerjaDescription" rows="3" placeholder="Catatan tambahan jika diperlukan."></textarea>
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="jenisPekerjaActive" checked>
                                <label class="form-check-label" for="jenisPekerjaActive">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
$(function () {
    const modalEl = document.getElementById('jenisPekerjaModal');
    const modal = modalEl ? new bootstrap.Modal(modalEl) : null;

    const table = $('#jenisPekerjaTable').DataTable({
        ajax: @json(route('master_jenis_pekerja.data')),
        pageLength: 25,
        order: [[2, 'asc']],
        columns: [
            {
                data: null,
                render: (d, t, r, m) => m.row + 1,
            },
            {
                data: 'code',
                render: (value) => `<span class="jenis-pekerja-code">${value || '-'}</span>`,
            },
            { data: 'name' },
            {
                data: 'is_active',
                render: (value) => value
                    ? '<span class="badge bg-success">Aktif</span>'
                    : '<span class="badge bg-secondary">Nonaktif</span>',
            },
            {
                data: 'karyawans_count',
                render: (value) => `<span class="badge text-bg-info">${Number(value || 0)} orang</span>`,
            },
            {
                data: 'description',
                render: (value) => value || '<span class="text-muted">-</span>',
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: (d, t, row) => `
                    <div class="jenis-pekerja-actions">
                        <button type="button" class="btn btn-sm btn-outline-primary btn-edit" data-id="${row.id}">Edit</button>
                        <button type="button" class="btn btn-sm btn-outline-danger btn-delete" data-id="${row.id}">Delete</button>
                    </div>
                `,
            },
        ],
    });

    const resetForm = () => {
        $('#jenisPekerjaId').val('');
        $('#jenisPekerjaCode').val('');
        $('#jenisPekerjaName').val('');
        $('#jenisPekerjaDescription').val('');
        $('#jenisPekerjaActive').prop('checked', true);
    };

    $('#btnAddJenisPekerja').on('click', function () {
        $('#jenisPekerjaModalTitle').text('Tambah Jenis Pekerja');
        resetForm();
        modal.show();
    });

    $('#jenisPekerjaTable').on('click', '.btn-edit', function () {
        const row = table.row($(this).closest('tr')).data();
        if (!row) {
            return;
        }

        $('#jenisPekerjaModalTitle').text('Edit Jenis Pekerja');
        $('#jenisPekerjaId').val(row.id || '');
        $('#jenisPekerjaCode').val(row.code || '');
        $('#jenisPekerjaName').val(row.name || '');
        $('#jenisPekerjaDescription').val(row.description || '');
        $('#jenisPekerjaActive').prop('checked', !!row.is_active);
        modal.show();
    });

    $('#jenisPekerjaForm').on('submit', function (e) {
        e.preventDefault();

        const id = $('#jenisPekerjaId').val();
        const payload = {
            code: $('#jenisPekerjaCode').val(),
            name: $('#jenisPekerjaName').val(),
            description: $('#jenisPekerjaDescription').val(),
            is_active: $('#jenisPekerjaActive').is(':checked') ? 1 : 0,
        };

        $.ajax({
            url: id ? `{{ url('/master-jenis-pekerja') }}/${id}` : @json(route('master_jenis_pekerja.store')),
            method: id ? 'PUT' : 'POST',
            data: payload,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        }).done((resp) => {
            modal.hide();
            table.ajax.reload(null, false);
            Swal.fire('Berhasil', resp?.message || 'Data tersimpan.', 'success');
        }).fail((xhr) => {
            Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan data.', 'error');
        });
    });

    $('#jenisPekerjaTable').on('click', '.btn-delete', function () {
        const row = table.row($(this).closest('tr')).data();
        if (!row) {
            return;
        }

        Swal.fire({
            title: 'Hapus jenis pekerja?',
            text: `${row.code || '-'} - ${row.name || '-'}`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, hapus',
            cancelButtonText: 'Batal',
        }).then((result) => {
            if (!result.isConfirmed) {
                return;
            }

            $.ajax({
                url: `{{ url('/master-jenis-pekerja') }}/${row.id}`,
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
            }).done((resp) => {
                table.ajax.reload(null, false);
                Swal.fire('Berhasil', resp?.message || 'Data dihapus.', 'success');
            }).fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menghapus data.', 'error');
            });
        });
    });
});
</script>
@endpush