@extends('layouts.app')

@section('title', 'Profile Update Approvals')

@section('content')
<div class="container-fluid">
    <div class="card card-outline card-warning shadow-sm">
        <div class="card-header">
            <h3 class="card-title font-weight-bold"><i class="fas fa-user-edit mr-2 text-warning"></i>Pending Profile Modifications</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-bordered table-striped w-100 mb-0" id="profileApprovalsTable">
                    <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Requested Changes</th>
                        <th>Date</th>
                        <th style="width: 150px;">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    var table = $('#profileApprovalsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('approvals.profile.data') }}",
        columns: [
            {data: 'employee_name', name: 'employee.name'},
            {data: 'changes_view', name: 'changes', orderable: false, searchable: false},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

    $('body').on('click', '.approve-profile', function() {
        var id = $(this).data('id');
        var url = "{{ url('/') }}/approvals/profile/" + id + "/approve";
        
        $.post(url, { _token: "{{ csrf_token() }}" }, function() {
            table.draw();
            Swal.fire({ icon: 'success', title: 'Approved', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
        }).fail(function(xhr) {
            console.log(xhr.responseText);
            Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to approve request.', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
        });
    });

    $('body').on('click', '.reject-profile', function() {
        var id = $(this).data('id');
        var url = "{{ url('/') }}/approvals/profile/" + id + "/reject";

        Swal.fire({
            title: 'Reject Request',
            input: 'text',
            inputPlaceholder: 'Enter reason for rejection',
            showCancelButton: true,
            confirmButtonText: 'Reject',
            confirmButtonColor: '#d33'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post(url, { _token: "{{ csrf_token() }}", reason: result.value }, function() {
                    table.draw();
                    Swal.fire({ icon: 'info', title: 'Rejected', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
                }).fail(function(xhr) {
                    console.log(xhr.responseText);
                   Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to reject request.', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
                });
            }
        });
    });
});
</script>
@endpush