@extends('layouts.app')
@section('content')
    <style>
        .search-box {
            position: relative;
            width: 200px;
            /* Adjust width as per your design requirement */
        }

        .search-input2 {
            width: 200%;
            padding: 9px 22px;
            margin: 7px -250px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 10px;
            font-size: 16px;
            background-color: white;
            background-position: 517px 1px;
            background-repeat: no-repeat;
            transition: width 0.1s ease-in-out;
            background-size: contain;
        }

        .search-button {
            position: absolute;
            right: 43px;
            top: 6px;
            bottom: 6px;
            width: 31px;
            background: #91c275;
            border: none;
            border-radius: 0px 10px 11px 0;
            border-top-left-radius: 0px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 11px;
            border-bottom-left-radius: 0px;
            cursor: pointer;
            padding: 0px;
        }

        .search-button svg {
            width: 16px;
            /* Adjusted Width */
            height: 16px;
            /* Adjusted Height */
            margin: auto;
            fill: white;
        }
    </style>
    <div class="main__container">
        <div class="header__">
            <div class="left__">
                <h2>Available RFQs</h2>
                <p>You have {{ $rfqs->count() }} RFQ suggestions</p>
            </div>
            <div class="right__">
                <div class="search-box">
                    <form action="{{ route('rfq.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="grid__stats" style="grid-template-columns: repeat(2, 1fr);">
            <!--
            <div class="elem">
                    <div class="title">
                        <h6>Total Revenue</h6>
                    </div>
                    <div class="content__">
                        <h6>${{ number_format($contractsTotalPrice, 2) }} USD</h6>
                        <p>
                <span class="{{ $percentageChange >= 0 ? 'up' : 'down' }}">
                    <img src="{{ asset($percentageChange >= 0 ? 'img/uparrow.svg' : 'img/arrowdown.svg') }}" alt="arrow">
                    {{ $percentageChange >= 0 ? '+' : '' }}{{ number_format($percentageChange, 2) }}%
                </span>
                            vs last 30 days
                        </p>
                    </div>
                </div>
    -->

            <div class="elem">
                <div class="title">
                    <h6>Active Request for Quotes</h6>
                </div>
                <div class="content__">
                    <h6>{{ $activeRfqs }} RFQ’s</h6>
                    <!--
                        @if ($percentageDifference == 0)
    <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow">N/A</span> vs last 30 days</p>
@elseif($percentageDifference > 0)
    <p><span class="up"><img src="{{ asset('img/uparrow.svg') }}" alt="uparrow"> +{{ number_format($percentageDifference, 2) }}%</span> vs last 30 days</p>
@else
    <p><span class="down"><img src="{{ asset('img/arrowdown.svg') }}" alt="downarrow"> {{ number_format($percentageDifference, 2) }}%</span> vs last 30 days</p>
    @endif
                        -->
                </div>
            </div>

            <div class="elem">
                <div class="title">
                    <h6>Closed Deals</h6>
                </div>
                <div class="content__">
                    <h6>{{ $closedDeals }} Deals</h6>
                    <!--
                        <p>
                <span class="{{ $percentageDealsDifference >= 0 ? 'up' : 'down' }}">
                    <img src="{{ asset($percentageDealsDifference >= 0 ? 'img/uparrow.svg' : 'img/downarrow.svg') }}" alt="arrow">
                    {{ $percentageDealsDifference == 0 ? 'N/A' : number_format($percentageDealsDifference, 2) }}%
                </span>
                            vs last 30 days
                        </p>
                        -->
                </div>
            </div>
        </div>
        <div class="table__wrapper">
            <table class="regular-table">
                <tr>
                    <th class="center">ID</th>
                    <th class="center">Rating</th>
                    <th class="center">Product & Type</th>
                    <th class="center">Volume</th>
                    <th class="center">Port Destination</th>
                    <th class="center">Scout</th>
                    <th class="center">Created Date</th>
                    <th class="center">Deadline</th>
                    <th class="center">Status</th>
                    <th class="center"></th>
                </tr>
                @foreach ($items as $rfq)
                    @if (!in_array($rfq->id, $sellerOffers))
                        <tr onclick="getRFQData({{ $rfq->id }})" class="show-offer-modal">
                        @else
                        <tr>
                    @endif
                    <td class="center">
                        <p class="semibold">{{ $rfq->ref_id }}</p>
                    </td>
                    <td class="center">
                        <div class="offer">
                            @php
                                $ratingText = ' Financial Stability: ' . $buyerRatingsData[$rfq->id]['financial_stability'] . ' | Activity on Platform: ' . $buyerRatingsData[$rfq->id]['activity_on_platform'] . ' | Claim Management: ' . $buyerRatingsData[$rfq->id]['claim_management'] . ' | Reliability: ' . $buyerRatingsData[$rfq->id]['reliability'] . ' | Adaptability: ' . $buyerRatingsData[$rfq->id]['adaptability'];
                            @endphp
                            <span title="{{ $ratingText }}">
                                <img src="{{ asset('img/star.svg') }}" alt='star'>
                                @if ($averageRatings[$rfq->id] == '0')
                                    N/A
                                @else
                                    {{ $averageRatings[$rfq->id] }}
                                @endif
                            </span>
                        </div>
                    </td>
                    <td class="center">
                        <div class="double">
                            <p style="margin: auto;">{{ $rfq->defaultProduct->name }}</p>
                            <span style="margin: auto;">
                                {{ $rfq->processing_type }}</span>
                        </div>
                    </td>
                    <td class="center">
                        <div class="double">
                            <p>{{ number_format($rfq->quantity, 2) . '  ' . $rfq->unit ?? 'undefined' }}</p>
                        </div>
                    </td>
                    <td class="center">
                        <div class="double">
                            <p>{{ $rfq->port_of_unloading ?? 'undefined' }}</p>
                        </div>
                    </td>
                    <td class="center">
                        <div class="profile">
                            <span><img src="{{ asset('img/profile.png') }}" alt="profile"></span>
                            <p>Natalie</p>
                        </div>
                    </td>
                    <td class="center">
                        <p class="date">{{ $rfq->created_at->format('d-m-y') }}</p>
                    </td>
                    <td class="center">
                        <p class="date">{{ \Carbon\Carbon::parse($rfq->deadline)->format('d-m-y') }}</p>
                    </td>
                    <td class="center">
                        @if ($rfq->status == '1')
                            <p class="status active">
                                <span class="dot"></span> New
                            </p>
                        @elseif ($rfq->status == '2')
                            <p class="status active">
                                <span class="dot"></span> Proposals
                            </p>
                        @elseif ($rfq->status == '0')
                            <p class="status closed">
                                <span class="dot"></span> Closed
                            </p>
                        @else
                            <p class="status canceled">
                                <span class="dot"></span> Canceled
                            </p>
                        @endif
                    </td>
                    <td class="center">
                        @if (in_array($rfq->id, $sellerOffers))
                            <p class="respond outline-btn non-clickable">Offer posted</p>
                        @else
                            <a href="javascript:void(0)" onclick="getRFQData({{ $rfq->id }})"
                                class="show-offer-modal
                                respond outline-btn ">Respond to
                                RFQ</a>
                        @endif
                    </td>

                    </tr>
                @endforeach
            </table>
        </div>
        <div class="pagination-wrapper">
            {{ $rfqs->onEachSide(1)->withQueryString()->links('pagination::bootstrap-4') }}
        </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="#">reason 1</a></li>
                                <li><a href="#">reason 2</a></li>
                                <li><a href="#">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" style="display:none;" id="rfq_seller">
        <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>Create an offer</h6>
                </div>
                <form action="{{ route('offerRfq') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input autocomplete="off" type="hidden" name="rfq_id" id="rfq_id">
                    <input autocomplete="off" type="hidden" name="rfq_name" id="rfq_name">

                    <div class="content__">
                        <div class="content__data">
                            <div class="list__">
                                <div class="elem__list">
                                    <p>Product</p>
                                    <div class="value transparent" style="background: #EBFBF1;">
                                        <p id="productName"></p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Packaging</p>
                                    <div class="value transparent" style="background: #EBFBF1;">
                                        <p id="packaging"></p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Palletization</p>
                                    <div class="value transparent" style="background: #EBFBF1;">
                                        <p id="palletization"></p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Processing Type</p>
                                    <div class="value transparent" style="background: #EBFBF1;">
                                        <p id="processing_type"></p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>RFQ Exp Date</p>
                                    <div class="input">
                                        <input autocomplete="off" readonly type="text" id="deadline"
                                            style="background: #EBFBF1;">
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>RFQ Volume</p>
                                    <div class="input with__text">
                                        <input autocomplete="off" READONLY id="quantity" type="text" value=""
                                            style="background: #EBFBF1;">
                                        <span id="unitR"></span>
                                    </div>
                                </div>
                                <!--  <div class="elem__list">
                                        <p>Price offered</p>
                                        <div class="input with__text">
                                            <input autocomplete="off" id="pricep" type="text"  value="" readonly style="background: #EBFBF1;">
                                            <span id="currency"></span>
                                        </div>
                                        @error('price_per_kg')
        <div class="alert alert-danger">{{ $message }}</div>
    @enderror
                                    </div> -->
                                <div class="elem__list">
                                    <p>RFQ Description</p>
                                    <div class="value transparent" style="background: #EBFBF1;" readonly>
                                        <p id="rfqDescription"></p>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Offer Exp Date</p>
                                    <div class="input">
                                        <input autocomplete="off" name="offer_exp_date" type="text"
                                            value="{{ old('offer_exp_date' ?? 'dd/mm/yyyy') }}" class="range__picker">
                                    </div>
                                </div>
                                @if ($errors->has('offer_exp_date'))
                                    <span class="error-message">{{ $errors->first('offer_exp_date') }}</span>
                                @endif
                                <div class="elem__list">
                                    <p>Volume</p>
                                    <div class="input with__text">
                                        <input onkeypress="return isNumber(event)" autocomplete="off" id="volume"
                                            type="text" name="volume" value="{{ old('volume' ?? '') }}"
                                            oninput="calculateSummary()">
                                        <span id="unitt"></span>
                                    </div>
                                </div>
                                @if ($errors->has('volume'))
                                    <span class="error-message">{{ $errors->first('volume') }}</span>
                                @endif
                                <div class="elem__list">
                                    <p>Price</p>
                                    <div class="input with__text">
                                        <input onkeypress="return isNumber(event)" autocomplete="off" id="pricePerKg"
                                            type="text" name="price_per_kg" value="{{ old('price_per_kg' ?? '') }}"
                                            oninput="calculateSummary()">
                                        <span id="currency"></span>
                                    </div>
                                </div>
                                @if ($errors->has('price_per_kg'))
                                    <span class="error-message">{{ $errors->first('price_per_kg') }}</span>
                                @endif
                                <div class="elem__list dropdown group__input top" id="portDropdown">
                                    <p>Port Origin</p>
                                    <a href="#"><span id="portOfUnloadingText" class="non__picked">Enter</span>
                                        <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                                    <div class="dropdown__wrapper" style="display:none;">
                                        <!-- Search Input -->
                                        <input autocomplete="off" class="search-input" type="text"
                                            id="portOriginSearch" placeholder="Search for ports..."
                                            value="{{ old('portOriginInput' ?? '') }}">

                                        <!-- Port List -->
                                        <ul id="portOriginList">
                                            @foreach ($ports as $port)
                                                <li class="portOriginItem"><a href="#"
                                                        onclick="setPortOfOrigin('{{ $port->PORT_NAME . ' / ' . $port->COUNTRY }}')">{{ $port->PORT_NAME . ' / ' . $port->COUNTRY }}</a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                @if ($errors->has('port_origin'))
                                    <span class="error-message">{{ $errors->first('port_origin') }}</span>
                                @endif

                                <div class="elem__list">
                                    <p>Port Destination</p>
                                    <div class="input">
                                        <input autocomplete="off" type="text" name="" value=""
                                            id="port_of_unloading" style="background: #EBFBF1;" readonly>
                                    </div>
                                </div>
                                <div class="elem__list">
                                    <p>Incoterm</p>
                                    <div class="input">
                                        <input autocomplete="off" type="text" name="incoterm"
                                            style="background: #EBFBF1;" readonly>
                                    </div>
                                </div>

                                <div class="elem__list">
                                    <p>RFQ Attachments</p>
                                    <div id="rfqAttachments">
                                        <!-- Attachments will be displayed here -->
                                    </div>
                                </div>
                            </div>

                            <div class="assets">
                                <div class="elem__asset">
                                    <p>Pictures</p>
                                    <input autocomplete="off" type="file" id="pictureUpload" name="pictures[]"
                                        multiple>
                                    <div class="grid__" id="selectedPictures"></div>
                                </div>

                                <div class="elem__asset">
                                    <p>Files</p>
                                    <input autocomplete="off" type="file" id="fileUpload" name="files[]" multiple>
                                    <div class="grid__" id="selectedFiles"></div>
                                </div>
                            </div>
                        </div>

                        <div class="summary">
                            <h6>Summary</h6>
                            <div class="summary__grid">
                                <div class="elem__summary">
                                    <p>Price</p>
                                    <span id="price"></span>
                                </div>
                                <div class="elem__summary">
                                    <p>Volume</p>
                                    <span id="volm"></span>
                                </div>
                                <div class="elem__summary">
                                    <p>Payment term</p>
                                    <span></span>
                                </div>
                                <div class="total__">
                                    <p>Total</p>
                                    <span id="total"></span>
                                </div>
                            </div>
                            <div class="controls">
                                <a href="#" class="regular-btn create__offer--button" id="submitBtn">Create
                                    Offer</a>
                                <a href="#" class="outline-btn close__modal">Cancel</a>
                            </div>
                            <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>
                    <input autocomplete="off" id="portOriginInput" name="port_origin" type="hidden">
                    <input autocomplete="off" name="port_destination" type="hidden">
                </form>
            </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:none;">
        <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>
                </div>
                <div class="group__input">
                    <input autocomplete="off" type="text" value="2,40">
                    <span>USD / 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>
    <div class="modal__wrapper higher" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box archive">
                <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="#" class="delete-btn">Confirm</a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        function isNumber(event) {
            var keycode = event.keyCode;
            if (keycode > 31 && (keycode < 48 || keycode > 57) && keycode != 46) {
                return false;
            }
            return true;
        }


        function setPortOfOrigin(value) {
            document.getElementById('portOriginInput').value = value;
        }

        function setPortOfDestination(value) {
            document.getElementById('portDestinationInput').value = value;
        }

        function calculateSummary() {
            var pricePerKg = parseFloat(document.getElementById('pricePerKg').value);
            var volume = parseFloat(document.getElementById('volume').value);
            var currencySymbol = document.getElementById('currency').textContent; // get the currency symbol
            var unitSymbol = document.getElementById('unitR').textContent; // get the currency symbol


            // Calculate total
            var total = (pricePerKg * volume).toFixed(2);

            // Update the summary elements with the calculated values
            document.getElementById('price').textContent = pricePerKg + ' ' + currencySymbol;
            document.getElementById('volm').textContent = volume + ' ' + unitSymbol;
            document.getElementById('total').textContent = total + ' ' + currencySymbol;
        }

        function triggerDownload(url, filename) {
            let link = document.createElement('a');
            link.href = url;
            link.download = filename;
            link.click();
        }

        function getRFQData(rfq_id) {
            $.ajax({
                url: base_url + "/getRFQData/" + rfq_id,
                success: function(response) {
                    if (response.result) {
                        sessionStorage.setItem('rfqData', JSON.stringify(response));
                        let product = response.product;
                        $('#rfq_id').val(product.id);
                        $('#rfq_name').val(product.default_product.name);
                        $('#palletization').text(product.palletization);
                        $('#packaging').text(product.packaging);
                        $('#processing_type').text(product.processing_type);
                        $('#currency').text(product.currency);
                        $('#currencyp').text(product.currency);
                        $('#unit').val(product.unit);
                        $('#unitt').text(product.unit);
                        $('#unitR').text(product.unit);
                        $('#port_of_unloading').val(product.port_of_unloading);
                        //  $('#pricePerKg').val(product.price);
                        //  $('#pricep').text(product.price);
                        $('input[name="port_destination"]').val(product.port_of_unloading);
                        $('#quantity').val(parseFloat(product.quantity).toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        }));
                        $('#deadline').val(product.deadline);
                        $('input[name="incoterm"]').val(product.incoterm);
                        $('#productName').text(product.default_product.name);
                        $('#rfqDescription').text(product.description);

                        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');
                        }
                        // Handle attachments
                        if (product.attachment && product.attachment.length && product.attachment[0] !== "{}") {
                            let attachmentsArray = JSON.parse(product.attachment);
                            let attachmentNames = response.attachment_names;

                            let attachmentsHTML = "";

                            attachmentsArray.forEach(function(attachment, index) {
                                // Create the download URL by using the filepath from the database
                                let downloadURL = '/download/' + attachment;
                                attachmentsHTML +=
                                    `<a href="#" onclick="triggerDownload('${downloadURL}', '${attachmentNames[index]}');">${attachmentNames[index]}</a><br>`;
                            });

                            $('#rfqAttachments').html(attachmentsHTML);
                        } else {
                            $('#rfqAttachments').html("<span>No attachments available.</span>");
                        }

                        $("#rfq_seller").show();
                    }
                },
                error: function(reasons) {
                    console.log(reasons);
                }
            });
        }

        function populateModalWithRFQData(data) {
            let product = data.product;
            $('#rfq_id').val(product.id);
            $('#rfq_name').val(product.default_product.name);
            $('#palletization').text(product.palletization);
            $('#currency').text(product.currency);
            $('#currencyp').text(product.currency);
            $('#unit').val(product.unit);
            $('#unitt').text(product.unit);
            $('#unitR').text(product.unit);
            // $('#pricePerKg').val(product.price);
            $('input[name="port_destination"]').val(product.port_of_unloading);
            $('#quantity').val(product.quantity);
            $('#deadline').val(product.deadline);
            $('input[name="incoterm"]').val(product.incoterm);
            $('#productName').text(product.default_product.name);
            $('#rfqDescription').text(product.description);

            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)');
            }

            if (product.attachment && product.attachment.length && product.attachment[0] !== "{}") {
                let attachmentsArray = JSON.parse(product.attachment);
                let attachmentNames = data.attachment_names;

                let attachmentsHTML = "";

                attachmentsArray.forEach(function(attachment, index) {
                    let downloadURL = '/download/' + attachment;
                    attachmentsHTML +=
                        `<a href="#" onclick="triggerDownload('${downloadURL}', '${attachmentNames[index]}');">${attachmentNames[index]}</a><br>`;
                });

                $('#rfqAttachments').html(attachmentsHTML);
            } else {
                $('#rfqAttachments').html("<span>No attachments available.</span>");
            }

            //  $("#rfq_seller").show();
        }
        $(document).ready(function() {
            $("#portOriginSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#portOriginList .portOriginItem").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
            var savedRFQData = JSON.parse(sessionStorage.getItem('rfqData'));
            if (savedRFQData) {
                populateModalWithRFQData(savedRFQData);
            }

            let oldPricePerKg = "{{ old('price_per_kg') }}";
            let oldVolume = "{{ old('volume') }}";
            let oldOfferExpDate = "{{ old('offer_exp_date') }}";
            let oldPortOrigin = "{{ old('port_origin') }}";
            let oldPortDestination = "{{ old('port_destination') }}";
            let oldIncoterm = "{{ old('incoterm') }}";

            // If old values exist, use them to populate the modal fields
            if (oldPricePerKg) {
                $('#pricePerKg').val(oldPricePerKg);
            }
            if (oldVolume) {
                $('#volume').val(oldVolume);
            }
            if (oldOfferExpDate) {
                $('input[name="offer_exp_date"]').val(oldOfferExpDate);
            }
            if (oldPortOrigin) {
                $('#portOriginInput').val(oldPortOrigin);
                $('#portOfUnloadingText').text(oldPortOrigin); // or any other way to display this on the modal
            }
            if (oldPortDestination) {
                $('input[name="port_destination"]').val(oldPortDestination);
            }
            if (oldIncoterm) {
                $('input[name="incoterm"]').val(oldIncoterm);
            }

        });
        @if (session('errors'))
            $(document).ready(function() {
                $(".offer").closest('.modal__wrapper').fadeIn(300);
                $('body,html').css("overflow-y", "hidden");
            });
        @endif
    </script>

    <style>
        .dropdown.group__input #selectedProduct.picked {
            color: #000;

        }

        #selected-certificates {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }

        #selected-certificates .certificate {
            background-color: #eee;
            color: #333;
            padding: 5px 10px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        #selected-certificates .certificate button {
            margin-left: 10px;
            background-color: #f66;
            color: #fff;
            border: none;
            border-radius: 50%;
            font-size: 12px;
            line-height: 12px;
            padding: 4px;
            cursor: pointer;
        }

        .disabled {
            pointer-events: none;
            opacity: 0.5;
            /* Optional: lowers the opacity to indicate a disabled state */
        }

        .search-input {
            width: 100%;
            padding: 7px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 10px;
            font-size: 16px;
            background-color: white;
            background-image: url("{{ asset('img/searchicon.png') }}");
            background-position: 515px 1px;
            background-repeat: no-repeat;
            transition: width 0.1s ease-in-out;
            background-size: contain;
        }

        .search-input:focus {
            width: 100%;
        }

        .error-message {
            color: red;
            font-size: 12px;
            margin-top: 5px;
        }

        .non-clickable {
            pointer-events: none;
            cursor: default;
            background-color: #d5f4c3;
            color: #fff;

        }
    </style>
@endsection