@extends('web.layouts.admin')

@section('title', config('app.name'))

@section('content')

<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa {{$page_icon}}"></i> {{$page_title}}</h1>
        </div>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary modal-link" data-url="{{route('theme.form')}}">ADD</button>
        </div>
    </div>
    <!--Start Filters -->
    <div class="filters-wrapper d-flex flex-wrap justify-content-end mb-3">
        <!-- Template -->
        <select id="templateFilter" class="form-control filter-select">
            <option value="">All Templates</option>
            @foreach($templates as $template)
            <option value="{{ $template->id }}">{{ $template->title }}</option>
            @endforeach
        </select>
        <button id="clearFilters" class="btn btn-secondary">Clear</button>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="table-responsive">
                        <table class="table table-hover categoryTable table-bordered data-table-class" id="myDataTable" data-url="{{ $table_url }}">

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@stop

@section('custom-js')
<script>
    $(document).ready(function() {
        const ensureDT = setInterval(function() {
            if (window.datatablePointer && datatablePointer['myDataTable']) {
                clearInterval(ensureDT);

                let table = datatablePointer['myDataTable'];
                let settings = table.settings()[0];
                let originalAjaxData = settings.ajax.data;

                settings.ajax.data = function(d) {
                    if (typeof originalAjaxData === 'function') {
                        originalAjaxData(d);
                    }
                    d.template_id = $('#templateFilter').val();
                };

                // ✅ On Filter Change
                $('#templateFilter').on('change', function() {
                    table.ajax.reload();
                });

                // ✅ Clear Filters
                $('#clearFilters').on('click', function() {
                    $('#templateFilter').val('');
                    table.ajax.reload();
                });
            }
        }, 100);
    });
</script>
@stop

<style>
    .filters-wrapper {
        gap: 8px;
    }

    .filter-select {
        width: auto;
        min-width: 150px;
        max-width: 200px;
    }
</style>