@extends('layouts.app')

@section('title', 'Service Request Templates')

@section('content')

    {{-- Fixed Top Action Bar --}}
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Service Request Templates</div>

        <div class="d-flex align-items-center">
            @can('HoReCa Service Request Templates create')
                <a href="{{ route('horeca.service-request-templates.create') }}" data-toggle="tooltip" title="Add">
                    <i class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
                </a>
            @endcan

            <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save"></i>
            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit"></i>
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete"></i>

            <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" title="Close"></i>

            <!-- Column Visibility Dropdown Button -->
            <div class="dropdown">
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    id="columnVisibilityDropdown" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false" title="Column Visibility"></i>
                <div class="dropdown-menu dropdown-menu-right columns-menu" aria-labelledby="columnVisibilityDropdown"
                    style="min-width: 200px; max-height: 400px; overflow-y: auto;">
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="name" checked>
                            Template Name</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="category" checked>
                            Category</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="description" checked>
                            Description Template</label></li>
                    <li><label class="px-2"><input type="checkbox" class="columnCheckbox" data-column="action" checked>
                            Actions</label></li>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('horeca.service-request-templates.index') }}" method="GET">
                <div class="row">
                    {{-- Search Input --}}
                    <div class="col-md-6">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Search by template name..." name="search"
                                value="{{ request('search') }}" id="search_input">
                        </div>
                    </div>

                    {{-- Bulk Actions Dropdown --}}
                    <div class="col-md-2">
                        <div class="dropdown">
                            <button class="btn btn-de-dark filter-btn dropdown-toggle w-100" type="button"
                                id="bulkActionsButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                disabled>
                                Bulk Actions
                            </button>
                            <div class="dropdown-menu" aria-labelledby="bulkActionsButton">
                                <a class="dropdown-item" href="#">Delete Selected</a>
                            </div>
                        </div>
                    </div>

                    {{-- Filters Toggle Button --}}
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-de-dark filter-btn" data-toggle="collapse"
                            data-target="#filtersCollapse" aria-expanded="false" aria-controls="filtersCollapse">
                            Filters
                        </button>
                    </div>

                    {{-- Per Page Select --}}
                    <div class="col-md-2">
                        <select name="perPage" class="form-control" onchange="this.form.submit()">
                            <option value="10" {{ request('perPage', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                            <option value="20" {{ request('perPage') == 20 ? 'selected' : '' }}>20 Rows</option>
                            <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50 Rows</option>
                            <option value="100" {{ request('perPage') == 100 ? 'selected' : '' }}>100 Rows</option>
                        </select>
                    </div>
                </div>

                {{-- Collapsible Filters Section --}}
                <div class="row">
                    <div class="col-md-12 mt-2">
                        <div class="collapse {{ request('category_id') ? 'show' : '' }}" id="filtersCollapse">
                            <div class="row">
                                <div class="col-md-4 mb-2">
                                    <label for="category_id" class="form-label">Category</label>
                                    <select name="category_id" id="category_id" class="form-control"
                                        onchange="this.form.submit()">
                                        <option value="">All Categories</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <a href="{{ route('horeca.service-request-templates.index') }}"
                                        class="btn btn-primary">Clear</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table mt-3 table-striped table-hover text-nowrap" id="templatesTable">
                    <thead class="bg-light">
                        <tr>
                            <th scope="col" style="width: 10px;"><input type="checkbox" id="selectAll"></th>
                            <th scope="col" class="name-index">Template Name</th>
                            <th scope="col" class="category-index">Category</th>
                            <th scope="col" class="description-index">Description Template</th>
                            <th scope="col" class="action-index">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($templates as $template)
                            <tr>
                                <td><input type="checkbox" class="recordCheckbox" value="{{ $template->id }}"></td>
                                <td class="name-index">
                                    <a href="{{ route('horeca.service-request-templates.edit', $template->id) }}"
                                        class="fw-bold text-primary">{{ $template->name }}</a>
                                </td>
                                <td class="category-index">
                                    <span class="badge bg-soft-info text-info px-3">
                                        {{ $template->category->name }}
                                    </span>
                                </td>
                                <td class="description-index">
                                    <span
                                        title="{{ $template->description_template }}">{{ Str::limit($template->description_template, 50) }}</span>
                                </td>
                                <td class="action-index">
                                    <div class="d-inline-flex table-action-btns">
                                        @can('HoReCa Service Request Templates edit')
                                            <a href="{{ route('horeca.service-request-templates.edit', $template->id) }}"
                                                title="Edit">
                                                <i
                                                    class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                            </a>
                                        @endcan

                                        @can('HoReCa Service Request Templates delete')
                                            <a href="#" class="delete-btn" title="Delete" data-id="{{ $template->id }}">
                                                <i
                                                    class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                            </a>
                                            <form id="delete-form-{{ $template->id }}"
                                                action="{{ route('horeca.service-request-templates.destroy', $template->id) }}"
                                                method="POST" style="display: none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fa-regular fa-folder-open fa-3x mb-3"></i>
                                        <p>No templates found matching your criteria.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-4 align-items-center">
                @if ($templates->total() > 0)
                    <div style="font-size: 14px;" class="fw-normal">
                        Showing {{ $templates->firstItem() }} to {{ $templates->lastItem() }} of {{ $templates->total() }}
                        entries
                    </div>
                @endif
                <div>
                    {{ $templates->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        $(document).ready(function () {
            // Column Visibility
            $('.columnCheckbox').on('change', function () {
                var column = $(this).data('column');
                $(`.${column}-index`).toggle(this.checked);
            });

            // Ensure column visibility state is applied on page load
            $('.columnCheckbox').each(function () {
                var column = $(this).data('column');
                var isChecked = $(this).is(':checked');
                $(`.${column}-index`).toggle(isChecked);
            });

            // --- Bulk Actions Logic ---
            const bulkActionsButton = $('#bulkActionsButton');
            const selectAllCheckbox = $('#selectAll');
            const recordCheckboxes = $('.recordCheckbox');

            function updateUI() {
                const selected = [];
                $('.recordCheckbox:checked').each(function () {
                    selected.push($(this).val());
                });

                const selectedCount = selected.length;
                bulkActionsButton.prop('disabled', selectedCount === 0);

                if (selectedCount > 0) {
                    bulkActionsButton.text(`Bulk Actions (${selectedCount})`);
                } else {
                    bulkActionsButton.text('Bulk Actions');
                }

                if (recordCheckboxes.length > 0 && recordCheckboxes.length === selectedCount) {
                    selectAllCheckbox.prop('checked', true);
                } else {
                    selectAllCheckbox.prop('checked', false);
                }
            }

            selectAllCheckbox.on('change', function () {
                $('.recordCheckbox').prop('checked', $(this).prop('checked'));
                updateUI();
            });

            $(document).on('change', '.recordCheckbox', function () {
                updateUI();
            });

            $('.delete-btn').on('click', function (e) {
                e.preventDefault();
                let id = $(this).data('id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('delete-form-' + id).submit();
                    }
                });
            });
        });
    </script>
    <style>
        .bg-soft-info {
            background-color: rgba(59, 130, 246, 0.15);
        }

        .theme-blue {
            color: #4489e4;
        }

        .theme-red {
            color: #f06548;
        }

        .fixed-nav-btn {
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
            background-color: #F6F6F6 !important;
            color: #000000 !important;
            border-radius: 50% !important;
            border: none !important;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 4px;
            transition: all 0.2s;
        }

        .fixed-nav-btn:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }

        .fixed-nav-btn-active {
            background-color: #FFC107 !important;
            color: #000000 !important;
        }

        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .form-label {
            color: #8D99AE;
            font-weight: 500;
            font-size: 0.85rem;
            margin-bottom: 8px;
            display: block;
        }

        .form-control {
            border: none !important;
            border-bottom: 1px solid #E5E9F2 !important;
            border-radius: 0 !important;
            padding: 0.4rem 0 !important;
            font-size: 0.95rem !important;
            background: transparent !important;
            color: #4E5E7A !important;
            box-shadow: none !important;
        }

        .form-control:focus {
            border-bottom-color: #FABB1E !important;
        }
    </style>
@endpush