@extends('layout.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">
    <style>
        .dataTables_wrapper .dataTables_filter input {
            width: 350px;
            height: 30px;
            padding: 5px;
            font-size: 14px;
        }
        .qr-code-img {
            width: 50px;
            height: 50px;
        }
    </style>
    <div class="container">
        <div class="tab-content" id="myTabContent">
            <div class="row">
                <div class="col-12">
                    <div class=" my-2" style="border-radius: 0 10px 10px 10px">
                        <div class="container-fluid py-1 mx-0 px-0">
                            <div class="row mx-1 mb-3 me-2">
                                <div class="col-md-12 g-1 mx-0 px-1">
                                    <div class="container px-0 mx-1 ps-1">
                                        <div class="card">
                                            <div class="card-header p-0 position-relative">
                                                <div class="shadow-dark rounded-2" style="background-color: #0071bd; padding: 5px 5px 3px 5px">
                                                    <h5 class="text-white text-capitalize ps-3">Transfer Logs</h5>
                                                </div>
                                            </div>
                                            <div class="container-fluid pt-3">
                                                <table id="transfer_logs" class="table table-hover" width="auto">
                                                    <thead>
                                                        <tr>
                                                            <th>Firstname</th>
                                                            <th>Lastname</th>
                                                            <th>Status</th>
                                                            <th>Date Requested</th>
                                                            <th>Date Approved</th>
                                                            <th>Remarks</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#transfer_logs').DataTable({
                ajax: {
                    url: '/get-request',
                    dataSrc: ''
                },
                responsive: true,
                scrollX: true,
                columns: [
                    { data: 'first_name' },
                    { data: 'last_name' },
                    {
                        data: 'flag',
                        render: function(data, type, row) {
                            if (data == 0) {
                                return '<button class="btn btn-primary btn-sm approve-btn" data-id="' + row.id + '">Approve</button>';
                            } else if (data == 1) {
                                return '<span class="badge bg-success">Approved</span>';
                            }
                            return data;
                        }
                    },
                    {
                        data: 'created_at',
                        render: function(data) {
                            return new Date(data).toLocaleString('en-US', {
                                month: 'short',
                                day: 'numeric',
                                year: 'numeric',
                                hour: 'numeric',
                                minute: 'numeric',
                                hour12: true
                            });
                        }
                    },
                    {
                        data: 'updated_at',
                        render: function(data) {
                            return data ? new Date(data).toLocaleString('en-US', {
                                month: 'short',
                                day: 'numeric',
                                year: 'numeric',
                                hour: 'numeric',
                                minute: 'numeric',
                                hour12: true
                            }) : 'Not Approved Yet';
                        }
                    },
                    { data: 'remarks' }
                ]
            });

            // Handle approve button click
            $('#transfer_logs').on('click', '.approve-btn', function() {
                var id = $(this).data('id');
                var button = $(this);

                Swal.fire({
                    title: 'Are you sure?',
                    text: "Do you want to approve this transfer request?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, approve it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/approve-transfer/' + id,
                            type: 'POST',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                Swal.fire(
                                    'Approved!',
                                    'The transfer request has been approved.',
                                    'success'
                                );
                                $('#transfer_logs').DataTable().ajax.reload();
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    'Error!',
                                    xhr.responseJSON ? xhr.responseJSON.message : 'There was an error approving the request.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection