@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>My RFQs</h2>
                        <p>You’ve requested {{ $rfqDifferenceThisMonth >= 0 ? '+' : '' }}{{ $rfqDifferenceThisMonth }} RFQ{{ $rfqDifferenceThisMonth != 1 ? 's' : '' }} this month vs the previous month</p>
                    </div>
                    -->
            <div class="center__">
                <div class="search-box" style="margin-left: 236px;">
                    <form action="{{ route('rfq.show') }}" method="GET">

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

                    </form>
                </div>
            </div>
            @if (auth()->user()->status == 'Accepted')
                <div class="right__">
                    <a href="#" class="regular-btn new__rfq--button">New RFQ</a>
                </div>
            @elseif(auth()->user()->status == 'Rejected')
                <div class="right__">
                    <p href="#" class="">You are Rejected, Contact Us for more informations </p>
                </div>
            @else
                <div class="right__">
                    <p href="#" class=" ">Waiting for acceptation to post Rfqs.</p>
                </div>
            @endif
        </div>
        <div class="grid__stats">
            <div class="elem">
                <div class="title">
                    <h6>Total Revenue</h6>
                </div>
                <div class="content__">
                    <h6>{{ number_format($currentRevenue, 2) }} USD</h6>
                    <!--
                            <p>
                    <span class="{{ $percentageRevenueDifference >= 0 ? 'up' : 'down' }}">
                        <img src="{{ asset($percentageRevenueDifference >= 0 ? 'img/uparrow.svg' : 'img/downarrow.svg') }}" alt="arrow">
                           @if ($percentageRevenueDifference == 0)
    <span>N/A</span>
@else
    {{ number_format($percentageRevenueDifference, 2) }}%
    @endif
                    </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>Id</th>
                    <th class="center">Name</th>
                    <th class="center">Port Destination</th>
                    <th class="center">Volume</th>
                    <th class="center">Offers</th>
                    <th class="center">Scout</th>
                    <th class="center">Created at</th>
                    <th class="center">Status</th>
                    <th class="center"></th>
                </tr>
                @foreach ($items as $rfq)
                    <tr style="cursor: pointer" onclick="window.location='{{ route('rfq.element', $rfq->id) }}'">
                        <td>
                            <p class="semibold">{{ $rfq->ref_id }}</p>
                        </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 style="margin: auto;">{{ $rfq->port_of_unloading ?? 'undefined' }}</p>
                            </div>
                        </td>
                        <td class="center">
                            <div class="double">
                                <p style="margin: auto;">
                                    {{ number_format($rfq->quantity, 2) . '  ' . $rfq->unit ?? 'undefined' }}</p>
                            </div>
                        </td>
                        <td class="center">
                            <p class="semibold">
                                {{ $rfq->offers->count() }}
                        </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">
                            @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">
                            <div class="action__button">
                                <a href="#"><img src="{{ asset('img/dots.svg') }}" alt="dots"></a>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </table>
        </div>
        <div class="pagination-wrapper">
            {{ $rfqs->onEachSide(1)->withQueryString()->links('pagination::bootstrap-4') }}
        </div>
    </div>
    <div class="modal__wrapper" style="display:none;">
        <div class="inner__modal">
            <div class="modal__box new__rfg">
                <a href="#" class="close__modal"><img src="{{ asset('img/close.svg') }}" alt="close"></a>
                <form action="{{ route('rfq.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input autocomplete="off" type="text" name="buyer_id" value="{{ auth()->user()->id }}" hidden>
                    <div class="head__">
                        <h6>Create new RFQ</h6>
                        <p>Fill all the necessary fields</p>
                    </div>
                    <div class="dropdown group__input">
                        <p>Category</p>
                        <a href="#"><span id="selectedCategory" class="non__picked">Select Category</span> <img
                                src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                        <div class="dropdown__wrapper" style="display:none;">
                            <input autocomplete="off" class="search-input" type="text" id="categorySearch"
                                placeholder="Search for categories...">
                            <ul id="categoryList">
                                @foreach ($categories as $category)
                                    <li class="categoryItem"><a href="#"
                                            onclick="setCategory('{{ $category->id }}', '{{ $category->name }}')">{{ $category->name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        @if ($errors->has('category_id'))
                            <span class="error-message">{{ $errors->first('category_id') }}</span>
                        @endif
                    </div>
                    <div class="dropdown group__input">
                        <p>Product</p>
                        <a href="#"><span id="selectedProduct" class="non__picked">Select Product</span> <img
                                src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                        <div class="dropdown__wrapper" id="productDropdown" style="display:none;">
                            <input autocomplete="off" class="search-input" type="text" id="productSearch"
                                placeholder="Search for products...">
                            <ul id="productList">
                                <!-- Products will be added dynamically here -->
                            </ul>
                        </div>
                        @if ($errors->has('product_id'))
                            <span class="error-message">{{ $errors->first('product_id') }}</span>
                        @endif
                    </div>
                    <div class="dropdown group__input">
                        <p>Processing Type</p>
                        <a href="#"><span id="selectedProcessingType" class="non__picked">Select Processing
                                Type</span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                        <div class="dropdown__wrapper" id="processingTypeDropdown" style="display:none;">
                            <input autocomplete="off" class="search-input" type="text" id="processingTypeSearch"
                                placeholder="Search for processing types...">
                            <ul id="processingTypeList">
                                <!-- Dynamically inserted based on selected Category -->
                            </ul>
                        </div>
                        @if ($errors->has('processing_type'))
                            <span class="error-message">{{ $errors->first('processing_type') }}</span>
                        @endif
                    </div>
                    <div class="group__input">
                        <p>Product Description</p>
                        <textarea name="description" id="" cols="30" rows="10"
                            placeholder="Enter a short description..">{{ old('description') }}</textarea>
                    </div>
                    <div class="group__input">
                        <p>Offer Exp. Date</p>
                        <div class="group__input">
                            <input autocomplete="off" name="deadline" type="text"
                                value=@if (old('deadline')) {{ old('deadline') }} @else "dd/mm/yyyy" @endif
                                class="range__picker ">
                        </div>
                        @if ($errors->has('deadline'))
                            <span class="error-message">{{ $errors->first('deadline') }}</span>
                        @endif
                    </div>

                    <div class="double__group">
                        <div class="dropdown group__input v__text">
                            <p>Target Price</p>
                            <input onkeypress="return isNumber(event)" autocomplete="off" name="price" type="text"
                                placeholder="Target Price" value="{{ old('price') }}">
                            <a href="#"><span class="symbol">
                                    @if (old('currency'))
                                        {{ old('currency') }}
                                    @else
                                        USD
                                    @endif
                                </span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                            <div class="dropdown__wrapper" style="display:none;">
                                <ul>
                                    <li><a href="#" onclick="setCurrency('USD')">USD</a></li>
                                    <li><a href="#" onclick="setCurrency('EUR')">EUR</a></li>
                                </ul>
                            </div>
                            @if ($errors->has('price'))
                                <span class="error-message">{{ $errors->first('price') }}</span>
                            @endif

                        </div>

                        <div class="dropdown group__input v__text">
                            <p>Max Quantity</p>
                            <input onkeypress="return isNumber(event)" autocomplete="off" name="quantity" type="number"
                                min="0" placeholder="Quantity" value="{{ old('quantity') }}">
                            <a href="#"><span class="">
                                    @if (old('unit'))
                                        @if (old('unit') == 'tonne')
                                            MT
                                        @else
                                            {{ old('unit') }}
                                        @endif
                                    @else
                                        Kg
                                    @endif
                                </span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                            <div class="dropdown__wrapper" style="display:none;">
                                <ul>
                                    <li><a href="#" onclick="setUnit('kg')">Kg</a></li>
                                    <li><a href="#" onclick="setUnit('tonne')">MT</a></li>
                                    <li><a href="#" onclick="setUnit('lb')">Lb</a></li>
                                </ul>
                            </div>
                            @if ($errors->has('quantity'))
                                <br>
                                <span class="error-message">{{ $errors->first('quantity') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="double__group">
                        <div class="dropdown group__input">
                            <p>Product Packaging</p>
                            <a href="#"><span class="non__picked">
                                    @if (old('packaging'))
                                        @foreach ($productPackaging as $pack)
                                            @if ($pack->id == old('packaging'))
                                                {{ $pack->name }}
                                            @endif
                                        @endforeach
                                    @else
                                        Enter
                                    @endif
                                </span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                            <div class="dropdown__wrapper" style="display:none;">
                                <ul>
                                    @foreach ($productPackaging as $productPackaging)
                                        <li><a href="#"
                                                onclick="setPackaging('{{ $productPackaging->id }}')">{{ $productPackaging->name }}</a>
                                        </li>
                                    @endforeach

                                </ul>
                            </div>
                        </div>
                        <div class="dropdown group__input">
                            <p>Incoterm</p>
                            <a href="#"><span class="non__picked">
                                    @if (old('incoterm'))
                                        {{ old('incoterm') }}
                                    @else
                                        Select Incoterm
                                    @endif
                                </span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                            <div class="dropdown__wrapper" style="display:none;">
                                <ul>
                                    <li><a href="#" onclick="setIncoterm('EXW - Ex Works')">EXW - Ex Works</a></li>
                                    <li><a href="#" onclick="setIncoterm('FCA - Free Carrier')">FCA - Free
                                            Carrier</a>
                                    </li>
                                    <li><a href="#" onclick="setIncoterm('FOB - Free On Board')">FOB - Free On
                                            Board</a></li>
                                    <li><a href="#" onclick="setIncoterm('CFR - Cost and Freight')">CFR - Cost and
                                            Freight</a></li>
                                    <li><a href="#" onclick="setIncoterm('CIF - Cost, Insurance, and Freight')">CIF
                                            -
                                            Cost, Insurance, and Freight</a></li>
                                    <li><a href="#" onclick="setIncoterm('DAP - Delivered at Place')">DAP -
                                            Delivered
                                            at Place</a></li>
                                    <li><a href="#" onclick="setIncoterm('DDP - Delivered Duty Paid')">DDP -
                                            Delivered
                                            Duty Paid</a></li>
                                    <li><a href="#" onclick="setIncoterm('Other')">Other -
                                            Delivered
                                            Duty Paid</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="dropdown group__input">
                        <p>Palletization</p>
                        <a href="#"><span class="non__picked">
                                @if (old('palletization'))
                                    @if (old('palletization') == 'US')
                                        US (40"x48")
                                    @elseif(old('palletization') == 'EU')
                                        EU (800mmx1200mm)
                                    @else
                                        EU/Asia (1000mmx12000mm)
                                    @endif
                                @else
                                    Select Palletization
                                @endif
                            </span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                        <div class="dropdown__wrapper" style="display:none;">
                            <ul>
                                <li><a href="#" onclick="setPalletization('None')">None</a></li>
                                <li><a href="#" onclick="setPalletization('US')">US (40"x48")</a>
                                </li>
                                <li><a href="#" onclick="setPalletization('EU/Asia')">EU/Asia
                                        (1000mmx12000mm)</a></li>
                                <li><a href="#" onclick="setPalletization('EU')">EU (800mmx1200mm)</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="dropdown group__input">
                        <p>Required Certificates</p>
                        <a href="#"><span class="non__picked">Enter</span> <img src="{{ asset('img/arrow.svg') }}"
                                alt="arrow"></a>
                        <div class="dropdown__wrapper" style="display:none;">
                            <ul>
                                @foreach ($certifications as $certification)
                                    <li><a href="#"
                                            onclick="addCertificate('{{ $certification->name }}')">{{ $certification->name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div id="selected-certificates">
                            <!-- Selected certificates will appear here -->
                        </div>
                    </div>

                    <div class="dropdown group__input top" id="portDropdown">
                        <p>Port Destination</p>
                        <a href="#"><span id="portOfUnloadingText" class="non__picked">
                                @if (old('port_of_unloading'))
                                    @foreach ($ports as $port)
                                        @if ($port->PORT_NAME . ' / ' . $port->COUNTRY == old('port_of_unloading'))
                                            {{ $port->PORT_NAME . ' / ' . $port->COUNTRY }}
                                        @endif
                                    @endforeach
                                @else
                                    Enter
                                @endif
                            </span> <img src="{{ asset('img/arrow.svg') }}" alt="arrow"></a>
                        <div class="dropdown__wrapper" style="display:none;">
                            <input autocomplete="off" class="search-input" type="text" id="portSearch"
                                placeholder="Search for ports...">
                            <ul id="portList">
                                @foreach ($ports as $port)
                                    <li class="portItem">
                                        <a href="#"
                                            onclick="setPortOfUnloading('{{ $port->PORT_NAME . ' / ' . $port->COUNTRY }}')">{{ $port->PORT_NAME . ' / ' . $port->COUNTRY }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="group__input" id="addressGroup">
                        <p>Address</p>
                        <input autocomplete="off" id="addressInput" name="address" type="text"
                            placeholder="Enter The Address" value="{{ old('address') }}">
                    </div>


                    <div class="group__input">
                        <p>Specifications attachment</p>
                        <div class="drag">
                            <input autocomplete="off" type="file" name="attachment[]" multiple>
                            <div class="drag__inner">
                                <span><img src="{{ asset('img/dragicon.svg') }}" alt="drag"></span>
                                <p>Drag & drop files or <a href="#">browse files</a></p>
                            </div>
                        </div>
                    </div>
                    <div id="fileInfo"></div>
                    <div class="double__controls">
                        <a href="#" class="outline-btn cancel__button">Cancel</a>
                        <button class="regular-btn" type="submit">Confirm</button>
                    </div>
                    <input autocomplete="off" id="unitInput" name="unit" type="hidden"
                        value="{{ old('unit') }}">
                    <input autocomplete="off" id="packagingInput" name="packaging" type="hidden"
                        value="{{ old('packaging') }}">
                    <input autocomplete="off" id="incotermInput" name="incoterm" type="hidden"
                        value="{{ old('incoterm') }}">
                    <input autocomplete="off" id="portOfUnloadingInput" name="port_of_unloading" type="hidden"
                        value="{{ old('port_of_unloading') }}">
                    <input autocomplete="off" id="product_id" name="product_id" type="hidden"
                        value="{{ old('product_id') }}">
                    <input autocomplete="off" id="processing_type" name="processing_type" type="hidden"
                        value="{{ old('processing_type') }}">
                    <input autocomplete="off" id="category_id" name="category_id" type="hidden"
                        value="{{ old('category_id') }}">
                    <input autocomplete="off" id="certificatesInput" name="certifications" type="hidden"
                        value="{{ old('certifications') }}">
                    <input autocomplete="off" id="palletizationInput" name="palletization" type="hidden"
                        value="{{ old('palletization') }}">
                    <input autocomplete="off" id="currencyInput" name="currency" type="hidden"
                        value="{{ old('currency') }}">
                </form>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {

            // Old values
            var oldCategoryId = "{{ old('category_id') }}";
            var oldProductId = "{{ old('product_id') }}";


            if (oldCategoryId) {
                $('#category_id').val(oldCategoryId);
                fetchProducts(oldCategoryId); // Fetch products for the old category
            }

            if (oldProductId) {
                $.when(fetchProducts(oldCategoryId)).then(function() {
                    $('#product_id').val(oldProductId);
                    fetchProductDetails(oldProductId);
                });
            }

            function fetchProducts(categoryId) {
                if (categoryId) {
                    $.ajax({
                        url: base_url + '/products/category/' + categoryId,
                        type: 'GET',
                        success: function(response) {
                            var productList = document.getElementById('productList');
                            productList.innerHTML = ''; // Clear existing options

                            response.products.forEach(function(product) {
                                var li = document.createElement('li');
                                var a = document.createElement('a');
                                a.href = '#';
                                a.onclick = function(event) {
                                    event.preventDefault();
                                    event.stopPropagation();
                                    setProduct(product.id, product.name);
                                };
                                a.textContent = product.name;
                                li.appendChild(a);
                                productList.appendChild(li);

                                if (oldProductId && oldProductId === product.id.toString()) {
                                    setProduct(product.id, product.name);
                                }
                            });
                        },
                        error: function(reason) {
                            console.log(reason);
                        }
                    });
                } else {
                    document.getElementById('productList').innerHTML = '';
                }
            }

        });

        var allFiles = [];

        $(document).ready(function() {
            $('input[type="file"]').change(function(e) {
                var newFiles = e.target.files; // gets the newly selected files

                // append the newly selected files to the allFiles array
                for (var i = 0; i < newFiles.length; i++) {
                    allFiles.push(newFiles[i]);
                }

                var fileInfo = '';

                // display information for all files
                for (var i = 0; i < allFiles.length; i++) {
                    var fileName = allFiles[i].name; // gets the file name
                    var fileSize = allFiles[i].size / 1024 / 1024;
                    fileSize = fileSize.toFixed(2); // rounds the file size to two decimal places

                    fileInfo += 'File name: ' + fileName + ', File size: ' + fileSize + ' MB<br>';
                }

                $('#fileInfo').html(fileInfo);
            });
        });
    </script>

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


        function setPackaging(value) {
            document.getElementById('packagingInput').value = value;
        }

        function setIncoterm(incoterm) {
            document.getElementById('incotermInput').value = incoterm;

            // Access the port of unloading and address fields
            let portOfUnloadingInput = document.getElementById('portOfUnloadingInput');
            let addressInput = document.getElementById('addressInput');
            let portDropdown = document.getElementById('portDropdown');
            let addressGroup = document.getElementById('addressGroup');

            switch (incoterm) {
                case 'EXW - Ex Works':
                    // disable both fields and port dropdown
                    portOfUnloadingInput.disabled = true;
                    addressInput.disabled = true;
                    portDropdown.classList.add('disabled');
                    addressGroup.classList.add('disabled');
                    break;
                case 'FCA - Free Carrier':
                    // disable port of unloading and port dropdown, enable address
                    portOfUnloadingInput.disabled = true;
                    addressInput.disabled = false;
                    portDropdown.classList.add('disabled');
                    addressGroup.classList.remove('disabled');
                    break;
                case 'CFR - Cost and Freight':
                case 'CIF - Cost, Insurance, and Freight':
                case 'FOB - Free On Board':
                    // enable port of unloading and port dropdown, disable address
                    portOfUnloadingInput.disabled = false;
                    addressInput.disabled = true;
                    portDropdown.classList.remove('disabled');
                    addressGroup.classList.add('disabled');
                    break;
                case 'DAP - Delivered at Place':
                case 'DDP - Delivered Duty Paid':
                    // enable both fields and port dropdown
                    portOfUnloadingInput.disabled = false;
                    addressInput.disabled = false;
                    portDropdown.classList.remove('disabled');
                    addressGroup.classList.remove('disabled');
                    break;
                default:
                    // default behavior can be customized as per your requirement
                    portOfUnloadingInput.disabled = false;
                    addressInput.disabled = false;
                    portDropdown.classList.remove('disabled');
                    addressGroup.classList.remove('disabled');
                    break;
            }
        }

        function setPortOfLanding(value) {
            document.getElementById('portOfLandingInput').value = value;
        }

        function setPortOfUnloading(value) {
            document.getElementById('portOfUnloadingInput').value = value;
        }

        function setCurrency(value) {
            document.getElementById('currencyInput').value = value;
        }

        function setPalletization(value) {
            document.getElementById('palletizationInput').value = value;
        }

        function setUnit(value) {
            document.getElementById('unitInput').value = value;

        }

        function addCertificate(certification) {
            // Check if the certificate is already selected
            var alreadySelected = false;
            $('#selected-certificates .certificate').each(function() {
                if ($(this).text().replace('x', '') == certification) {
                    alreadySelected = true;
                    return;
                }
            });

            // If the certificate is already selected, don't add it again
            if (alreadySelected) {
                return;
            }

            // Otherwise, create a new certificate element and add it to the list
            var certificateElement = $('<span>')
                .addClass('certificate')
                .text(certification)
                .append($('<button>')
                    .text('x')
                    .on('click', function() {
                        $(this).parent().remove();
                        updateCertificatesInput();
                    }));

            $('#selected-certificates').append(certificateElement);
            updateCertificatesInput();
        }

        function updateCertificatesInput() {
            var certificates = [];
            $('#selected-certificates .certificate').each(function() {
                certificates.push($(this).text().replace('x', ''));
            });
            $('#certificatesInput').val(JSON.stringify(certificates));
        }

        $(document).ready(function() {
            var oldCertificates = {!! old('certifications', '[]') !!};

            oldCertificates.forEach(function(cert) {
                addCertificate(cert);
            });
        });

        var categories = @json($categories);
        var processingTypes = @json($ProcessingTypes);
        // Set old category if present
        var oldCategoryId = "{{ old('category_id') }}";
        if (oldCategoryId) {
            var categoryName = getCategoryNameById(oldCategoryId);
            setCategory(oldCategoryId, categoryName); // Using the function to set both ID and Name
            fetchProducts(oldCategoryId);
        }

        function setProcessingType(processingTypeId, processingTypeName) {
            document.getElementById('selectedProcessingType').textContent = processingTypeName;
            document.getElementById('selectedProcessingType').dataset.processingTypeId = processingTypeId;
            $('#processingTypeDropdown').hide(); // Using jQuery to hide the dropdown
        }

        function setCategory(categoryId, categoryName) {
            document.getElementById('selectedCategory').textContent = categoryName;
            document.getElementById('selectedCategory').dataset.categoryId = categoryId;
            fetchProducts(categoryId);
            updateProcessingTypes(categoryId); // This will update the processing types dropdown
            document.getElementById('category_id').value = categoryId;
            // Reset the product ID when a new category is selected
            document.getElementById('product_id').value = '';
        }

        function updateProcessingTypes(categoryId) {
            var filteredProcessingTypes = processingTypes.filter(function(type) {
                return type.category_id == categoryId;
            });

            // Clear the existing processing types list
            var processingTypeList = document.getElementById('processingTypeList');
            processingTypeList.innerHTML = '';

            // Append the filtered processing types to the dropdown
            filteredProcessingTypes.forEach(function(type) {
                var listItem = document.createElement('li');
                listItem.className = "processingTypeItem";

                var anchor = document.createElement('a');
                anchor.href = "#";
                anchor.textContent = type.name;
                anchor.onclick = function(event) {
                    event.preventDefault();
                    event.stopPropagation(); // This will stop the event from propagating up to parent elements
                    setProcessingType(type.id, type.name);
                };

                listItem.appendChild(anchor);
                processingTypeList.appendChild(listItem);
            });

            // Show the dropdown after populating
            $('#processingTypeDropdown').show();
        }

        $(document).click(function(event) {
            if (!$(event.target).closest('.dropdown').length) {
                $('#productDropdown').hide();
                $('#processingTypeDropdown').hide();
            }
        });


        function setProcessingType(processingTypeId, processingTypeName) {
            console.log("Setting processing type to:", processingTypeName);
            document.getElementById('selectedProcessingType').textContent = processingTypeName;
            document.getElementById('selectedProcessingType').dataset.processingTypeId = processingTypeId;
            document.getElementById('processing_type').value = processingTypeName;
            $('#processingTypeDropdown').hide(); // Using jQuery to hide the dropdown
        }

        function getCategoryNameById(categoryId) {
            for (var i = 0; i < categories.length; i++) {
                if (categories[i].id == categoryId) {
                    return categories[i].name;
                }
            }
            return null; // Return null if category not found
        }

        function fetchProducts(categoryId) {
            if (categoryId) {
                $.ajax({
                    url: base_url + '/products/category/' + categoryId,
                    type: 'GET',
                    success: function(response) {
                        var productList = document.getElementById('productList');
                        productList.innerHTML = '';

                        response.products.forEach(function(product) {
                            var li = document.createElement('li');
                            var a = document.createElement('a');
                            a.href = '#';
                            a.onclick = function(event) {
                                event.preventDefault();
                                event.stopPropagation();
                                setProduct(product.id, product.name);
                            };
                            a.textContent = product.name;
                            li.appendChild(a);
                            productList.appendChild(li);
                        });
                    },
                    error: function(reason) {
                        console.log(reason);
                    }
                });
            } else {
                document.getElementById('productList').innerHTML = '';
            }
        }

        function setProduct(productId, productName) {
            document.getElementById('selectedProduct').textContent = productName;
            document.getElementById('selectedProduct').dataset.productId = productId;
            document.getElementById('product_id').value = productId;
            $('#productDropdown').hide(); // Using jQuery to hide the dropdown
        }
    </script>
    <script>
        function calculateSummary() {
            var pricePerKg = parseFloat(document.getElementById('pricePerKg').value);
            var volume = parseFloat(document.getElementById('volume').value);
            var currencySymbol = document.getElementById('currency').textContent;
            var unitSymbol = document.getElementById('unitInput').textContent;


            // 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;
        }
        $(document).ready(function() {
            $("#categorySearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#categoryList .categoryItem").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
        $(document).ready(function() {
            $("#portSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#portList .portItem").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
        // Product Search
        $("#productSearch").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#productList li").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
        @if (session('errors'))
            $(document).ready(function() {
                $(".new__rfg").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;
        }

        .header__ .center__ {
            display: flex;
            align-items: center;
        }
    </style>
@endsection