@extends('layouts.cs.transaction')

@section('home', 'active')

@section('left-lg-side')
    <input type="text" value="{{ $transactionRef }}" id="transactionRef" hidden>

    <div class="card w-100">
        <div class="card-body">
            <div class="form-row">
                <div class="col-9">
                    <input type="text" class="form-control search_products" placeholder="Search Product">
                </div>
                <div class="col-3">
                    <select class="custom-select search_modes" required>
                        <option value="findSimilar">FindSimilar</option>
                        <option value="findExact">FindExact</option>
                    </select>
                </div>
            </div>

            <table class="table table-sm table-hover product_table" id="" style="width: 100%;height: 100%">
                <thead class="table-borderless">
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('right-lg-side')
    <div class="card">
        <div class="card-header">
            <span class="font-weight-bold">Billed To:</span>
        </div>
        <div class="card-body d-flex">
            <div style="flex-grow: 1;">
                <div class="d-flex align-items-center">
                    <ion-icon class="mr-2" name="person-outline"></ion-icon>
                    <span>
                        {{ $memberDetails->firstname }}
                        {{ $memberDetails->middlename }}
                        {{ $memberDetails->lastname }}
                        <small class="text-muted">({{ $memberDetails->description }})</small>
                    </span>
                </div>

                <div class="d-flex align-items-center mt-3">
                    <ion-icon class="mr-2" name="location-outline"></ion-icon>
                    <span>
                        {{ ucwords(strtolower($defaultStore->description)), '' }}
                    </span>
                </div>
            </div>
            <img class="img-fluid" src="/assets/images/creditcard.gif" alt="" style="height: 150px;">
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <table class="table transaction_headers" id="transaction_headers_1" style="max-width: 100%">
                <thead class="table-borderless text-muted" style="font-size: 14px">
                    <tr>
                        <th></th>
                        <th scope="col">SKU</th>
                        <th scope="col">Description</th>
                        <th class="text-right" scope="col">Qty</th>
                        <th class="text-right" scope="col">Price</th>
                        <th class="text-right" scope="col">Total</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            @if ($memberDetails->canBorrow === 1)
                <div class="card bg-light p-3">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="transaction_type" id="soldButton"
                            value="1" checked>
                        <label class="form-check-label" for="soldButton">
                            Sold
                        </label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="transaction_type" id="borrowedButton"
                            value="2">
                        <label class="form-check-label" for="borrowedButton">
                            Borrowed
                        </label>
                    </div>
                </div>
            @else
                <div class="callout callout-danger d-flex align-items-center">
                    <ion-icon name="alert-circle-outline"></ion-icon>
                    <small class="ml-1">This user is not permitted to perform a borrow transaction.</small>
                </div>
            @endif

            <div class="d-flex mt-3">
                <button class="btn btn-success mr-2 pl-4 pr-4 pt-3 pb-3 pay_transaction">
                    <div class="d-flex align-items-center">
                        <ion-icon class="mr-2" name="wallet-outline"></ion-icon>
                        <span><span class="total_amount"></span></span>
                    </div>
                </button>

                <button class="btn btn-light pl-4 pr-4 pt-3 pb-3">
                    <div class="d-flex align-items-center">
                        <ion-icon class="mr-2" name="alert-circle-outline"></ion-icon>
                        <span>Cancel</span>
                    </div>
                </button>
            </div>

        </div>
    </div>
@endsection

{{-- @section('left-md-side')
    <div class="card w-100">
        <div class="card-body">
            <div class="form-row">
                <div class="col-9 mb-3">
                    <input type="text" class="form-control search_products" placeholder="Search Product">
                </div>
                <div class="col-3 mb-3">
                    <select class="custom-select search_modes" required>
                        <option value="findSimilar">FindSimilar</option>
                        <option value="findExact">FindExact</option>
                    </select>
                </div>
            </div>

            <table class="table table-sm table-hover product_table" id="" style="width: 100%;height: 100%">
                <thead class="table-borderless">
                    <tr>
                        <th></th>
                        <th></th>
                        <th>Name</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection --}}

{{-- @section('right-md-side')
    <div class="card">
        <div class="card-header">
            <span class="font-weight-bold">BILLED TO:</span>
        </div>
        <div class="card-body">
            <span class="d-block font-weight-bold">{{ $memberDetails->firstname, '' }} {{ $memberDetails->middlename, '' }} {{ $memberDetails->lastname, '' }}</span>
            <span class="d-block text-muted">{{ $memberDetails->description, '' }}</span>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <table class="table transaction_headers" style="max-width: 100%">
                <thead class="table-borderless text-muted" style="font-size: 14px">
                    <tr>
                        <td></td>
                        <td scope="col">SKU</td>
                        <td scope="col">Description</td>
                        <td class="text-right" scope="col">Qty</td>
                        <td class="text-right" scope="col">Price</td>
                        <td class="text-right" scope="col">Total</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            @if ($memberDetails->canBorrow === 1)
                <div class="container bg-light p-3 shadow-sm">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                        <label class="form-check-label" for="exampleRadios2">
                            Sold
                        </label>
                    </div>


                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3">
                        <label class="form-check-label" for="exampleRadios3">
                            Borrowed
                        </label>
                    </div>
                </div>
            @else
                <div class="callout callout-danger">
                    <small>This user is not permitted to perform a borrow transaction.</small>
                </div>
            @endif

            <button class="btn btn-success mt-3 d-flex align-items-center">
                <ion-icon class="mr-2" name="wallet-outline"></ion-icon>
                <span>Pay <span class="total_amount"></span></span>
            </button>
        </div>
    </div>
@endsection --}}

@section('modals')
    <div class="modal fade" id="invoice_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                {{-- <div class="modal-header">
                    <span class="d-block">
                        <span class="font-weight-bold">Invoice Summary</span><br>
                        <span>Billing Date: {{ now()->format('m/d/Y') }}</span>
                    </span>
                </div> --}}
                <div class="modal-body">
                    <div class="p-3">
                        <span class="d-block mb-4">
                            <span class="font-weight-bold">Invoice Summary</span><br>
                            <span>Billing Date: {{ now()->format('m/d/Y') }}</span>
                        </span>

                        <div>
                            <div class="card bg-light p-3">
                                <span class="">{{ $memberDetails->firstname }} {{ $memberDetails->middlename }}
                                    {{ $memberDetails->lastname }}</span>
                                <small class="text-muted">({{ $memberDetails->description }})</small>

                                <span class="d-block mt-4">{{ ucwords(strtolower($defaultStore->description)), '' }}</span>
                                <small class="text-muted">Store Location</small>
                            </div>

                            <table class="table" style="min-width: 100%">
                                <thead class="">
                                    <tr>
                                        <td scope="col">Description</td>
                                        <td class="text-right" scope="col">Qty</td>
                                        <td class="text-right" scope="col">Price</td>
                                        <td class="text-right" scope="col">Total</td>
                                    </tr>
                                </thead>
                                <tbody id="invoice_table">
                                </tbody>
                                <tr>
                                    <td class="text-right font-weight-bold" colspan="3">Total</td>
                                    <td class="text-right font-weight-bold">
                                        <span class="total_amount"></span>
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <div class="row">
                            <button
                                class="btn btn-success d-flex align-items-center confirm_transaction pl-4 pr-4 pt-3 pb-3">
                                <ion-icon class="mr-2" name="wallet-outline"></ion-icon>
                                <span>Confirm</span>
                            </button>
                            <button type="button" class="btn btn-light pl-4 pr-4 pt-3 pb-3 ml-2"
                                data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    {{-- <div class="modal-footer justify-content-start"> --}}
                    {{-- <button class="btn btn-success d-flex align-items-center confirm_transaction pl-4 pr-4 pt-3 pb-3">
                            <ion-icon class="mr-2" name="wallet-outline"></ion-icon>
                            <span>Confirm</span>
                        </button>
                        <button type="button" class="btn btn-light pl-4 pr-4 pt-3 pb-3"
                            data-dismiss="modal">Close</button> --}}
                    {{-- </div> --}}
                </div>
            </div>
        </div>
    </div>

    {{-- Include if the Group ID is 7 or Authorized Representative --}}
    {{-- @if ($memberGroupId === '7')
        <div class="modal fade" id="authorized_representative_modal" data-backdrop="static" data-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="p-3">
                            <div class="mb-4">
                                <h5 class="font-weight-bold d-block">Authorized Representative Details</h5>
                                <span>Please fill in the complete details of the authorized representative.</span>
                            </div>
                            <form id="authorizedRepForm">
                                <div class="form-row">
                                    @csrf
                                    <div class="form-group col-lg-6" required>
                                        <span class="d-flex mb-2" for="">First Name</span>
                                        <input type="text" class="form-control form-control-lg" id="firstname"
                                            name="firstname">
                                        <div class="invalid-feedback" id="firstnameFeedback"></div>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <span class="d-flex mb-2" for="">Middle Name</span>
                                        <input type="text" class="form-control form-control-lg" id="middlename"
                                            name="middlename">
                                        <div class="invalid-feedback" id="middlenameFeedback"></div>
                                    </div>
                                    <div class="form-group col-lg-6" required>
                                        <span class="d-flex mb-2" for="">Last Name</span>
                                        <input type="text" class="form-control form-control-lg" id="lastname"
                                            name="lastname">
                                        <div class="invalid-feedback" id="lastnameFeedback"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <span class="d-flex mb-2" for="" required>Phone Number</span>
                                    <input type="text" class="form-control form-control-lg" id="phonenum"
                                        name="phonenum">
                                    <div class="invalid-feedback" id="phonenumFeedback"></div>
                                </div>
                                <div class="form-group">
                                    <span class="d-flex mb-2" for="">Email</span>
                                    <input type="email" class="form-control form-control-lg" id="email"
                                        name="email">
                                    <div class="invalid-feedback" id="emailFeedback"></div>
                                </div>

                                <div class="mt-4">
                                    <button class="btn btn-success d-flex align-items-center pl-4 pr-4 pt-3 pb-3"
                                        type="submit" form="authorizedRepForm">
                                        <ion-icon class="mr-2" name="wallet-outline"></ion-icon>
                                        <span>Submit</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    @endif --}}
@endsection

@section('scripts')
    <script>
        let products;
        let totalCount = 0;
        let resultCount = 0;
        let productsTable;
        let transactionDetailsTable;
        let findModes = "findSimilar";
        let transactionAmount = 0;

        const memberTransaction = {
            init: function() {
                memberTransaction.events();
                memberTransaction.getProducts();
                memberTransaction.getTransactionDetails();
                memberTransaction.displayAuthorizedForm();
            },
            events: function() {
                $('.search_products').on('keyup', function(event) {
                    if (event.key === 'Enter') {
                        let searchCriteria = $(this).val();
                        memberTransaction.getProducts(searchCriteria);
                    }
                });

                $('.search_modes').on('change', function(event) {
                    findModes = $(this).val();
                });

                $('.pay_transaction').on('click', function(event) {
                    memberTransaction.displayInvoiceModal();
                });

                $('.change_store').on('click', function(event) {
                    alert('true');
                });

                $('.confirm_transaction').on('click', function(event) {
                    memberTransaction.confirmTransaction();
                });

                $("#authorizedRepForm").on('submit', function(e) {
                    e.preventDefault();

                    const formData = new FormData(this);
                    memberTransaction.submitAuthorizedRepDetails(formData);
                });
            },
            getProducts: function(filter = "") {
                if (productsTable) {
                    productsTable.destroy();
                }

                productsTable = $('.product_table').DataTable({
                    ajax: `/cs/get-filtered-products?criteria=${filter}&findModes=${findModes}`,
                    order: [
                        [0, 'asc']
                    ],
                    dom: 't',
                    // pageLength: 5,
                    columns: [{
                            data: 'description',
                            name: 'description',
                            visible: false
                        },
                        {
                            data: 'sku',
                            name: 'sku',
                            visible: false
                        },
                        {
                            data: 'id',
                            name: 'id',
                            render: function(data, type, row) {
                                return `<div class="d-flex justify-content-between align-items-center p-2">
                                        <div class="">
                                            <span class="d-block">${row.description}</span>
                                            <small class="d-block">${row.sku}</small>
                                        </div>
                                        <span class="">₱ ${parseFloat(row.current_price).toFixed(2)}</span>
                                    </div>`;
                            },
                        }
                    ],
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                    createdRow: function(row, data, dataIndex) {
                        $(row).on('click', function() {
                            let rowData = productsTable.row(this).data();
                            memberTransaction.productTableRow(rowData);
                        });
                    },
                });
            },
            productTableRow: function(rowData) {
                Swal.fire({
                    title: `Add Item to Your Transaction?`,
                    text: `${rowData.description}`,
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, Confirm!",
                    input: 'text', // This adds a text input field
                    inputValue: '1',
                    inputPlaceholder: 'Enter Quantity',
                    inputAttributes: {
                        style: 'text-align: center;' // Center the input text
                    },
                    inputValidator: (value) => {
                        if (!value) {
                            return 'You need to write something!';
                        } else if (value <= 0) {
                            return 'Quantity must be greater than zero!';
                        }
                    },
                }).then((result) => {
                    if (result.isConfirmed) {
                        let formData = new FormData();
                        formData.append('product_id', rowData.id);
                        formData.append('current_price', rowData.current_price);
                        formData.append('qty', result.value);
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

                        $.ajax({
                                url: '/cs/upsert-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_headers").DataTable().ajax.reload();
                            })
                            .fail(function(xhr, status, error) {
                                console.error('Ajax error:', error);
                            });
                    }
                });
            },
            getTransactionDetails: function() {
                if (transactionDetailsTable) {
                    transactionDetailsTable.destroy();
                }

                transactionDetailsTable = $('.transaction_headers').DataTable({
                    ajax: `/cs/get-transaction-details`,
                    order: [
                        [0, 'asc']
                    ],
                    dom: 't',
                    pageLength: 50,
                    columns: [{
                            data: 'id',
                            name: 'id',
                            orderable: false,
                            render: function(data, type, row) {
                                return `<ion-icon class="mt-1" name="remove-circle-outline"></ion-icon>`;
                            },
                        },
                        {
                            data: 'sku',
                            name: 'sku',
                            orderable: false,
                        },
                        {
                            data: 'description',
                            name: 'description',
                            orderable: false,
                        },
                        {
                            data: 'qty',
                            name: 'qty',
                            orderable: false,
                            render: function(data, type, row) {
                                return `<div class="text-right">${row.qty}</div>`;
                            },
                        },
                        {
                            data: 'price',
                            name: 'price',
                            orderable: false,
                            render: function(data, type, row) {
                                return `<div class="text-right">${row.price}</div>`;
                            },
                        },
                        {
                            data: 'id',
                            name: 'id',
                            orderable: false,
                            render: function(data, type, row) {
                                return `<div class="text-right">${row.price * row.qty}</div>`;
                            },
                        },

                    ],
                    drawCallback: function() {
                        transactionAmount = 0; // Reset grand total
                        let api = this.api();
                        api.rows().every(function() {
                            let data = this.data();
                            transactionAmount += data.price * data.qty;
                        });
                        // console.log("Grand Total:", grandTotal);
                        // Optionally display the grand total somewhere in the UI
                        $('.total_amount').text(transactionAmount);
                    },
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                    createdRow: function(row, data, dataIndex) {
                        $(row).find('td:eq(0)').on('click',
                            function() { // Modify the column index (0-based)
                                memberTransaction.deleteTransactionDetails(data);
                            });
                    },
                });
            },
            deleteTransactionDetails: function(row) {
                Swal.fire({
                    title: "Are you sure?",
                    text: `${row.description}`,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, remove it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        let formData = new FormData();
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        formData.append('id', row.id)

                        $.ajax({
                                url: '/cs/delete-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_headers").DataTable().ajax.reload();
                            })
                            .fail(function(xhr, status, error) {
                                console.error('Ajax error:', error);
                            });
                    }
                });
            },
            displayInvoiceModal: function() {
                let data = $("#transaction_headers_1").DataTable().data().toArray();
                // let data = transactionDetailsTable.data().toArray();
                $("#invoice_table").empty();

                $.each(data, function(key, value) {
                    $("#invoice_table").append(`<tr>
                        <td>${value.description}</td>
                        <td class="text-right">${value.qty}</td>
                        <td class="text-right">${value.price}</td>
                        <td class="text-right">${value.price * value.qty}</td>
                        </tr>`)
                });

                $("#invoice_modal").modal('toggle');
            },
            confirmTransaction: function() {
                let formData = new FormData();
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                formData.append('transaction_type', $('input[name="transaction_type"]:checked').val());

                $.ajax({
                        url: '/cs/confirm-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 = `/cs/success-transaction-details/${response}`;
                    })
                    .fail(function(xhr, status, error) {
                        console.error('Ajax error:', error);
                    });
            },
            displayAuthorizedForm: function() {
                $.ajax({
                        url: `/cs/check-authorized-rep/` + +$("#transactionRef").val(),
                        method: 'GET',
                        processData: false, // Ensure jQuery doesn't process the data
                        contentType: false, // Ensure jQuery doesn't set the content type
                    })
                    .then(function(response) {
                        if ((response.hasAuthorizedRep === 0) && (memberTransaction.getURLParams('group_id') === '7')) {
                            // The 1 represents true and 0 to false
                            // $("#authorized_representative_modal").modal('toggle')
                            window.location.href = `/cs/register-authorized-representative`;
                        }
                    })
                    .fail(function(xhr, status, error) {
                        alert('Ajax error:', error)
                    });
            },
            submitAuthorizedRepDetails: function(formData) {
                $.ajax({
                        url: `/cs/submit-authorized-rep/` + $("#transactionRef").val(),
                        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) {
                        $("#authorized_representative_modal").modal('toggle')
                    })
                    .fail(function(xhr, status, error) {
                        let response = JSON.parse(xhr.responseText);
                        $.each(response.errors, function(key, value) {
                            $(`input[name="${key}"]`).addClass('is-invalid');
                            $(`#${key}Feedback`).text(value)
                        });
                    })
                    .always(function() {

                    });
            },
            getURLParams: function(getURLString) {
                let currentURL = window.location.href;
                let urlObj = new URL(currentURL);
                let string = urlObj.searchParams.get(getURLString);
                return string;
            },
        }

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