@extends('layouts.app')
@section('content')
    <div class="main__container">
        <div class="header__">
            <div class="left__">
                <h2>RFQ ID: {{ $rfq->id }}</h2>
                <p>Product Name:
                    {{ $rfq->defaultProduct->name .
                        ($rfq->palletization == 'US'
                            ? ' - US (40"x48")'
                            : ($rfq->palletization == 'EU/Asia'
                                ? ' - EU/Asia'
                                : ($rfq->palletization == 'EU'
                                    ? ' - EU (800mmx1200mm)'
                                    : ''))) }}
                </p>
                <p>Processing Type: {{ $rfq->processing_type }}</p>
                <p>Product Description: {{ $rfq->description }}</p>
                <p>Port <span class="semibold">{{ $rfq->port_of_unloading ?? 'undefined' }}</span></p>
                <p>Scout: Ismail H.</p>
                <p>Created on: {{ $rfq->created_at->format('D-m-y') }}</p>
            </div>
            <div class="right__">
                <a href="{{ route('rfq.duplicate', $rfq->id) }}" class="filled-btn duplicate__button">Duplicate</a>
                @if ($rfq->archived == '0')
                    <a href="{{ route('rfq.archive', $rfq->id) }}" class="regular-btn archive__button">Archive RFQ</a>
                @else
                    <a href="{{ route('rfq.unarchive', $rfq->id) }}" class="regular-btn unarchive__button">Unarchive RFQ</a>
                @endif
                @if ($rfq->status == '1' or $rfq->status == '2')
                    <a href="{{ route('rfq.status', [$rfq->id, 0]) }}" class="regular-btn ">Close RFQ</a>
                    <a href="{{ route('rfq.status', [$rfq->id, 3]) }}" class="regular-btn ">Cancel RFQ</a>
                @else
                    <a href="{{ route('rfq.status', [$rfq->id, 1]) }}" class="regular-btn ">Active RFQ</a>
                @endif
            </div>
        </div>
        <div class="grid__stats four">
            <div class="elem">
                <div class="title">
                    <h6>Proposals</h6>
                </div>
                <div class="content__">
                    <h6>{{ $rfq->offers->count() }} Proposals</h6>
                    @if ($percentage_proposals == 0)
                        <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow">N/A</span> vs last
                            30 days</p>
                    @elseif ($percentage_proposals > 0)
                        <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow">
                                +{{ number_format($percentage_proposals, 2) }}%</span> vs last 30 days</p>
                    @else
                        <p><span class="down"><img src="{{ asset('img/arrowdown.svg') }}" alt="downarrow">
                                {{ number_format($percentage_proposals, 2) }}%</span> vs last 30 days</p>
                    @endif
                </div>
            </div>

            <div class="elem">
                <div class="title">
                    <h6>Average Price</h6>
                </div>
                <div class="content__">
                    <h6>{{ number_format($rfq->offers->avg('price_per_kg'), 2) }} <span>{{ $rfq->currency }}</span></h6>
                    <p>
                        Max price: {{ $rfq->offers->max('price_per_kg') }} vs Min price:
                        {{ $rfq->offers->min('price_per_kg') }}
                    </p>
                    @if ($percentageChange == 0)
                        <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow">N/A</span> vs last
                            30 days</p>
                    @elseif ($percentageChange > 0)
                        <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow">
                                +{{ number_format($percentageChange, 2) }}%</span> vs last 30 days</p>
                    @else
                        <p><span class="down"><img src="{{ asset('img/arrowdown.svg') }}" alt="downarrow">
                                {{ number_format($percentageChange, 2) }}%</span> vs last 30 days</p>
                    @endif

                </div>
            </div>

            <div class="elem">
                <div class="title">
                    <h6>Total volume offered</h6>
                </div>
                <div class="content__">
                    <h6>{{ number_format($rfq->offers->sum('volume'), 2) }} <span>{{ $rfq->unit }}</span></h6>
                    @if ($percentageVolume == 0)
                        <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow">N/A</span> vs last
                            30 days</p>
                    @elseif ($percentageVolume > 0)
                        <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow">
                                +{{ number_format($percentageVolume, 2) }}%</span> vs last 30 days</p>
                    @else
                        <p><span class="down"><img src="{{ asset('img/arrowdown.svg') }}" alt="downarrow">
                                {{ number_format($percentageVolume, 2) }}%</span> vs last 30 days</p>
                    @endif

                </div>
            </div>
            <div class="elem">
                <div class="title">
                    <h6>RFQ Closing Status</h6>
                </div>
                <div class="content__">
                    @if ($daysRemaining > 0)
                        <span>RFQ will close in: </span>
                        <h6>{{ $daysRemaining }}</h6><span> {{ $daysRemaining > 1 ? 'Days' : 'Day' }} </span>
                    @elseif ($daysRemaining == 0)
                        <h6>RFQ is <span>set to close today</span></h6>
                    @else
                        <h6>RFQ has <span>already closed</span></h6>
                    @endif
                </div>
            </div>
        </div>
        <div class="table__wrapper">
            <table class="regular-table">
                <tr>
                    <th>Offer ID</th>
                    <th class="center">Port Origin</th>
                    <th class="center">Volume</th>
                    <th class="center">Offred Price</th>
                    <th class="center">Offer Deadline</th>
                    <th class="center">Counter Price</th>
                    <!-- <th class="center">Supplier</th> -->
                    <th class="center">Status</th>
                    <th class="center"></th>
                </tr>
                @foreach ($rfq->offers as $offer)
                    <tr onclick="getOfferData({{ $offer->id }})">
                        <td>
                            <div class="offer">
                                <p class="semibold">{{ $offer->ref_id }}</p>
                                @php
                                    $ratingText = isset($sellerRatingsData[$offer->seller_id]) ? ' Financial Stability: ' . $sellerRatingsData[$offer->seller_id]['financial_stability'] . ' | Activity on Platform: ' . $sellerRatingsData[$offer->seller_id]['activity_on_platform'] . ' | Quality: ' . $sellerRatingsData[$offer->seller_id]['quality'] . ' | Reliability: ' . $sellerRatingsData[$offer->seller_id]['reliability'] . ' | Customer Service: ' . $sellerRatingsData[$offer->seller_id]['customer_service'] : 'No ratings';
                                @endphp
                                <span title="{{ $ratingText }}">
                                    <img src="{{ asset('img/star.svg') }}" alt='star'>
                                    {{ $sellersAverageRatings[$offer->seller_id] ?? 'N/A' }}
                                </span>
                            </div>
                        </td>
                        <td class="center">
                            <p class="bold">{{ $offer->port_origin }}<span class="smaller"></span></p>
                        </td>
                        <td class="center">
                            <p class="bold">{{ number_format($offer->volume, 2) . ' / ' . $offer->rfq->unit }} </p>
                        </td>
                        <td class="center">
                            <p class="bold">{{ number_format($offer->price_per_kg, 2) . ' / ' . $offer->rfq->currency }} </p>
                        </td>
                        <td class="center">
                            <p class="bold">{{ $offer->offer_exp_date }} </p>
                        </td>
                        <td class="center">
                            <p class="">
                                {{ $offer->counter_offer ? $offer->counter_offer . ' / ' . $offer->rfq->currency : 'N/A' }}
                            </p>
                        </td>
                        <!--
                            <td class="center">
                                <a href="{{ route('supplier.show', ['id' => $offer->seller_id]) }}">
                                    <p class="supplier">{{ $offer->seller->company->name }}.</p>
                                </a>
                            </td>
    -->
                        <td class="center">
                            @if ($offer->counter_status == 'accepted' && $offer->status == 'countered')
                                <p class="status accepted">
                                    <span class="dot"></span> Counter Accepted
                                </p>
                            @elseif($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>
                            @elseif($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 == null)
                                <p class="status proposal">
                                    <span class="dot"></span> Proposal
                                </p>
                            @elseif($offer->status == 'canceled')
                                <p class="status rejected">
                                    <span class="dot"></span> Canceled
                                </p>
                            @else
                                <p class="status rejected">
                                    <span class="dot"></span> Rejected
                                </p>
                            @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>
                        </td>
                    </tr>
                @endforeach

            </table>
        </div>
    </div>
    <div class="modal__wrapper higher" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box archive">
                <form action="{{ route('rfq.archive', $rfq->id) }}" method="POST">
                    @csrf
                    <div class="head__">
                        <p>Archive Offer</p>
                        <span>Are you sure you want to archive this RFQ?</span>
                    </div>
                    <div class="double">
                        <a href="#" class="outline-btn cancel__button">Cancel</a>
                        <a href="{{ route('rfq.archive', $rfq->id) }}" class="delete-btn">Confirm</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal__wrapper higher" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box unarchive">
                <form action="{{ route('rfq.unarchive', $rfq->id) }}" method="POST">
                    @csrf
                    <div class="head__">
                        <p>Archive Offer</p>
                        <span>Are you sure you want to unarchive this RFQ?</span>
                    </div>
                    <div class="double">
                        <a href="#" class="outline-btn cancel__button">Cancel</a>
                        <a href="{{ route('rfq.unarchive', $rfq->id) }}" class="delete-btn">Confirm</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal__wrapper" id="offerrequest"
        style="display:@if (session('showOfferModal')) block @else none @endif;">
        <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>Type</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="unitQ"></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 style="background-color: #EBFBF1;border-radius: 5px;" style="display:none;"
                                class="elem__summary" id="isCountered">
                                <p>Counter Price (<span id="currencyc"></span>)</p>
                                <span id="counter_offer"> </span>
                            </div>
                            <div class="elem__summary">
                                <p>Volume (<span id="unit"></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"value="{{ old('id') }}">
                            <input type="hidden" name="action" id="action" value="{{ old('action') }}">
                            <input type="hidden" name="reason" id="reject_reason"value="{{ old('reason') }}">
                            <input type="hidden" name="unit" id="unitt"value="{{ old('unit') }}">
                            <input type="hidden" name="currency" id="currencyy"value="{{ old('currency') }}">
                            <div class="controls">
                                <a href="#" data-status="accept" class="regular-btn accept__offer--button">Accept
                                    Offer</a>
                                <a href="#" data-status="counter" class="outline-btn counter__offer--btn">Counter
                                    Offer</a>
                                <a href="#" data-status="reject"
                                    class="reject outline-btn reject__offer--btn">Reject 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>
    <div class="modal__wrapper higher" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box reject__modal">
                <a href="#" class="close__modal"><img src="{{ asset('img/close.svg') }}" alt="close"></a>
                <div class="reject__wrapper">
                    <p>Reject Offer</p>
                    <span>Can you specify what made you reject this offer? this will help us improve future RFQs.</span>
                    <div class="dropdown group__input no__title">
                        <a href="#"><span class="non__picked">Other reasons specific to the customer's needs or
                                requirements</span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                        <div class="dropdown__wrapper" style="display:none;">
                            <ul>
                                <li><a href="#" data-reason="Reason 1">Reason 1</a></li>
                                <li><a href="#" data-reason="Reason 2">Reason 2</a></li>
                                <li><a href="#" data-reason="Reason 3">Reason 3</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="double__btns">
                        <a href="#" class="outline-btn cancel">Cancel</a>
                        <a href="#" class="delete-btn confirm">Confirm</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal__wrapper higher" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box success accept">
                <a href="#" class="close__modal"><img src="{{ asset('img/close.svg') }}" alt="close"></a>
                <div class="success__wrapper">
                    <span><img src="{{ asset('img/success.svg') }}" alt="success"></span>
                    <h6>You accepted the offer !</h6>
                    <p>You will soon be contacted by one of our scouters to proceed with your RFQ.</p>
                    <div class="button__wrapper">
                        <a href="#" class="outline-btn">
                            <- Go back to the dashboard</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal__wrapper higher" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box success counter__offer">
                <a href="#" class="close__modal"><img src="{{ asset('img/close.svg') }}" alt="close"></a>
                <div class="success__wrapper">
                    <span><img src="{{ asset('img/success.svg') }}" alt="success"></span>
                    <h6>You’ve sent a counter offer</h6>
                    <p>We will notify the seller about your counter offer, and come back to you with his answer.</p>
                    <div class="button__wrapper">
                        <a href="#" class="outline-btn">
                            <- Go back to the dashboard</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal__wrapper higher" style="display:@if (session('showCounterModal')) block @else none @endif;">
        <div class="inner__modal">
            <div class="modal__box counter">
                <a href="#" class="close__modal"><img src="{{ asset('img/close.svg') }}" alt="close"></a>
                <div class="head__">
                    <p>Counter Offer</p>
                    <span>Enter the counter offer you’re suggesting.</span>
                    @if (session('counterOfferError'))
                        <div class="error-message">
                            {{ session('counterOfferError') }}
                        </div>
                    @endif
                </div>
                <div class="group__input">
                    <input type="text" name="counterOffer" placeholder="Entre Counter price">
                    <span>USD / Kg</span>
                </div>
                <div class="group__input">
                    <input type="text" name="counterQuantity" placeholder="Enter Counter quantity">
                    <span>Units (e.g., Kg)</span>
                </div>
                <div class="double">
                    <a href="#" class="outline-btn cancel__button">Cancel</a>
                    <a href="#" class="regular-btn counter__offer--submit">Counter Offer</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            // Check if the modal should be displayed
            if ($("#offerrequest").css("display") === "block") {
                var offerId = "{{ session('id') }}"; // Fetch the offer ID from the session
                getOfferData(offerId); // Fetch the offer details and populate the modal
            }
        });
    </script>
    <script>
        function getOfferData(id) {
            $.ajax({
                url: base_url + "/offer/" + id,
                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);
                        $('#counter_offer').text(product.counter_offer);
                        $('#created_at').text(product.created_at);
                        $('#unit').text(product.unit);
                        $('#unitt').val(product.unit);
                        $('#unitQ').text(product.unit);
                        $('#currencyy').val(product.currency);
                        $('#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);
                        $('#palletization').text(product.palletization);
                        $('#volume').text(product.volume);
                        $('#payment_terms').text(product.payment_terms);
                        $('#incoterm').text(product.incoterm);
                        $('#total').text(product.total + ' ' + product.currency);
                        $('#picturesContainer').empty();
                        $('#filesContainer').empty();

                        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");
                        }
                        // 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) { // More than 1 MB in bytes
                                var fileSizeInMB = fileSizeInBytes / 1048576;
                                fileSizeText = fileSizeInMB.toFixed(2) +
                                ' MB'; // Using toFixed to limit to 2 decimal places
                            } else if (fileSizeInBytes >= 1024) { // More than 1 KB in bytes
                                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);

                        if (counterStatus === 'accepted') {
                            $('#isCountered').show();
                            $('#counter_offer').text(product.counter_offer);
                            $('#currencyc').text(product.currency);
                        } else {
                            $('#isCountered').hide();
                        }
                        $("#offerrequest").show();
                    }
                },
                error: function(reasons) {
                    console.log(reasons);
                }
            });
        }

        function handleButtons(offerStatus, counterStatus, counterOffer) {
            var acceptButton = $('.accept__offer--button');
            var counterButton = $('.counter__offer--btn');
            var rejectButton = $('.reject__offer--btn');

            // Reset all buttons to default state first
            acceptButton.show().text('Accept').removeClass('disabled non-clickable');
            counterButton.show().text('Counter').removeClass('disabled non-clickable');
            rejectButton.show().text('Reject').removeClass('disabled non-clickable');

            // Check for the specific condition first
            if (counterStatus == 'accepted' && offerStatus == 'countered') {
                acceptButton.show().text('Accept').removeClass('disabled non-clickable');
                rejectButton.hide();
                counterButton.hide();
                return; // Exit the function after applying this condition
            }

            // Now handle other conditions
            if (counterStatus === 'rejected') {
                acceptButton.hide();
                counterButton.addClass('disabled non-clickable');
                rejectButton.text('Rejected').addClass('disabled non-clickable');
            }
            if (offerStatus === 'accepted') {
                acceptButton.text('Accepted').addClass('disabled non-clickable');
                counterButton.hide();
                rejectButton.hide();
            }
            if (offerStatus === 'canceled') {
                acceptButton.text('Canceled').addClass('disabled non-clickable');
                counterButton.hide();
                rejectButton.hide();
            }
            if (offerStatus === 'rejected') {
                acceptButton.hide();
                counterButton.hide();
                rejectButton.text('Rejected').addClass('disabled non-clickable');
            }
            if (offerStatus === 'countered') {
                counterButton.text('Countered').addClass('non-clickable');
                acceptButton.hide();
            }

            console.log(offerStatus);
        }

        $(document).on('click', '.non-clickable', function(e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            console.log('Non-clickable element clicked!');
            return false;
        });
    </script>
    <style>
        .disabled {
            pointer-events: none;
            cursor: default !important;
            ;


        }

        .non-clickable {
            pointer-events: none;
        }

        .error-message {
            padding: 15px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            margin: 10px 0;
            font-weight: 500;
            text-align: center;
        }

        .error-message::before {
            content: '⚠ ';
            font-weight: 700;
        }
    </style>
@endsection