@extends('layouts.shared.login')

@section('title', 'SSI')

@section('contents')
    @if (($headers) && ($details))
        <section class="vh-100">
            <div class="container-fluid h-custom">
                <div class="row d-flex justify-content-center align-items-center h-100">
                    <div class="col-lg-12" style="max-width: 550px">
                        <div class="card mt-5">
                            <div class="card-header">
                                <div class="text-center">
                                    <img class="img-fluid" src="{{ asset('/assets/images/full-logo.png') }}" alt=""
                                        style="max-width: 300px">
                                </div>
                            </div>
                            <div class="card-body">

                                {{-- This is the Header of the Receipt --}}
                                <span class="d-block"><b>Invoice</b>: {{ $headers->invoice_ref }}</span>
                                <span class="d-block"><b>Name</b>: {{ $headers->firstname }} {{ $headers->lastname }}</span>
                                <span class="d-block"><b>Location</b>: {{ $headers->description }}</span>
                                <span class="d-block"><b>Date</b>: {{ $headers->created_at }}</span>
                                <span class="d-block"><b>Transaction</b>: {{ $headers->transaction_type }}</span>

                                {{-- This is the line items --}}
                                <div class="mt-4">
                                    <b>Line Item/s</b>
                                    @foreach ($details as $detail)
                                        <div class="row">
                                            <div class="col-1">
                                                {{ $detail->qty }} x
                                            </div>
                                            <div class="col-11">
                                                {{ $detail->description }}
                                            </div>
                                        </div>
                                    @endforeach

                                    <hr>
                                </div>
                            </div>
                            <div class="card-footer p-4">
                                <button type="button" class="btn btn-success border  pl-4 pr-4 pt-3 pb-3" id="approvedBtn">
                                    Confirm Transaction
                                </button>
                                <button type="button" class="btn btn-light border  pl-4 pr-4 pt-3 pb-3" id="cancelBtn">
                                    Decline
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection

@section('scripts')
    <script>
        const csApproval = {
            init: function() {
                csApproval.events();
            },
            events: function() {
                $('#approvedBtn').on('click', function(event) {
                    // 1 Stands for Approved Transaction
                    csApproval.approvedOrCancel(1)
                });

                $('#cancelBtn').on('click', function(event) {
                    // 3 Stands for Cancel Transaction
                    csApproval.approvedOrCancel(3)
                });
            },
            approvedOrCancel: function(statusId) {
                let currentURL = window.location.href;
                let urlObj = new URL(currentURL);
                let transactionNo = urlObj.searchParams.get('tx');

                $.ajax({
                        url: `/cs/post-approval-action?status_id=${statusId}&transaction_no=${transactionNo}`,
                        method: 'GET',
                        processData: false, // Ensure jQuery doesn't process the data
                        contentType: false, // Ensure jQuery doesn't set the content type
                    })
                    .then(function(response) {
                        window.location.href = `/cs/transaction-confirmed/${transactionNo}`;
                    })
                    .fail(function(xhr, status, error) {
                        let response = JSON.parse(xhr.responseText);
                    })
            }
        }

        csApproval.init();
    </script>
@endsection