@extends('layouts.adminlte')

@section('title', 'PAYOUT BONUS SPL')
@section('page_title', 'PAYOUT BONUS SPL TERPISAH')

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

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <h3 class="card-title m-0">Payout Bonus SPL Terpisah</h3>
            <div class="small text-muted mt-1">Halaman ini khusus untuk pencairan bonus SPL special yang dibayar terpisah dari payroll reguler.</div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ url('/surat-perintah-lembur') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left me-1"></i>Kembali ke SPL
            </a>
            <a href="{{ route('surat_perintah_lembur.separate_payout_export') }}" class="btn btn-outline-success btn-sm" id="btnExportSeparatePayout">
                <i class="fas fa-file-excel me-1"></i>Export XLSX
            </a>
            <button class="btn btn-outline-secondary btn-sm" id="btnRefreshSeparatePayout" type="button">Refresh</button>
        </div>
    </div>
    <div class="card-body">
        <div class="row g-2 mb-3">
            <div class="col-md-6">
                <label class="form-label">Profil Bulan Cair</label>
                <select class="form-select" id="separateReleaseProfilFilter">
                    <option value="">- Semua Profil Cair -</option>
                </select>
                <div class="d-flex align-items-center gap-2 mt-2">
                    <button class="btn btn-outline-primary btn-sm" id="btnUseCurrentSeparateRelease" type="button">Pakai Profil Cair Aktif</button>
                    <span class="badge bg-light text-dark border" id="separateCurrentProfilBadge">Profil aktif: -</span>
                </div>
            </div>
            <div class="col-md-3">
                <label class="form-label">Status Bayar</label>
                <select class="form-select" id="separatePayoutStatusFilter">
                    <option value="">- Semua Status -</option>
                    <option value="pending">Pending</option>
                    <option value="paid">Paid</option>
                </select>
            </div>
        </div>

        <table id="splSeparatePayoutTable" class="table table-striped table-hover w-100">
            <thead>
                <tr>
                    <th>No SPL</th>
                    <th>Tanggal</th>
                    <th>Karyawan</th>
                    <th>Jenis SPL</th>
                    <th>Bonus Jam</th>
                    <th>Bonus HK</th>
                    <th>Estimasi Nominal</th>
                    <th>Profil Cair</th>
                    <th>Status Bayar</th>
                    <th>Catatan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('vendor/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
$(function(){
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

    let refs = { profilBulans: [], currentProfilBulanId: null, currentProfilBulanLabel: null };

    function separateStatusBadge(s){
        const map = { pending: 'warning text-dark', paid: 'success' };
        const cls = map[s] || 'secondary';
        return `<span class="badge text-bg-${cls}">${s || '-'}</span>`;
    }

    const table = $('#splSeparatePayoutTable').DataTable({
        data: [],
        columns: [
            {data:'document_no'},
            {data:'work_date'},
            {data:null, render:r=>`${r.employee_code||'-'} - ${r.employee_name||'-'}`},
            {data:'overtime_type_label'},
            {data:'bonus_hours', render:v=>Number(v||0).toFixed(2)},
            {data:'bonus_hk', render:v=>Number(v||0)},
            {data:null, render:(d,t,r)=>`<div class="fw-semibold">Rp ${Number(r.estimated_nominal||0).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})}</div><div class="small text-muted">${r.estimate_label || 'Estimasi bonus'}</div>`},
            {data:'release_profil_bulan_label', render:v=>v || '<span class="text-muted">Belum dijadwalkan</span>'},
            {data:'status', render:v=>separateStatusBadge(v)},
            {data:'payment_notes', render:(v,t,r)=>v || r.notes || '<span class="text-muted">-</span>'},
            {data:null, orderable:false, render:(d,t,r)=>{
                if (String(r.status || '') === 'paid') {
                    return `<div class="d-flex flex-column gap-1"><span class="text-success small">Paid ${r.paid_at || ''}</span><button class="btn btn-xs btn-outline-warning btn-undo-paid-separate" data-id="${r.id}">Undo Paid</button></div>`;
                }
                return `<button class="btn btn-xs btn-outline-success btn-mark-paid-separate" data-id="${r.id}">Mark Paid</button>`;
            }}
        ]
    });

    function refreshExportHref(){
        const url = new URL(`{{ route('surat_perintah_lembur.separate_payout_export') }}`, window.location.origin);
        const releaseProfil = $('#separateReleaseProfilFilter').val() || '';
        const status = $('#separatePayoutStatusFilter').val() || '';
        if (releaseProfil) url.searchParams.set('release_profil_bulan_id', releaseProfil);
        if (status) url.searchParams.set('status', status);
        $('#btnExportSeparatePayout').attr('href', url.toString());
    }

    function loadRefs(){
        return $.getJSON('{{ route('surat_perintah_lembur.refs') }}').done(resp => {
            refs = resp.data || resp || refs;
            $('#separateReleaseProfilFilter').html(['<option value="">- Semua Profil Cair -</option>'].concat((refs.profilBulans||[]).map(x=>`<option value="${x.id}">${x.code} - ${x.name}</option>`)).join(''));
            $('#separateCurrentProfilBadge').text(`Profil aktif: ${refs.currentProfilBulanLabel || '-'}`);
            if (refs.currentProfilBulanId) $('#separateReleaseProfilFilter').val(String(refs.currentProfilBulanId));
            $('#separatePayoutStatusFilter').val('pending');
            refreshExportHref();
        });
    }

    function loadData(){
        const params = {
            release_profil_bulan_id: $('#separateReleaseProfilFilter').val() || '',
            status: $('#separatePayoutStatusFilter').val() || ''
        };
        return $.getJSON('{{ route('surat_perintah_lembur.separate_payout_data') }}', params).done(resp => {
            table.clear().rows.add(resp.data || []).draw();
        });
    }

    $('#btnRefreshSeparatePayout').on('click', function(){
        refreshExportHref();
        loadData();
    });

    $('#btnUseCurrentSeparateRelease').on('click', function(){
        if (refs.currentProfilBulanId) {
            $('#separateReleaseProfilFilter').val(String(refs.currentProfilBulanId)).trigger('change');
        } else {
            Swal.fire('Info', 'Profil bulan aktif saat ini belum ditemukan.', 'info');
        }
    });

    $('#separateReleaseProfilFilter, #separatePayoutStatusFilter').on('change', function(){
        refreshExportHref();
        loadData();
    });

    $('#splSeparatePayoutTable').on('click', '.btn-mark-paid-separate', function(){
        const id = Number($(this).data('id'));
        Swal.fire({
            title: 'Tandai sudah dibayar?',
            input: 'text',
            inputPlaceholder: 'Catatan pembayaran (opsional)',
            showCancelButton: true,
            confirmButtonText: 'Mark Paid'
        }).then(res => {
            if (!res.isConfirmed) return;
            $.post(`{{ url('/surat-perintah-lembur') }}/${id}/mark-paid-separate`, {notes: res.value || ''})
                .done(resp => {
                    loadData();
                    Swal.fire('Success', resp.message || 'Updated', 'success');
                })
                .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error'));
        });
    });

    $('#splSeparatePayoutTable').on('click', '.btn-undo-paid-separate', function(){
        const id = Number($(this).data('id'));
        Swal.fire({
            title: 'Kembalikan ke pending?',
            text: 'Gunakan ini jika pembayaran separate perlu dikoreksi.',
            input: 'text',
            inputPlaceholder: 'Catatan undo (opsional)',
            showCancelButton: true,
            confirmButtonText: 'Undo Paid'
        }).then(res => {
            if (!res.isConfirmed) return;
            $.post(`{{ url('/surat-perintah-lembur') }}/${id}/undo-paid-separate`, {notes: res.value || ''})
                .done(resp => {
                    loadData();
                    Swal.fire('Success', resp.message || 'Updated', 'success');
                })
                .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error'));
        });
    });

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