@extends('layouts.adminlte')

@section('title', 'THR KARYAWAN')
@section('page_title', 'THR KARYAWAN')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Pengajuan & Pembayaran THR</h3>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-dark btn-sm" id="btnReportYear">
                    <i class="fas fa-chart-bar me-1"></i>Laporan Tahunan
                </button>
                <button class="btn btn-primary btn-sm" id="btnGenerate">
                    <i class="fas fa-plus me-1"></i>Generate Draft THR
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label">Tahun THR</label>
                    <input type="number" id="year" class="form-control" min="2000" max="2100" value="{{ now()->year }}" />
                </div>
                <div class="col-md-5">
                    <label class="form-label">Profil Bulan</label>
                    <select id="profilBulanId" class="form-select"></select>
                </div>
                <div class="col-md-5 text-end">
                    <button class="btn btn-primary" id="btnLoad"><i class="fas fa-filter me-1"></i>Tampilkan</button>
                </div>
            </div>
            <div class="mt-2 text-muted small" id="summaryText">-</div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title m-0">Daftar Pengajuan THR</h3></div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="requestTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>No Pengajuan</th>
                            <th>Profil Bulan</th>
                            <th>Status</th>
                            <th>Karyawan</th>
                            <th>Total</th>
                            <th>Approved</th>
                            <th>Terbayar</th>
                            <th>Sisa</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Detail Karyawan THR</h3>
            <small class="text-muted" id="detailTitle">Pilih pengajuan terlebih dahulu.</small>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="detailTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Karyawan</th>
                            <th>Status</th>
                            <th>Gaji Pokok</th>
                            <th>Prorata</th>
                            <th>Nominal THR</th>
                            <th>Approved</th>
                            <th>Terbayar</th>
                            <th>Sisa</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="payModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bayar THR Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="payForm">
                    <div class="modal-body">
                        <input type="hidden" id="payDetailId" />
                        <div class="mb-2">
                            <label class="form-label">Karyawan</label>
                            <input type="text" id="payEmployee" class="form-control" readonly />
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Tanggal Bayar</label>
                                <input type="date" id="payDate" class="form-control" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nominal Bayar</label>
                                <input type="number" id="payAmount" class="form-control" step="0.01" min="0.01" required />
                            </div>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Metode Bayar</label>
                            <input type="text" id="paymentMethod" class="form-control" placeholder="Transfer/Cash/BG" />
                        </div>
                        <div class="mt-2">
                            <label class="form-label">No Referensi</label>
                            <input type="text" id="referenceNo" class="form-control" />
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Catatan</label>
                            <textarea id="payNotes" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit">Simpan Pembayaran</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 csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const payModal = new bootstrap.Modal(document.getElementById('payModal'));
            let refs = { profil_bulans: [] };
            let requestRows = [];
            let detailRows = [];
            let selectedRequestId = null;

            const fmtRp = (v) => `Rp ${Number(v || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
            const statusBadge = (s) => {
                const map = {
                    draft: 'secondary',
                    submitted: 'info',
                    in_review: 'primary',
                    approved: 'success',
                    rejected: 'danger',
                    partial_paid: 'warning',
                    paid: 'success',
                };
                return `<span class="badge text-bg-${map[s] || 'secondary'}">${s || '-'}</span>`;
            };

            const requestTable = $('#requestTable').DataTable({
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'request_no' },
                    { data: 'profil_bulan' },
                    { data: 'status', render: (v) => statusBadge(v) },
                    { data: 'details_count' },
                    { data: 'total_nominal', render: (v) => fmtRp(v) },
                    { data: 'approved_nominal', render: (v) => fmtRp(v) },
                    { data: 'paid_nominal', render: (v) => fmtRp(v) },
                    { data: 'outstanding_nominal', render: (v) => fmtRp(v) },
                    { data: null, orderable: false, render: (r) => {
                        let btn = `<button class="btn btn-sm btn-outline-primary btn-detail" data-id="${r.id}">Detail</button> `;
                        if (['draft', 'rejected'].includes(r.status || '')) btn += `<button class="btn btn-sm btn-outline-info btn-submit" data-id="${r.id}">Ajukan</button> `;
                        if (['draft', 'rejected'].includes(r.status || '')) btn += `<button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button> `;
                        if (['submitted', 'in_review'].includes(r.status || '')) btn += `<button class="btn btn-sm btn-outline-success btn-approve" data-id="${r.id}">Approve</button> <button class="btn btn-sm btn-outline-danger btn-reject" data-id="${r.id}">Reject</button>`;
                        return btn;
                    }},
                ],
            });

            const detailTable = $('#detailTable').DataTable({
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: null, render: (r) => `${r.employee_code || '-'} - ${r.employee_name || '-'}` },
                    { data: 'status', render: (v) => statusBadge(v) },
                    { data: 'base_salary_monthly', render: (v) => fmtRp(v) },
                    { data: null, render: (r) => `${Number(r.prorate_months || 0).toFixed(2)} bln / ${(Number(r.prorate_factor || 0) * 100).toFixed(2)}%` },
                    { data: 'thr_nominal', render: (v) => fmtRp(v) },
                    { data: 'approved_nominal', render: (v) => fmtRp(v) },
                    { data: 'paid_nominal', render: (v) => fmtRp(v) },
                    { data: 'outstanding_nominal', render: (v) => fmtRp(v) },
                    { data: null, orderable: false, render: (r) => {
                        const canPay = Number(r.outstanding_nominal || 0) > 0 && ['approved', 'partial_paid'].includes((r.status || '').toLowerCase());
                        return canPay
                            ? `<button class="btn btn-sm btn-outline-success btn-pay" data-id="${r.id}">Bayar</button>`
                            : '<span class="text-muted">-</span>';
                    }},
                ],
            });

            function loadRefs() {
                return $.getJSON('{{ route('penggajian.thr.refs') }}').done((resp) => {
                    refs = resp.data || refs;
                    $('#profilBulanId').html((refs.profil_bulans || []).map((x) => `<option value="${x.id}">${x.code} - ${x.name}</option>`).join(''));
                });
            }

            function loadData() {
                const year = Number($('#year').val() || 0);
                const profilBulanId = $('#profilBulanId').val() || '';
                if (!year || year < 2000) {
                    Swal.fire('Warning', 'Tahun THR tidak valid.', 'warning');
                    return;
                }
                $.getJSON('{{ route('penggajian.thr.data') }}', { year, profil_bulan_id: profilBulanId })
                    .done((resp) => {
                        requestRows = resp.data || [];
                        requestTable.clear().rows.add(requestRows).draw();
                        const s = resp.meta?.summary || {};
                        $('#summaryText').text(`Pengajuan: ${s.requests || 0} | Total: ${fmtRp(s.total_nominal || 0)} | Approved: ${fmtRp(s.approved_nominal || 0)} | Terbayar: ${fmtRp(s.paid_nominal || 0)} | Sisa: ${fmtRp(s.outstanding_nominal || 0)}`);
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load data THR', 'error'));
            }

            function loadDetails(requestId) {
                selectedRequestId = Number(requestId || 0);
                if (!selectedRequestId) return;
                $.getJSON('{{ route('penggajian.thr.details') }}', { request_id: selectedRequestId })
                    .done((resp) => {
                        detailRows = resp.data || [];
                        detailTable.clear().rows.add(detailRows).draw();
                        const header = requestRows.find((x) => Number(x.id) === selectedRequestId);
                        $('#detailTitle').text(header ? `${header.request_no} - ${header.status}` : `Request #${selectedRequestId}`);
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load detail THR', 'error'));
            }

            $('#btnLoad').on('click', loadData);

            $('#btnGenerate').on('click', function () {
                const year = Number($('#year').val() || 0);
                const profilBulanId = $('#profilBulanId').val() || '';
                if (!year || !profilBulanId) {
                    Swal.fire('Warning', 'Tahun dan Profil Bulan wajib diisi.', 'warning');
                    return;
                }
                Swal.fire({
                    title: 'Generate draft THR?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, generate'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post('{{ route('penggajian.thr.generate') }}', { year, profil_bulan_id: profilBulanId })
                        .done((resp) => {
                            loadData();
                            Swal.fire('Success', resp.message || 'Draft THR dibuat', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Generate gagal', 'error'));
                });
            });

            $('#requestTable').on('click', '.btn-detail', function () {
                loadDetails(Number($(this).data('id')));
            });

            $('#requestTable').on('click', '.btn-submit', function () {
                const id = Number($(this).data('id'));
                $.post(`{{ url('/penggajian/thr') }}/${id}/submit`)
                    .done((resp) => { loadData(); if (selectedRequestId === id) loadDetails(id); Swal.fire('Success', resp.message || 'Diajukan', 'success'); })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal ajukan', 'error'));
            });

            $('#requestTable').on('click', '.btn-approve', function () {
                const id = Number($(this).data('id'));
                $.post(`{{ url('/penggajian/thr') }}/${id}/approve`)
                    .done((resp) => { loadData(); if (selectedRequestId === id) loadDetails(id); Swal.fire('Success', resp.message || 'Diapprove', 'success'); })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal approve', 'error'));
            });

            $('#requestTable').on('click', '.btn-reject', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Alasan reject',
                    input: 'text',
                    showCancelButton: true,
                    inputValidator: (v) => !v ? 'Alasan wajib diisi' : null,
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/penggajian/thr') }}/${id}/reject`, { notes: res.value })
                        .done((resp) => { loadData(); if (selectedRequestId === id) loadDetails(id); Swal.fire('Success', resp.message || 'Direject', 'success'); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal reject', 'error'));
                });
            });

            $('#requestTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Hapus generate THR ini?',
                    text: 'Data detail THR pada pengajuan ini juga akan terhapus.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/penggajian/thr') }}/${id}`,
                        type: 'DELETE',
                    }).done((resp) => {
                        if (selectedRequestId === id) {
                            selectedRequestId = null;
                            detailRows = [];
                            detailTable.clear().draw();
                            $('#detailTitle').text('Pilih pengajuan terlebih dahulu.');
                        }
                        loadData();
                        Swal.fire('Success', resp.message || 'Generate THR dihapus', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal hapus generate THR', 'error'));
                });
            });

            $('#detailTable').on('click', '.btn-pay', function () {
                const id = Number($(this).data('id'));
                const row = detailRows.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#payDetailId').val(row.id);
                $('#payEmployee').val(`${row.employee_code || '-'} - ${row.employee_name || '-'}`);
                $('#payDate').val(new Date().toISOString().slice(0, 10));
                $('#payAmount').val(Number(row.outstanding_nominal || 0).toFixed(2));
                $('#paymentMethod').val('Transfer');
                $('#referenceNo').val('');
                $('#payNotes').val('');
                payModal.show();
            });

            $('#payForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    detail_id: $('#payDetailId').val(),
                    pay_date: $('#payDate').val(),
                    amount: $('#payAmount').val(),
                    payment_method: $('#paymentMethod').val(),
                    reference_no: $('#referenceNo').val(),
                    notes: $('#payNotes').val(),
                };
                $.post('{{ route('penggajian.thr.pay_detail') }}', payload)
                    .done((resp) => {
                        payModal.hide();
                        if (selectedRequestId) loadDetails(selectedRequestId);
                        loadData();
                        Swal.fire('Success', resp.message || 'Pembayaran tersimpan', 'success');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan pembayaran', 'error'));
            });

            $('#btnReportYear').on('click', function () {
                const year = Number($('#year').val() || 0);
                if (!year) {
                    Swal.fire('Warning', 'Isi tahun THR terlebih dahulu.', 'warning');
                    return;
                }
                const params = new URLSearchParams({ year: String(year) });
                window.open(`{{ route('penggajian.thr.report_year') }}?${params.toString()}`, '_blank');
            });

            $.when(loadRefs()).always(loadData);
        });
    </script>
@endpush