@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;
        }

        .image-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }

        .image-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .image-item img {
            max-width: 100%;
            height: auto;
        }
    </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>
                                @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 ($images)
                <div class="card">
                    <div class="card-body">
                        <p><b>Attachments ({{ count($images) }})</b></p>
                        <div class="image-container">
                            @foreach ($images as $image)
                                <div class="image-item">
                                    <img class="" src="data:image/jpeg;base64,{{ $image['base64'] }}" alt="">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            @if ($transactionDetails[0]->sh_approved === 'Pending')
                <div class="card">
                    <div class="card-body">
                        <div class="d-block">
                            <button class="btn btn-success border mr-2  pl-4 pr-4 pt-3 pb-3" id="approvedBtn">
                                <div class="d-flex align-items-center">
                                    <ion-icon class="mr-2" name="checkmark-outline"></ion-icon>
                                    <span>Approve</span>
                                </div>
                            </button>

                            <button class="btn btn-light border mr-2  pl-4 pr-4 pt-3 pb-3" id="declinedBtn">
                                <div class="d-flex align-items-center">
                                    <span>Decline</span>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @else
        <div class="container">
            <div class="card mt-5">
                <div class="card-body">
                    @include('errors.notfound')
                </div>
            </div>
        </div>
    @endif

    <!-- Modal -->
    <div class="modal fade" id="showImage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <img class="img-fluid" src="" alt="">
        </div>
    </div>
@endsection

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

        const csslipsView = {
            init: function() {
                csslipsView.events();
                csslipsView.getTransactionDetails();
                csslipsView.getURLParams();
            },
            events: function() {
                $(document).ready(function() {
                    $(".image-item img").on('click', function() {
                        var base64 = $(this).attr('src');
                        csslipsView.openImageInNewTab(base64);
                    });

                    $("#approvedBtn").on('click', function() {
                        csslipsView.submitForm(1);
                    });

                    $("#declinedBtn").on('click', function() {
                        csslipsView.submitForm(0);
                    });

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

                // Generate Table
                transactionDetailsTable = $('#transaction_details').DataTable({
                    ajax: `/sh/cs-slips/get-transaction-details?transaction_no=${csslipsView.getURLParams()}`,
                    dom: 't',
                    columns: [{
                            data: 'id',
                            name: 'id',
                            width: '10px',
                            visible: false,
                        },
                        {
                            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) {
                                return `<div class="d-block text-center">${data}</div>`;
                            },
                        },
                    ],
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                    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;
            },
            openImageInNewTab: function(base64) {
                $("#showImage img").attr('src', base64)
                $("#showImage").modal('toggle')
            },
            submitForm: function(status) {
                let formData = new FormData();
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                formData.append('invoice_ref', $("#transNum").val());
                formData.append('is_approved', status);

                $.ajax({
                        url: '/sh/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) {
                        window.location.href = "/sh/cs-slips"
                    })
                    .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)
                    })
            }
        }

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