@extends('admin.layout.index')
@section('title')
    {{ __('messages.complaint_types') }}
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
    </div>

    <!-- Main content -->
    <section class="content">
        <div class="col-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ __('messages.complaint_types') }}</h3>
                    <br>
                    <br>
                    <div class="row">
                        <!-- Add Button -->
                        @can('complaint_type_create')
                            <div class="col-md-3">
                                <a href="{{ route('admin.complaint.types.create') }}"
                                    class="text-center waves-effect btn btn-secondary mb-5">
                                    {{ __('messages.add_complaint_type') }}
                                </a>
                            </div>
                        @endcan

                        <!-- Search Form -->
                        <div class="col-md-3">
                            <div class="search-bx">
                                <form method="get" action="{{ route('admin.complaint.types.index') }}">
                                    <div class="input-group">
                                        <input type="search" name="search" class="form-control" placeholder="   Search"
                                            aria-label="Search" value="{{ request('search') }}"
                                            aria-describedby="button-addon2">
                                        <div class="input-group-append">
                                            <button class="btn" type="submit" id="button-addon3">
                                                <i class="ti-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- Add this below your search form -->
                        <!-- Status Filter -->
                        <div class="col-md-2 mb-3">
                            <select class="form-control" id="status-filter" name="status">
                                <option value="">{{ __('messages.select_status') }}</option>
                                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>
                                    {{ __('messages.active') }}
                                </option>
                                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>
                                    {{ __('messages.inactive') }}
                                </option>
                            </select>
                        </div>
                        <div class="col-md-2 mb-3">
                            <select class="form-control" id="type-filter" name="type">
                                <option value="">{{ __('messages.all_types') }}</option>
                                <option value="employee" {{ request('type') == 'employee' ? 'selected' : '' }}>
                                    {{ __('messages.employee') }}
                                </option>
                                <option value="service_provider"
                                    {{ request('type') == 'service_provider' ? 'selected' : '' }}>
                                    {{ __('messages.service_provider') }}
                                </option>
                                <option value="resource_supplier"
                                    {{ request('type') == 'resource_supplier' ? 'selected' : '' }}>
                                    {{ __('messages.resource_supplier') }}
                                </option>
                                <option value="client" {{ request('type') == 'client' ? 'selected' : '' }}>
                                    {{ __('messages.client') }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Add this near your other buttons -->
                <div class="col-md-3">
                    <button id="clear-filters" class="text-center waves-effect btn btn-info mb-5">
                        {{ __('messages.clear_filters') }}
                    </button>
                </div>

                <!-- Delete Selected Button -->
                @can('complaint_type_delete')
                    <div class="col-md-3">
                        <button id="delete-selected" class="text-center waves-effect btn btn-danger mb-5">
                            {{ __('messages.deleted-all') }}
                        </button>
                    </div>
                @endcan
            </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <div id="table_data">
                <div class="table-responsive">
                    <table id="complex_header" class="table table-lg table-separated" style="width:100%">
                        <thead>
                            <tr class="bg-dark">
                                <th>#</th>
                                <th>
                                    <input style="position: relative; left: unset; opacity: 1;right: 0; " type="checkbox"
                                        class="" id="select-all">
                                </th>
                                <th>{{ __('messages.name') }}</th>
                                <th>{{ __('messages.available_for') }}</th>
                                <th>{{ __('messages.assigned_users') }}</th>
                                <th>{{ __('messages.status') }}</th>
                                <th>{{ __('messages.settings') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($complaintTypes as $index => $type)
                                <tr class="bg-table-gray changnametr">
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <input style="position: relative; left: unset; opacity: 1;right: 0; "
                                            type="checkbox" name="ids[]" value="{{ $type->id }}"
                                            class="dt-checkboxes" autocomplete="off">
                                    </td>
                                    <td>{{ $type->name ?? '-' }}</td>
                                    <td>
                                        {{ $type->types->pluck('type')->map(fn($t) => __('messages.' . $t))->join(', ') }}
                                    </td>
                                    <td>
                                        {{ $type->users->isEmpty() ? __('messages.none') : $type->users->pluck('name')->join(', ') }}
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input type="checkbox" class="form-check-input status-toggle"
                                                id="status-{{ $type->id }}" data-id="{{ $type->id }}"
                                                {{ $type->status == 'active' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="status-{{ $type->id }}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button"
                                                class="waves-effect waves-light btn btn-light dropdown-toggle"
                                                data-toggle="dropdown" aria-expanded="false">
                                                {{-- {{ __('messages.settings') }} --}}
                                            </button>
                                            @can('complaint_type_update')
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item"
                                                        href="{{ route('admin.complaint.types.edit', $type->id) }}">
                                                        {{ __('messages.edit') }}
                                                    </a>
                                                </div>
                                            @endcan

                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
                    {{ $complaintTypes->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        </div>
        <!-- /.box -->
        </div>
    </section>
@endsection

@section('js')
    <script>
        $('.status-toggle').change(function() {
            var id = $(this).data('id');
            var isActive = $(this).is(':checked');

            $.ajax({
                url: "{{ route('admin.complaint.types.toggle-status', ':id') }}".replace(':id', id),
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'PATCH'
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 1500
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON.message || 'Something went wrong'
                    });
                    // Revert the toggle if error occurs
                    $(this).prop('checked', !isActive);
                }
            });
        });
        // Select/deselect all checkboxes

        // Add this to your JS section
        $(document).ready(function() {
            // Handle filter changes
            $('#status-filter, #type-filter').change(function() {
                applyFilters();
            });

            function applyFilters() {
                const params = new URLSearchParams(window.location.search);

                // Update or remove status filter
                const status = $('#status-filter').val();
                if (status) {
                    params.set('status', status);
                } else {
                    params.delete('status');
                }

                // Update or remove type filter
                const type = $('#type-filter').val();
                if (type) {
                    params.set('type', type);
                } else {
                    params.delete('type');
                }

                // Keep search term if exists
                const search = $('input[name="search"]').val();
                if (search) {
                    params.set('search', search);
                } else {
                    params.delete('search');
                }

                // Reload page with new filters
                window.location.href = window.location.pathname + '?' + params.toString();
            }

            // Clear filters button (optional)
            $('#clear-filters').click(function() {
                window.location.href = window.location.pathname;
            });
        });
        $('#select-all').click(function(event) {
            if (this.checked) {
                $('.dt-checkboxes').each(function() {
                    this.checked = true;
                });
            } else {
                $('.dt-checkboxes').each(function() {
                    this.checked = false;
                });
            }
        });

        // Delete selected items via Ajax
        $('#delete-selected').click(function() {
            var ids = [];
            $('.dt-checkboxes:checked').each(function() {
                ids.push($(this).val());
            });
            if (ids.length > 0) {
                Swal.fire({
                    title: `{{ __('messages.yes_delete_it') }}?`,
                    text: "{{ __('messages.you_will_not_recover') }}",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "{{ __('messages.yes_delete_it') }}",
                    cancelButtonText: "{{ __('messages.cancel') }}"
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.complaint.types.multiple-delete') }}",
                            method: "POST",
                            data: {
                                ids: ids,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                Swal.fire(
                                    "{{ __('messages.deletion_completed_success') }}",
                                    "",
                                    "success"
                                ).then(function() {
                                    location.reload();
                                });
                            }
                        }).catch(function(error) {
                            console.error(error);
                        });
                    }
                });
            } else {
                Swal.fire({
                    title: "{{ __('messages.please_select_one') }}",
                    confirmButtonText: "{{ __('messages.cancel') }}"
                });
            }
        });

        // Delete a single item
        $('.delete-item').click(function(e) {
            e.preventDefault();
            var id = $(this).data('id');
            Swal.fire({
                title: "{{ __('Are you sure to delete') }}",
                text: "{{ __('You will not be able to recover this!') }}",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ __('Yes, delete it!') }}",
                cancelButtonText: "{{ __('Cancel') }}"
            }).then(function(result) {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.complaint.types.destroy', '') }}/" + id,
                        method: "DELETE",
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.fire(
                                "{{ __('The deletion was completed successfully') }}",
                                "",
                                "success"
                            ).then(function() {
                                location.reload();
                            });
                        }
                    }).catch(function(error) {
                        console.error(error);
                    });
                }
            });
        });
    </script>
@endsection