@extends('layouts.adminlte')

@section('title', 'APPROVAL REQUEST')
@section('page_title', 'APPROVAL REQUEST')

@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">
        <h3 class="card-title m-0">Pending Update Profil</h3>
        <a href="{{ route('master_approval.index') }}" class="btn btn-outline-secondary btn-sm">Flow Approval</a>
    </div>
    <div class="card-body">
        <table id="requestTable" class="table table-striped table-hover w-100">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Request</th>
                    <th>Karyawan</th>
                    <th>Perubahan</th>
                    <th>Step</th>
                    <th>Submit</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </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 csrf = @json(csrf_token());
    const table = $('#requestTable').DataTable({
        ajax: @json(route('master_approval.requests.data')),
        columns: [
            {data: null, render: (d,t,r,m) => m.row + 1, orderable: false, searchable: false},
            {data: 'request_no'},
            {data: null, render: r => `${r.employee_code || '-'}<br><small>${r.employee_name || '-'}</small>`},
            {data: 'detail', orderable: false},
            {data: 'step'},
            {data: 'submitted_at'},
            {data: null, orderable: false, searchable: false, render: r => `
                <button class="btn btn-xs btn-success btn-approve" data-id="${r.action_id || r.id}">Approve</button>
                <button class="btn btn-xs btn-danger btn-reject" data-id="${r.action_id || r.id}">Reject</button>
            `},
        ],
    });

    async function postAction(id, action) {
        const isReject = action === 'reject';
        const result = await Swal.fire({
            title: isReject ? 'Reject Approval?' : 'Approve Approval?',
            input: 'textarea',
            inputLabel: isReject ? 'Catatan reject' : 'Catatan approve',
            inputPlaceholder: isReject ? 'Tulis alasan reject...' : 'Catatan opsional...',
            inputAttributes: { maxlength: 1000 },
            icon: isReject ? 'warning' : 'question',
            showCancelButton: true,
            confirmButtonText: isReject ? 'Ya, Reject' : 'Ya, Approve',
            cancelButtonText: 'Batal',
            confirmButtonColor: isReject ? '#dc3545' : '#198754',
        });
        if (!result.isConfirmed) return;

        $.ajax({
            url: `{{ url('/master-approval/requests') }}/${id}/${action}`,
            type: 'POST',
            data: {_token: csrf, notes: result.value || ''},
        }).done(resp => {
            Swal.fire('Berhasil', resp.message || 'Approval diproses', 'success');
            table.ajax.reload(null, false);
        }).fail(xhr => {
            Swal.fire('Error', xhr.responseJSON?.message || 'Gagal proses approval', 'error');
        });
    }

    $('#requestTable').on('click', '.btn-approve', function () {
        postAction($(this).data('id'), 'approve');
    });
    $('#requestTable').on('click', '.btn-reject', function () {
        postAction($(this).data('id'), 'reject');
    });
});
</script>
@endpush