@extends('layouts.cs.main')

@section('csslips', 'active')

@section('main-content')
    <style>
        table {
            border-collapse: separate;
            border-spacing: 0 5px;
        }

        table.dataTable tbody tr {
            border-radius: 10px;
        }
    </style>

    @if (isset($transactionDetails[0]))
        <input type="text" id="transNum" value="{{ $transactionDetails[0]->trans_number }}" hidden>
        <input type="text" id="transId" value="{{ $transactionDetails[0]->trans_id }}" hidden>

        <div class="container-fluid p-3 mt-3">
            {{-- <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="d-block font-weight-bold">Invoice Details</p>
                            <span class="d-block">CS Number: {{ $transactionDetails[0]->trans_number }}</span>
                            <span class="d-block">Transaction: {{ $transactionDetails[0]->trans_type }}</span>
                            <span class="">Date: {{ $transactionDetails[0]->date_created }}</span>
                        </div>
                        <div class="col-md-6">
                            <p class="d-block font-weight-bold">CS Party Details</p>
                            <span class="d-block">{{ $transactionDetails[0]->member_fname }}
                                {{ $transactionDetails[0]->member_mname }} {{ $transactionDetails[0]->member_lname }}</span>
                            <span class="d-block">{{ $transactionDetails[0]->member_type }}</span>
                        </div>
                    </div>
                </div>
            </div> --}}
            <div class="row">
                <div class="col-lg-4">
                    <div class="card bg-success" style="height: 100%;">
                        <div class="card-body">
                            <p class="d-block font-weight-bold">Invoice Details</p>
                            <span class="d-block">CS Number: {{ $transactionDetails[0]->trans_number }}</span>
                            <span class="d-block">Transaction: {{ $transactionDetails[0]->trans_type }}</span>
                            <span class="">Date: {{ $transactionDetails[0]->date_created }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card" style="height: 100%;">
                        <div class="card-body">
                            <p class="d-block font-weight-bold">CS Party Details</p>
                            <span class="d-block">
                                CS Party:
                                {{ $transactionDetails[0]->member_fname }}
                                {{ $transactionDetails[0]->member_mname }}
                                {{ $transactionDetails[0]->member_lname }}
                            </span>
                            <span class="d-block">
                                Membership:
                                {{ $transactionDetails[0]->member_type }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card" style="height: 100%;">
                        <div class="card-body">
                            <p class="d-block font-weight-bold">Transaction Status</p>
                            @switch($transactionDetails[0]->sh_approved)
                                @case('Auto-Approved')
                                    <span class="d-block">Status: {{ $transactionDetails[0]->sh_approved }}</span>
                                @break

                                @case('Approved')
                                    <span class="d-block">
                                        CS Party:
                                        {{ $transactionDetails[0]->member_fname }}
                                        {{ $transactionDetails[0]->member_mname }}
                                        {{ $transactionDetails[0]->member_lname }}
                                    </span>
                                    <span class="d-block">Status: {{ $transactionDetails[0]->sh_approved }}</span>
                                    <span class="d-block">Timestamp: {{ $transactionDetails[0]->sh_approved_date }}</span>
                                @break

                                @case('Declined')
                                    <span class="d-block">
                                        CS Party:
                                        {{ $transactionDetails[0]->member_fname }}
                                        {{ $transactionDetails[0]->member_mname }}
                                        {{ $transactionDetails[0]->member_lname }}
                                    </span>
                                    <span class="d-block">Status: {{ $transactionDetails[0]->sh_approved }}</span>
                                    <span class="d-block">Timestamp: {{ $transactionDetails[0]->sh_approved_date }}</span>
                                @break

                                @case('Pending')
                                    <span class="d-block">Status: {{ $transactionDetails[0]->sh_approved }}</span>
                                @break
                            @endswitch
                            <span class="d-block font-weight-bold text-danger mt-2 d-flex align-items-center"
                                id="printInvoice" data-id="{{ $transactionDetails[0]->trans_number }}">
                                <ion-icon class="mr-2" name="document-outline"></ion-icon>
                                Print Invoice
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table text-nowrap table-borderless mt-3" id="transaction_details" style="width: 100%">
                <thead class="table-borderless text-sm text-muted">
                    <tr>
                        <th></th>
                        <th scope="col">Description</th>
                        <th class="text-center" scope="col">Amount</th>
                        <th class="text-center" scope="col">Qty</th>
                        <th class="text-center" scope="col">Total Amount</th>
                        <th class="text-center" scope="col">Action Qty</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            @if (
                ($transactionDetails[0]->sh_approved === 'Auto-Approved' or 'Approved') &&
                    $transactionDetails[0]->cs_approved === 'Approved')
                <div id="transactionButtons" hidden>
                    @switch($transactionDetails[0]->trans_id)
                        {{-- CS-SOLD --}}
                        @case(1)
                            <div class="card">
                                <div class="card-body">
                                    <button class="btn btn-light border mr-2  pl-4 pr-4 pt-3 pb-3 transactionHandle"
                                        data-trans_id="5">
                                        <div class="d-flex align-items-center">
                                            <ion-icon class="mr-2" name="return-down-back-outline"></ion-icon>
                                            <span>CS-Return</span>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        @break

                        {{-- CS-BORROWED --}}
                        @case(2)
                            <div class="card">
                                <div class="card-body">
                                    <button class="btn btn-success mr-2  pl-4 pr-4 pt-3 pb-3 transactionHandle" data-trans_id="3">
                                        <div class="d-flex align-items-center">
                                            <ion-icon class="mr-2" name="wallet-outline"></ion-icon>
                                            <span>CS-Sold</span>
                                        </div>
                                    </button>
                                    <button class="btn btn-light border mr-2  pl-4 pr-4 pt-3 pb-3 transactionHandle"
                                        data-trans_id="4">
                                        <div class="d-flex align-items-center">
                                            <ion-icon class="mr-2" name="return-down-back-outline"></ion-icon>
                                            <span>CS-Return</span>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        @break

                        {{-- CS-SOLD FROM BORROWED --}}
                        @case(3)
                            <div class="card">
                                <div class="card-body">
                                    <button class="btn btn-light border mr-2  pl-4 pr-4 pt-3 pb-3 transactionHandle"
                                        data-trans_id="6">
                                        <div class="d-flex align-items-center">
                                            <ion-icon class="mr-2" name="return-down-back-outline"></ion-icon>
                                            <span>CS-Return</span>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        @break

                        {{-- There will be no transaction here as it is the end of every transaction --}}
                        {{-- CS-RETURN FROM BORROWED --}}
                        @case(4)
                            {{-- CS-RETURN FROM SOLD --}}
                        @case(5)
                            {{-- CS RETURN FROM (CS-SOLD FROM BORROWED) --}}
                        @case(6)

                            @default
                        @endswitch
                    </div>
            </div>
        @else
            <div class="card">
                <div class="card-body d-flex align-items-center">
                    <ion-icon name="alert-circle-outline" class="text-warning mr-2"></ion-icon>
                    <b>Attention</b>: This invoice is currently pending approval. Please await confirmation from the appropriate
                    authority before proceeding with further actions
                </div>
            </div>
        @endif
    @else
        {{-- If Invoice Number is not found. --}}

        <div class="container">
            <div class="card mt-5">
                <div class="card-body">
                    @include('errors.notfound')
                </div>
            </div>
        </div>
        @endif

    @endsection

    @section('scripts')
        <script>
            let transactionDetailsTable;
            let isSubmit = 0;
            let totalAvailableQty = 0;

            const csslipsView = {
                init: function() {
                    csslipsView.events();
                    csslipsView.getTransactionDetails();
                    csslipsView.getURLParams();
                },
                events: function() {
                    $('.transactionHandle').on('click', function() {
                        $(this).attr('disabled', true)

                        let checkedCheckboxes = $('input[type="checkbox"]:checked');
                        let valuesArray = [];
                        let errorIds = [];

                        checkedCheckboxes.each(function() {
                            // Remove the Invalid Class to Refresh the Error View
                            $(`#qty_${$(this).val()}`).removeClass('is-invalid');

                            // This is the Max Amount of QTY per each Item
                            let rowLimit = parseInt($(this).attr('data-qty_limit'), 10);
                            // This is the transacted amount
                            let rowValue = parseInt($(`#qty_${$(this).val()}`).val(), 10);

                            // The is allowed will track if the input is valid to prevent the over qty or zero qty
                            valuesArray.push({
                                'item_key': $(this).val(),
                                'qty': rowValue,
                                'is_allowed': rowLimit >= rowValue && rowValue >= 0
                            });
                        });

                        // Get Items with Error
                        let falseItems = valuesArray
                            .filter(item => item.is_allowed === false)
                            .map(item => item.item_key);

                        // Check the input (Checkbox and Inputs)
                        if (falseItems.length > 0 || valuesArray.length === 0) {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: "Please check your input.",
                            });

                            $.each(falseItems, function(index, item) {
                                $(`#qty_${item}`).addClass('is-invalid')
                            });

                            $(".transactionHandle").attr('disabled', false)
                        } else {
                            let formData = new FormData();
                            formData.append('dataArray', JSON.stringify(valuesArray));
                            formData.append('transId', $(this).attr('data-trans_id'));
                            formData.append('transNum', $("#transNum").val());
                            formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                            csslipsView.submiTransaction(formData);
                        }
                    });

                    $("#printInvoice").on('click', function() {
                        let invoiceNo = $(this).attr('data-id');
                        window.location.href = `/cs/cs-slips/pdf?transaction_no=${invoiceNo}`
                    });
                },
                getTransactionDetails: function(filter = "") {
                    if (transactionDetailsTable) {
                        // Destroy Table if Existed
                        transactionDetailsTable.destroy();
                    }

                    // Generate Table
                    transactionDetailsTable = $('#transaction_details').DataTable({
                        ajax: `/cs/cs-slips/get-transaction-details?transaction_no=${csslipsView.getURLParams()}`,
                        dom: 't',
                        columns: [{
                                data: 'id',
                                name: 'id',
                                width: '10px',
                                render: function(data, type, row) {
                                    let checkbox = `<div class="form-group form-check ml-3">
                                                    <input type="checkbox" class="form-check-input" name="transaction_detail_id" value="${row.id}" data-qty_limit="${row.qty_mirror}">
                                                </div>`

                                    if (row.qty_mirror === 0 || [4, 5, 6].includes(parseInt($(
                                            '#transId').val()))) {
                                        checkbox = "";
                                    }

                                    return checkbox;
                                },
                            }, {
                                data: 'product_desc',
                                name: 'product_desc',
                                render: function(data, type, row) {
                                    return `<span class="d-block">${row.product_desc}</span>
                                <small class="text-muted">${row.sku}</small>`;
                                },
                            },
                            {
                                data: 'price',
                                name: 'price',
                                render: function(data, type, row) {
                                    return `<div class="d-block text-center">${data}</div>`;
                                },
                            },
                            {
                                data: 'qty',
                                name: 'qty',
                                render: function(data, type, row) {
                                    if (row.qty !== row.qty_mirror) {
                                        return `<div class="d-block text-center"><del>${data}</del> <span>${row.qty_mirror} <small>Remaining</small></span></div>`;
                                    } else {
                                        return `<div class="d-block text-center">${data}</div>`;
                                    }
                                },
                            },
                            {
                                data: '',
                                name: '',
                                render: function(data, type, row) {
                                    return `<div class="d-block text-center">${row.qty_mirror * row.price}</div>`;
                                },
                            },
                            {
                                data: 'qty',
                                name: 'qty',
                                width: '10%',
                                render: function(data, type, row) {
                                    // Description: This code block analyze the qty that if the data is 0 or the transaction belongs to 4,5,6 then the input is disabled.
                                    disabled = "";
                                    if (row.qty_mirror === 0 || [4, 5, 6].includes(parseInt($(
                                            '#transId').val()))) {
                                        disabled = "disabled";
                                    }

                                    totalAvailableQty += row.qty_mirror;
                                    console.log(row.qty_mirror)

                                    return `<input type="number" class="form-control text-center" id="qty_${row.id}" value="${row.qty_mirror}" ${disabled}/>`;
                                    // End of Comment
                                },
                            },
                        ],
                        initComplete: function(settings, json) {
                            $(".table").wrap(
                                "<div style='overflow:auto; width:100%;position:relative;'></div>");

                            // Call after Transaction and Hide the Actions if the QTY Mirror is = 0
                            csslipsView.showTransactionBtn();
                        },
                        rowCallback: function(row, data, index) {
                            $(row).css({
                                'background-color': '#FFFFFF', // Example color
                                'padding': '20px', // Example padding
                                'border-radius': '10px',
                                'box-shadow': '0 1px 4px rgba(0, 0, 0, 0.1)'
                            });
                        },
                        drawCallback: function(settings) {
                            // This is a reset function to reset the totalAvailableQty as it will duplicate the result.
                            totalAvailableQty = 0;
                            $('#transaction_headers tbody tr').not(':last').css('margin-bottom', '10px');
                        }
                    });
                },
                getURLParams: function() {
                    let currentURL = window.location.href;
                    let urlObj = new URL(currentURL);
                    let transactionNo = urlObj.searchParams.get('transaction_no');
                    return transactionNo;
                },
                submiTransaction: function(formData) {
                    $.ajax({
                            url: '/cs/cs-slips/post-transaction-details',
                            method: 'POST',
                            data: formData,
                            processData: false, // Ensure jQuery doesn't process the data
                            contentType: false, // Ensure jQuery doesn't set the content type
                        })
                        .then(function(response) {
                            $("#transaction_details").DataTable().ajax.reload();
                        })
                        .fail(function(xhr, status, error) {
                            let response = JSON.parse(xhr.responseText);

                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: response['message'],
                            });
                        })
                        .always(function() {
                            $(".transactionHandle").attr('disabled', false)
                        })
                },
                showTransactionBtn: function() {
                    if (totalAvailableQty === 0 || totalAvailableQty === '0') {
                        $("#transactionButtons").attr('hidden', true)
                    } else {
                        $("#transactionButtons").attr('hidden', false)
                    }
                }
            }

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