@extends('layouts.app')

@section('content')
<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
   <main>
        <div class="pt-6 px-4">
            <breadcrumb :items="[{'title' : 'Kelulusan Serahan', 'icon' : 'fas fa-stamp','url' : {{ json_encode(route('transaction.online.home')) }}}]"></breadcrumb>
      
            @if (session('success'))
            <div id="successMessage" class="bg-green-500 text-white p-3 rounded-lg mb-4 flex justify-between items-center">
                <span>{{ session('success') }}</span>
                <button onclick="document.getElementById('successMessage').remove()" class="text-white ml-2">&times;</button>
            </div>
            @endif
            @if (session('error'))
                <div id="errorMessage" class="bg-red-500 text-white p-3 rounded-lg mb-4 flex justify-between items-center">
                    <span>{{ session('error') }}</span>
                    <button onclick="document.getElementById('errorMessage').remove()" class="text-white ml-2">&times;</button>
                </div>
            @endif

            <a href="{{route('autoserahan.rekod')}}" class="mb-4 float-right bg-blue-500 text-center rounded p-2 text-white">Rekod Serahan</a>

            <div id="tableContainer">
                @include('components.list-table', ['list' => $list, 'record' => false])
            </div>

          <!-- Pagination Controls -->
          <div class="mt-4 flex justify-right">
              {{ $list->links() }}
          </div>
        </div>
   </main>



   @include('layouts.footer')

</div>
@push('additional_scripts')
<script>
    notifyOperasi();
    var audiokhazanah = new Audio("{{ asset('sound/notification.mp3') }}");
    audiokhazanah.muted = true;

    function refreshTable() {
        let fullUrl = window.location.href;
        let queryString = window.location.search;
        let params = new URLSearchParams(window.location.search);
        let currentPage = params.get('page') ?? 1;

        $.ajax({
            url: "{{ route('autoserahan.get') }}",
            type: 'GET',
            dataType: 'json',
            data:{
                'page' : currentPage
            },
            success: function(response) {
                updateTable(response.data);
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    }

    function updateTable(data) {
    let tableBody = $('#tableContainer tbody');
    tableBody.empty();

    if (data.length === 0) {
        tableBody.append('<tr><td colspan="8" class="text-center bg-white py-5 text-gray-500 text-sm font-semibold">Tiada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        let actionBadge = '';

        if (item.action === 'create') {
            actionBadge = '<span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-800 ring-1 ring-green-600/20 ring-inset">Create</span>';
        } else if (item.action === 'delete') {
            actionBadge = '<span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-800 ring-1 ring-red-600/20 ring-inset">Delete</span>';
        }

        let row = `
            <tr>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.id}</td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.cawangan_name}</td>
                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.tarikh}</td>
                                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.masa}</td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${actionBadge}</td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.pc_name}</td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${parseFloat(item.amount).toFixed(2)}</td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
                    <a href="${item.approve_url}" onclick="return confirmApproval(event, this)" class="cursor-pointer bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                        <i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus
                    </a>
                    <a href="${item.reject_url}" onclick="return confirmApproval(event, this)" class="cursor-pointer bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                        <i class="fas fa-thumbs-down mr-1 text-md"></i> Tolak
                    </a>
                </td>
            </tr>
            `;
            tableBody.append(row);
        });
    }

    function playtoast(){
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 5000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })

        Toast.fire({
            icon: 'info',
            title: 'Kelulusan Dipohon Sekarang!'
        })
    }

    function notifyOperasi(){

        var pusher = new Pusher("{{ env('PUSHER_APP_KEY') }}", {
            cluster: 'ap1',
            encrypted: true
        });
    
        var channel = pusher.subscribe('autoserahan-notice');
        channel.bind('autoserahan-event', function(data) {

            if(data.pengesahan === 'Operasi'){
                refreshTable();
                playtoast();
                audiokhazanah.play();
                audiokhazanah.muted = false;
            }
        });
    }

    async function requestPasswordAndSend(element) {
        const {
            value: katalaluan
        } = await Swal.fire({
            title: 'Masukkan Katalaluan Semula',
            input: 'password',
            inputPlaceholder: 'Katalaluan',
            confirmButtonText: 'Hantar',
            showCancelButton: true,
            cancelButtonText: 'Batal',
            allowOutsideClick: false
        });
        boolkatalaluan = 0;
        if (katalaluan) { 
            $.ajax({
                url: '/mintasemulakelulusan',
                type: 'GET',
                data: { passsemula: katalaluan },
                success: function(response) {
                    boolkatalaluan = response;
                    if (boolkatalaluan == 1) {
                        Swal.fire({
                            title: 'Success',
                            text: 'Katalaluan Sah',
                            icon: 'success',
                            confirmButtonText: 'OK',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = element.href;
                            }
                        });
                    } else {
                        Swal.fire('Error', 'Katalaluan Tidak Sah', 'error');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    Swal.fire('Error', 'Something went wrong!', 'error');
                }
            });
        }else{
            return false;
        }

    }

    function confirmApproval(event, element) {
        event.preventDefault();
    
        requestPasswordAndSend(element);
    }
</script>
@endpush
@endsection