@extends('layouts.app')
@section('content')
    <div class="main__container">
        <div class="header__">
            <div class="left__">
                <h2>My Offers</h2>
            </div>
            <div class="right__">
                <div class="search-box">
                    <form action="{{ route('offers.show') }}" method="GET">

                        <input type="text" class="search-input2" name="ref_id" placeholder="Search By Id...">
                        <button type="submit" class="search-button">
                        </button>

                    </form>
                </div>
            </div>
        </div>
        <div class="table__wrapper">
            <table class="regular-table">
                <tr>
                    <th>Offer ID</th>
                    <th class="center">Product Name</th>
                    <th class="center">Price</th>
                    <th class="center">Volume</th>
                    <th class="center">Deadline</th>
                    <th class="center">Port Origin</th>
                    <th class="center">Port Destination</th>
                    <th class="center">Counter Offer</th>
                    <th class="center">Status</th>
                    <th class="center"></th>
                </tr>
                @foreach ($items->sortByDesc('created_at') as $offer)
                    <tr onclick="getOfferData({{ $offer->id }})">
                        <td class="center">
                            <div class="double">
                                <p>{{ $offer->ref_id }}</p>
                                <span>RFQ: {{ $offer->rfq->ref_id }}</span>
                            </div>
                        </td>
                        <td class="center">
                            <div class="double">
                                <p style="margin: auto;">{{ $offer->rfq->defaultProduct->name }}</p>
                                <span style="margin: auto;">
                                    {{ $offer->rfq->palletization == 'US'
                                        ? ' US (40"x48")'
                                        : ($offer->rfq->palletization == 'EU/Asia'
                                            ? ' EU/Asia'
                                            : ($offer->rfq->palletization == 'EU'
                                                ? ' EU (800mmx1200mm)'
                                                : '')) }}</span>
                            </div>
                        </td>
                        <td class="center">
                            <p class="semibold bold">{{ $offer->price_per_kg }} <span class="smaller semibold">
                                    {{ $offer->rfq->currency }} / {{ $offer->rfq->unit }}</span>
                            </p>
                        </td>

                        <td class="center">
                            <p class='semibold'>{{ number_format($offer->volume, 2) }} {{ $offer->rfq->unit }}</p>
                        </td>
                        <td class="center">
                            <p class="semibold">{{ $offer->offer_exp_date }}</p>
                        </td>
                        <td class="center">
                            <p>{{ $offer->port_origin }}</p>
                        </td>
                        <td class="center">
                            <p>{{ $offer->port_destination ?? 'Not set' }}</p>
                        </td>
                        <td class="center">
                            @if ($offer->counter_offer)
                                <p> {{ $offer->counter_offer }} {{ $offer->rfq->currency }} </p>
                            @else
                                <p> Not set </p>
                            @endif
                        </td>
                        <td class="center">
                            @if ($offer->counter_status == 'accepted')
                                <p class="status accepted">
                                    <span class="dot"></span> Accepted
                                </p>
                            @elseif($offer->counter_status == 'rejected')
                                <p class="status accepted">
                                    <span class="dot"></span> Rejected
                                </p>
                            @else
                                @if ($offer->status == 'countered')
                                    <p class="status counter">
                                        <span class="dot"></span> Counter
                                    </p>
                                @elseif($offer->status == 'accepted')
                                    <p class="status accepted">
                                        <span class="dot"></span> Accepted
                                    </p>
                                @elseif($offer->status == 'canceled')
                                    <p class="status rejected">
                                        <span class="dot"></span> Canceled
                                    </p>
                                @elseif($offer->status == null)
                                    <p class="status proposal">
                                        <span class="dot"></span> Proposal
                                    </p>
                                @else
                                    <p class="status rejected">
                                        <span class="dot"></span> Rejected
                                    </p>
                                @endif
                            @endif
                        </td>
                        <td class="center">
                            <div class="action__button">
                                <a class="offer" href="javascript:void(0)"
                                    onclick="getOfferData({{ $offer->id }})"><img src="{{ asset('img/dots.svg') }}"
                                        alt="dots"></a>
                            </div>
                    </tr>
                @endforeach
            </table>
        </div>
    </div>
    <div class="modal__wrapper" id="offerview" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box offer">
                <a href="#" class="close__modal"><img src="{{ asset('img/close.svg') }}" alt="close"></a>
                <div class="head__">
                    <h6>Offer ID: <span id="offer_id"></span>
                    </h6>
                </div>
                <div class="content__">
                    <div class="content__data">
                        <div class="list__">
                            <div class="elem__list">
                                <p>Product</p>
                                <div class="value">
                                    <p id="productName"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Processing Type</p>
                                <div class="value">
                                    <p id="processing_type"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Product Description</p>
                                <div class="value">
                                    <p id="description"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Packaging</p>
                                <div class="value">
                                    <p id="packaging"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Palletization</p>
                                <div class="value">
                                    <p id="palletization"></p>
                                </div>
                            </div>

                            <div class="elem__list">
                                <p>Issue Date</p>
                                <div class="value">
                                    <p id="created_at"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Exp. Date</p>
                                <div class="value">
                                    <p id="Exp_Date"> <span></span></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Port Origin</p>
                                <div class="value">
                                    <p id="port_origin"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Port Destination</p>
                                <div class="value">
                                    <p id="port_destination"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Incoterm</p>
                                <div class="value">
                                    <p id="incoterm"></p>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Counter Offer</p>
                                <div class="input with__text">
                                    <input autocomplete="off" READONLY id="counter" type="text" value=""
                                        style="background: #EBFBF1;">
                                    <span id="currencyc"></span>
                                </div>
                            </div>
                            <div class="elem__list">
                                <p>Counter Quantity</p>
                                <div class="input with__text">
                                    <input autocomplete="off" READONLY id="counter_quantity" type="text"
                                        value="" style="background: #EBFBF1;">
                                    <span id="unit"></span>
                                </div>
                            </div>

                        </div>
                        <div class="assets">
                            <div class="elem__asset">
                                <p>Pictures</p>
                                <div class="grid__" id="picturesContainer">
                                    <!-- Dynamically inserted picture data will go here -->
                                </div>
                            </div>

                            <div class="elem__asset">
                                <p>Files</p>
                                <div class="grid__" id="filesContainer">
                                    <!-- Dynamically inserted file data will go here -->
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="summary">
                        <h6>Summary</h6>
                        <div class="summary__grid">
                            <div class="elem__summary">
                                <p>Price offered (<span id="currency"></span>)</p>
                                <span id="price_per_kg"></span>
                            </div>
                            <div class="elem__summary">
                                <p>Volume (<span id="unitv"></span>)</p>
                                <span id="volume"></span>
                            </div>
                            <div class="elem__summary">
                                <p>Payment term</p>
                                <span id="payment_terms"> days</span>
                            </div>
                            <div class="total__">
                                <p>Total</p>
                                <span id="total"></span>
                            </div>
                        </div>
                        <form id="offerForm" action="{{ route('offerStatus') }}" method="POST">
                            @csrf
                            <input type="hidden" name="id" id="id">
                            <input type="hidden" name="action" id="actionInput">
                            <div class="controls" id="counterOfferControls" style="display:none;">
                                <a href="#" data-status="accept-counter" class="regular-btn accept__offer--button"
                                    id="acceptCounterOffer">Accept Counter Offer</a>
                                <a href="#" data-status="reject-counter"
                                    class="reject outline-btn reject__offer--btn" id="rejectCounterOffer">Reject</a>
                            </div>

                            <div class="controls">
                                <a href="#" data-status="cancel" class="outline-btn cancel__offer--button"
                                    id="cancelOffer">Cancel Offer</a>
                            </div>
                        </form>


                        <div class="by__clicking">
                            <p>By clicking on “Accept Offer”, you agree to our <br>
                                <a href="#">Terms and Conditions of Use.</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        function getOfferData(status) {
            $.ajax({
                url: base_url + "/offer/" + status,
                type: 'GET',
                success: function(response) {
                    if (response.result) {
                        var product = response.product;
                        var offerStatus = product.status;
                        var counterStatus = product.counter_status;
                        var counterOffer = product.counter_offer;
                        $('#status').text(offerStatus);
                        $('#id').val(product.id);
                        $('#offer_id').text(product.id);
                        $('#currency').text(product.currency);
                        $('#currencyc').text(product.currency);
                        $('#unitQ').text(product.unit);
                        $('#unitv').text(product.unit);
                        $('#unit').text(product.unit);
                        $('#created_at').text(product.created_at);
                        $('#productName').text(product.productName);
                        $('#Exp_Date').text(product.offer_exp_date);
                        $('#port_origin').text(product.port_origin);
                        $('#port_destination').text(product.port_destination);
                        $('#price_per_kg').text(product.price_per_kg);
                        $('#description').text(product.description);
                        $('#palletization').text(product.palletization);
                        $('#packaging').text(product.packaging);
                        $('#processing_type').text(product.processing_type);
                        $('#volume').text(product.volume);
                        if (product.counter_offer !== null && product.counter_offer !== "" && product
                            .counter_offer !== undefined) {
                            $('#counter').val(product.counter_offer);
                        } else {
                            $('#counter').val("Not set");
                        }
                        if (product.counter_quantity !== null && product.counter_quantity !== "" && product
                            .counter_quantity !== undefined) {
                            $('#counter_quantity').val(product.counter_quantity);
                        } else {
                            $('#counter_quantity').val("Not set");
                        }

                        console.log("Is Counter Offer Controls visible: ", $('#counterOfferControls').is(
                            ':visible')); // Log visibility after attempting to show the element

                        $('#payment_terms').text(product.payment_terms);
                        $('#incoterm').text(product.incoterm);
                        $('#total').text(product.total + ' ' + product.currency);
                        $('#picturesContainer').empty(); // Remove old picture info
                        $('#filesContainer').empty(); // Remove old file info

                        var currentText = $('#palletization').text().trim();
                        if (currentText === 'US') {
                            $('#palletization').text('US (40"x48")');
                        } else if (currentText === 'EU/Asia') {
                            $('#palletization').text('EU/Asia');
                        } else if (currentText === 'EU') {
                            $('#palletization').text('EU (800mmx1200mm)');
                        }
                        var currentpackaging = $('#packaging').text().trim();
                        if (currentpackaging === '1') {
                            $('#packaging').text('Vacuum Sealed Bags');
                        } else if (currentpackaging === '2') {
                            $('#packaging').text('Cardboard Boxes with Inner Liners');
                        } else if (currentpackaging === '3') {
                            $('#packaging').text('Frozen Packaging');
                        } else if (currentpackaging === 'd') {
                            $('#packaging').text('Airtight Containers');
                        }
                        // Display the files
                        var files = product.files;
                        for (var i = 0; i < files.length; i++) {
                            var fileElement = $('<div class="el__"></div>');
                            var iconElement, container;

                            // Check file extension
                            var extension = files[i].file_name.split('.').pop();
                            if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
                                // This is a picture
                                iconElement = $('<span></span>').append($('<img>').attr('src',
                                    "{{ asset('img/picture.svg') }}").attr('alt', 'picture'));
                                container = $('#picturesContainer');
                            } else {
                                // This is a document file
                                iconElement = $('<span></span>').append($('<img>').attr('src',
                                    "{{ asset('img/pdf.svg') }}").attr('alt', 'document'));
                                container = $('#filesContainer');
                            }

                            var descElement = $('<div class="desc__"></div>');
                            var fullFileName = files[i].file_name;
                            var fileExtension = fullFileName.split('.').pop(); // gets the file extension
                            var fileNameWithoutExt = fullFileName.substr(0, fullFileName.lastIndexOf('.')) ||
                                fullFileName;

                            if (fileNameWithoutExt.length > 20) {
                                fileNameWithoutExt = fileNameWithoutExt.substr(0, 20) + '...';
                            }

                            var trimmedFileName = fileNameWithoutExt + '.' + fileExtension;

                            var fileNameElement = $('<p></p>').append($('<a></a>')
                                .attr('href', files[i].download_url)
                                .attr('download', trimmedFileName)
                                .text(trimmedFileName));

                            var fileSizeInBytes = files[i].file_size;
                            var fileSizeText;

                            if (fileSizeInBytes >= 1048576) {
                                var fileSizeInMB = fileSizeInBytes / 1048576;
                                fileSizeText = fileSizeInMB.toFixed(2) + ' MB';
                            } else if (fileSizeInBytes >= 1024) {
                                var fileSizeInKB = fileSizeInBytes / 1024;
                                fileSizeText = fileSizeInKB.toFixed(2) + ' KB';
                            } else {
                                fileSizeText = fileSizeInBytes + ' Bytes';
                            }

                            var fileSizeElement = $('<span></span>').text(fileSizeText);

                            descElement.append(fileNameElement);
                            descElement.append(fileSizeElement);
                            fileElement.append(iconElement);
                            fileElement.append(descElement);
                            container.append(fileElement);
                        }
                        handleButtons(offerStatus, counterStatus, counterOffer);
                        $("#offerview").show();
                    }
                },
                error: function(reasons) {
                    console.log(reasons);
                }
            });
        }


        function handleButtons(offerStatus, counterStatus, counterOffer) {
            var acceptButton = $('.accept__offer--button');
            var rejectButton = $('.reject__offer--btn');
            var cancelButton = $('.cancel__offer--button');
            var counterOfferControls = $('#counterOfferControls');

            acceptButton.show().text('Accept Counter Offer');
            acceptButton.show().removeClass('outline-btn disabled');
            rejectButton.show().text('Reject Counter Offer');
            rejectButton.show().removeClass('disabled');
            cancelButton.show().text('Cancel Offer');
            cancelButton.show().removeClass('disabled');

            if (counterOffer !== null && counterOffer !== "" && counterOffer !== undefined) {
                counterOfferControls.show();
            } else {
                counterOfferControls.hide();
            }

            if (counterStatus == null && counterOffer === null && counterOffer === "") {
                acceptButton.hide();
                rejectButton.hide();
            } else {
                switch (counterStatus) {
                    case "accepted":
                        acceptButton.text('Counter Offer Accepted');
                        acceptButton.addClass('outline-btn disabled');
                        rejectButton.hide();
                        cancelButton.hide();
                        break;
                    case "rejected":
                        rejectButton.text('Counter Offer Rejected');
                        rejectButton.addClass('disabled');
                        acceptButton.hide();
                        cancelButton.hide();
                        break;
                }
            }

            if (offerStatus == 'canceled') {
                cancelButton.text('Offer Canceled');
                cancelButton.addClass('outline-btn disabled');
                acceptButton.hide();
                rejectButton.hide();
            }
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            let buttons = document.querySelectorAll('.accept__offer--button, .reject, .cancel__offer--button');
            buttons.forEach((button) => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    let status = this.getAttribute('data-status');
                    let actionInput = document.getElementById('actionInput');
                    actionInput.value = status;

                    // Handling the button status here, if necessary.
                    handleButtons(status);

                    // Submitting the form
                    document.getElementById('offerForm').submit();
                });
            });
        });
    </script>
    <style>
        .outline-btn.disabled {
            pointer-events: none;
            opacity: 0.6;
        }
    </style>
@endsection