@extends('layouts.app')
@section('additionnalCSS')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/homepage.css') }}" >
@stop
@section('content')
    <div class="container mb-5">

        <div class="row">
            <div class="col-lg-3">
                <h3 class="my-4">Catégories</h3>
                <div class="list-group">
                        <a href="{{ route('catalog.index') }}" class="list-group-item">Tout ({{ $equipmentTotal }})</a>
                    @foreach ($categories as $category)
                        <a href="{{ route('catalog.getCategory', $category->id) }}" class="list-group-item">{{ $category->name }}</a>
                    @endforeach
                </div>
            </div>
            <!-- /.col-lg-3 -->

            <div class="col-lg-9">

                <div class="mt-4 container">
                    <h4>Inventaire</h4>
                </div>
                <div class="row">
                    <div class="col-lg-4 my-1">
                        <input id="search" type="text" class="form-control" placeholder="Rechercher">
                    </div>
                </div>
                <div class="row" id="results" data-category-id="{{ $categoryId }}">
                    @include('partials.equipment_cards', ['equipments' => $equipments])
                </div>
                <div id="pagination">
                    @include('partials.pagination', ['paginator' => $equipments])
                </div>
                <!-- /.row -->

            </div>
            <!-- /.col-lg-9 -->
        </div>
        <!-- /.row -->
    </div>
@stop
@section('additionnalScript')
    <script>
        $(function() {
            var searchTimeout = null;
            var $search = $("#search");
            var $results = $("#results");
            var $pagination = $("#pagination");
            var categoryId = $results.data("category-id");

            function getPageFromUrl(url) {
                if (!url) {
                    return 1;
                }
                var params = new URLSearchParams(url.split('?')[1] || '');
                return params.get('page') || 1;
            }

            function fetchEquipments(page) {
                $.get("{{ route('catalog.search') }}", {
                    query: $search.val(),
                    category_id: categoryId,
                    page: page || 1
                }).done(function(response) {
                    $results.html(response.html);
                    $pagination.html(response.pagination);
                });
            }

            $search.on("keyup", function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    fetchEquipments(1);
                }, 300);
            });

            $pagination.on("click", "a", function(event) {
                event.preventDefault();
                var page = getPageFromUrl($(this).attr("href"));
                fetchEquipments(page);
            });
        });
    </script>
@stop