@extends('layout.ui-main')
@section('content')

    <div class="row">
        <div class="col-lg-12 product--filter d-flex justify-content-between pt-0 pt-lg-5">
            <div class="product--filter--all">
                <span>HEPSİ</span>
            </div>
            <div class="d-flex flex-wrap">
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
                <span>E</span>
                <span>F</span>
                <span>G</span>
                <span>H</span>
                <span>I</span>
                <span>K</span>
                <span>L</span>
                <span>M</span>
                <span>N</span>
                <span>O</span>
                <span>P</span>
                <span>Q</span>
                <span>R</span>
                <span>S</span>
                <span>T</span>
                <span>V</span>
                <span>X</span>
                <span>Y</span>
                <span>Z</span>
            </div>
        </div>
    </div>
    <div class="row justify-content-center product--search pt-5">
        <div class="col-lg-6">
            <form action="">
                <div class="row">
                    <div class="col-lg-6">
                        <select class="custom-select product-select" name="searchField">
                            <option value="name" selected="">Ad</option>
                            <option value="form">Form</option>
                            <option value="active_ingredient">Etkin Madde</option>
                            <option value="commercial_form">Ticari Şekli</option>
                            <option value="treatment_group">Tedavi Grubu</option>
                        </select>
                    </div>
                    <div class="col-lg-6">

                        <div class="input-group align-items-end">
                            <input type="text" class="form-control mb-0" id="inlineFormInputGroupUsername"
                                placeholder="Ara">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round"
                                        stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <circle cx="10" cy="10" r="7" />
                                        <line x1="21" y1="21" x2="15" y2="15" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="pt-5 pb-5 product--list" id="product-list">
        @foreach($products as $product)
        @php
        $additionalInfo = json_decode($product->additional_info_json ?? '{}', true);
        @endphp
        <div class="product--item shadow">
            <div class="product--item--head">
                <h3>{{ $product->name }}</h3>
                <span>{{ $product->description }}</span>
            </div>
            <div class="product--item--body">
                <div class="row mb-2 lg-mb-0">
                    <div class="col-5 col-lg-5">Form</div>
                    <div class="col-7 col-lg-7">{{ $additionalInfo['form'] ?? '-' }}</div>
                </div>
                <div class="row mb-2 lg-mb-0">
                    <div class="col-5 col-lg-5">Etkin Madde</div>
                    <div class="col-7 col-lg-7">{{ $additionalInfo['active_ingredient'] ?? '-' }}</div>
                </div>
                <div class="row mb-2 lg-mb-0">
                    <div class="col-5 col-lg-5">Ticari Şekli</div>
                    <div class="col-7 col-lg-7">{{ $additionalInfo['commercial_form'] ?? '-' }}</div>
                </div>
                <div class="row mb-2 lg-mb-0">
                    <div class="col-5 col-lg-5">Tedavi Grubu</div>
                    <div class="col-7 col-lg-7">{{ $additionalInfo['treatment_group'] ?? '-' }}</div>
                </div>
                <div class="row mb-2 lg-mb-0">
                    <div class="col-5 col-lg-5">KÜB</div>
                    <div class="col-7 col-lg-7">
                        <a href="#">PDF</a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <div class="row justify-content-center pb-5">
        <div class="col-lg-6">
            <div class="product--pagination d-flex justify-content-center pb-5">
                <ul id="pagination"></ul>
            </div>
        </div>
    </div>

    <button type="button" class="btn btn-primary d-none saglikcalisaniUyari" data-toggle="modal"
        data-target="#warningModal">
        Sağlık çalışanı modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <strong class="color--blue">Dikkat! Bu bölüm yalnızca sağlık çalışanları için tasarlanmıştır. <br>
                        Sağlık çalışanı değilseniz ''Hayır'' seçeneği üzerinden anasayfaya dönebilirsiniz.</strong>
                </div>
                <div class="modal-footer">
                    <a href="" class="site__btn site__btn--bg--blue color--white" data-dismiss="modal">Evet</a>
                    <a href="/" class="site__btn site__btn--bg--blue color--white">Hayır</a>
                </div>
            </div>
        </div>
    </div>

    @endsection
    
    @section('scripts')
    <script>
        $(document).ready(function() {
            console.log('JQuery version:', $.fn.jquery);
            // Modal açılışı
            $('.saglikcalisaniUyari').click();

            var itemsPerPage = 12;
            var $allProducts = $('.product--item');
            var $products = $allProducts;
            var totalItems = $products.length;
            var totalPages = Math.ceil(totalItems / itemsPerPage);
            var activeLetter = null;

            // Pagination fonksiyonları
            function showPage(page) {
                $products.hide();
                var start = (page - 1) * itemsPerPage;
                var end = start + itemsPerPage;
                $products.slice(start, end).show();

                // Aktif sayfa işaretlemesi
                $('#pagination li').removeClass('active');
                $('#pagination li[data-page="' + page + '"]').addClass('active');
            }

            function renderPagination() {
                var $pagination = $('#pagination');
                $pagination.empty();
                for (var i = 1; i <= totalPages; i++) {
                    $pagination.append('<li data-page="' + i + '" style="display:inline-block; margin:0 5px;"><a href="#">' + i + '</a></li>');
                }
            }

            // Gelişmiş filtreleme fonksiyonu
            function filterProducts() {
                var searchField = $('.product-select').val();
                var searchText = $('#inlineFormInputGroupUsername').val().toLowerCase();

                $allProducts.each(function() {
                    var $item = $(this);
                    var matched = false;

                    // Harf filtresi
                    var productName = $item.find('.product--item--head h3').text().trim();
                    var letterMatch = true;
                    if (activeLetter && activeLetter !== 'HEPSİ') {
                        letterMatch = productName.charAt(0).toUpperCase() === activeLetter;
                    }

                    // Alan bazlı arama
                    if (searchField === 'name') {
                        matched = $item.find('.product--item--head h3').text().toLowerCase().includes(searchText);
                    } else if (searchField === 'form') {
                        matched = $item.find('.product--item--body .row:nth-child(1) .col-lg-7').text().toLowerCase().includes(searchText);
                    } else if (searchField === 'active_ingredient') {
                        matched = $item.find('.product--item--body .row:nth-child(2) .col-lg-7').text().toLowerCase().includes(searchText);
                    } else if (searchField === 'commercial_form') {
                        matched = $item.find('.product--item--body .row:nth-child(3) .col-lg-7').text().toLowerCase().includes(searchText);
                    } else if (searchField === 'treatment_group') {
                        matched = $item.find('.product--item--body .row:nth-child(4) .col-lg-7').text().toLowerCase().includes(searchText);
                    }

                    // Hem harf hem arama birlikte
                    $item.toggle((matched || searchText === '') && letterMatch);
                });

                // Filtrelenmiş ürünleri yeniden seç
                $products = $('.product--item:visible');
                totalItems = $products.length;
                totalPages = Math.ceil(totalItems / itemsPerPage);

                // Pagination'ı güncelle
                renderPagination();
                showPage(1);
            }

            // Başlangıçta tüm ürünleri ve pagination'ı göster
            renderPagination();
            showPage(1);

            // Sayfa tıklama eventi
            $('#pagination').on('click', 'li', function(e) {
                e.preventDefault();
                var page = $(this).data('page');
                showPage(page);
            });

            // Arama input ve select eventleri
            $('#inlineFormInputGroupUsername').on('input', filterProducts);
            $('.product-select').on('change', filterProducts);

            // Harf filtresi eventleri
            $('.product--filter span').css('cursor', 'pointer');
            $('.product--filter span').on('click', function() {
                var letter = $(this).text().trim().toUpperCase();
                activeLetter = letter === 'HEPSİ' ? null : letter;

                // Aktif harfi vurgula
                $('.product--filter span').removeClass('active');
                $(this).addClass('active');

                filterProducts();
            });

            // İlk başta "HEPSİ" aktif olsun
            $('.product--filter span').first().addClass('active');
        });
    </script>
    <style>
        .product--filter span.active {
            font-weight: bold;
            color: #007bff;
            text-decoration: underline;
        }
        #pagination li.active a {
            font-weight: bold;
            color: #007bff;
            text-decoration: underline;
        }
    </style>
    @endsection