@extends('front.layout.app')

@section('css')
    <style type="text/css">
        .custom-btn-group .btn {
            background-color: #6444ef; /* Custom button color */
            color: white;
            border-radius: 50px;
            border: 2px solid white;
            padding: 10px 20px;
            font-size: 16px;
        }

        .custom-btn-group .btn.active {
            background-color: black;
            color: white;
        }

        .custom-btn-group {
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .btn + .btn {
            margin-left: 10px; /* Space between buttons */
        }
    </style>
@endsection

@section('content')

    <section class="templates templates-list">
        <div class="container">
            <div class="templates-list-header text-md-left text-center">
                <div class="custom-btn-group">
                    <button type="button" class="btn active" data-filter="0">All</button>
                    @foreach($filters as $id => $filter)
                        <button type="button" class="btn" data-filter="{{$id}}">{{$filter}}</button>
                    @endforeach


                </div>
            </div>
            <div class="templates-list-wrap">
                <div class="row" id="template-list">
                    @foreach($templates as $template)
                        <div class="col-md-6 templates-list-col">
                            <a class="templates-list-img" href="template/{{$template->slug}}/details">
                                <img src='{{$template->getFirstMediaUrl('main_image')}}' alt="{{$template->name}}">
                            </a>
                            <span class="templates-list-col-text mt-md-4 mt-3">
                            <a href="#" class="h3 templates-list-col-text-name">{{$template->name}}</a>
                            <a href="{{$template->url}}" target="_blank" class="templates-list-col-text-preview">
                                Preview
                            </a>
                        </span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

@endsection

@section('script')

    <script>
        $j = $
        $(document).ready(function() {
            // Handle button click event using jQuery
            $('.custom-btn-group .btn').click(function() {
                // Remove active class from all buttons
                $('.custom-btn-group .btn').removeClass('active');

                // Add active class to the clicked button
                $(this).addClass('active');

                // Get the filter value from the clicked button
                var filter = $(this).data('filter');

                // Send an AJAX request to filter templates
                $.ajax({
                    url: '{{ route('templates.filter') }}',
                    method: 'GET',
                    data: { filter: filter },
                    success: function(response) {
                        // Clear the current templates
                        $('#template-list').empty();

                        // Check if any templates were returned
                        if (response.length === 0) {
                            // If no templates, show a message
                            $('#template-list').append('<div class="col-md-12 text-center"><p>No templates available</p></div>');
                        } else {
                            // Loop through the filtered templates and append them to the list
                            $.each(response, function(index, template) {
                                var templateHtml = `
                        <div class="col-md-6 templates-list-col">
                            <a class="templates-list-img" href="template/${template.slug}/details">
                                <img src="${template.main_image_url}" alt="${template.name}">
                            </a>
                            <span class="templates-list-col-text mt-md-4 mt-3">
                                <a href="#" class="h3 templates-list-col-text-name">${template.name}</a>
                                <a href="${template.url}" target="_blank" class="templates-list-col-text-preview">
                                    Preview
                                </a>
                            </span>
                        </div>`;

                                $('#template-list').append(templateHtml);
                            });
                        }
                    },
                    error: function() {
                        alert('Unable to filter templates.');
                    }
                });
            });
        });
    </script>
@endsection