@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/products/index.css') }}">

    <style>
        /* .expand {
            max-height: 0 !important;
        }

        .expand.expanded {
            max-height: 190px !important;
        } */
    </style>
@endsection

@section('title', __('global.meta_title'))
@section('description', __('global.meta_description'))
@section('keywords', __('global.meta_keywords'))

@section('content')
{{-- <header class="page-header">
    <div class="video-bg">
        <video src="{{ asset('assets/frontend/videos/about.mp4') }}" muted loop autoplay></video>
    </div>

    <div>
        <div class="container">
            <h1 class="mb-5">{{ __('global.sprenty') }}</h1>
            <p>{{ __('global.good_plan_bit_luck') }}</p>
        </div>

        <aside class="left-side">
            <ul class="d-flex flex-column">
                <li class="my-2"><a href="https://www.facebook.com/Sprenty" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
                <li class="my-2"><a href="https://www.instagram.com/sprenty.ge/" target="_blank"><i class="fa fa-instagram"></i></a></li>
                <li class="my-2"><a href="https://www.linkedin.com/company/sprenty/" target="_blank"><i class="fa fa-linkedin"></i></a></li>
                <li class="my-2">
                    <a href="https://www.tiktok.com/@sprenty.com" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="20" height="20" viewBox="0 0 512 512" id="icons"><path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"/></svg>
                    </a>
                </li>
            </ul>
        </aside>

        <div class="scroll-down"><small>{{ __('global.scroll_down') }}</small><span></span></div>
    </div>
</header> --}}

<section class="content-section no-bottom-spacing" style="background: #242526;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="section-title text-center">
                    <h6>Check Out All Our Venues</h6>
                    <h2>All Venues</h2>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container-fluid px-0">
        <div class="row mx-3 mb-5" id="search">
            <div class="form-group col-lg-3">
                <select name="category" id="category-select" class="form-control">
                    <option disabled selected>{{ __('global.choose_sport') }}</option>
                    <option value="all">{{ __('global.all') }}</option>

                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ unserialize($category->title)['title_'.app()->getLocale()] }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-lg-3">
                <select name="district" id="district-select" class="form-control" >
                    <option disabled selected>{{ __('global.choose_district') }}</option>
                    <option value="all">{{ __('global.all') }}</option>

                    @foreach($districts as $district)
                        <option value="{{ $district->id }}">{{ unserialize($district->title)['title_'.app()->getLocale()] }}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="form-group col-lg-3">
                <input class="form-control" type="text" placeholder="Search">
            </div>

            <div class="form-group col-lg-3">
                <button class="btn btn-block btn-secondary" data-bs-toggle="modal" data-bs-target="#advancedSearchModal">
                    <i class="fa fa-sliders mr-3"></i> ფილტრები
                </button>
            </div>

            <div class="form-group col-lg-3 d-none d-lg-block"></div>
            <div class="form-group col-lg-3 d-none d-lg-block"></div>
            <div class="form-group col-lg-3 d-none d-lg-block"></div>
            <div class="form-group col-lg-3 col-12">
                <div class="d-flex justify-content-end">
                    <button id="search-button" class="btn btn-block btn-primary">Search</button>
                </div>
            </div>
        </div>

        <div id="products-container" class="row g-0 mx-3">
            @include('pages.products.product-items', ['products' => $products])
        </div>
    </div>
</section>

<!-- Modal -->
<div class="modal fade" id="advancedSearchModal" tabindex="-1" aria-labelledby="advancedSearchModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="advancedSearchModal">{{ __('global.additional_filters') }}</h5>
            <i class="fa fa-times modal-close" data-bs-dismiss="modal" aria-label="Close"></i>
        </div>
        <div class="modal-body">
            <div class="row">
                @foreach($attributes as $attribute)
                    @if($attribute->type == 'checkbox')
                        <div class="col-lg-6 col-12">
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" name="additional_checkboxes[]" value="{{ $attribute->id }}"/>
                                    <span class="fa fa-check mr-2"></span>
                                    
                                    <p class="d-inline">{{ unserialize($attribute->title)['title_'.app()->getLocale()] }}</p>
                                </label>
                            </div>
                        </div>
                    @endif
                @endforeach

                
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('global.save') }}</button>
        </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
	<script>
        $(document).ready(function(){
            $('#search-button').click(function(){
                var query = $('#search input').val();
                var category = $('#category-select').val();
                var district = $('#district-select').val();
                // var city = $('#city-select').val();
                var additionalCheckboxes = [];

                $('input[name="additional_checkboxes[]"]:checked').each(function() {
                    additionalCheckboxes.push($(this).val());
                });

                $.ajax({
                    url: '{{ route("products.search") }}',
                    method: 'GET',
                    data: {
                        query: query,
                        category: category,
                        district: district,
                        // city: city,
                        additional_checkboxes: additionalCheckboxes
                    },
                    success: function(response){
                        $('#products-container').html(response.html);
                    }
                });
            });

            // $('.products.pagination').removeClass('d-flex');
            // $('.products.pagination').addClass('d-none');

            $('.content-box').on('click', function() {
                if ($(window).width() <= 768) {
                    var expandSection = $(this).find('.expand');
                    if (expandSection.css('max-height') === '190px') {
                        expandSection.css('max-height', '0');
                    } else {
                        expandSection.css('max-height', '190px');
                    }
                }
            });
        });
    </script>
@endsection