<x-dashboard.layout :title="__('dashboard.galleries')">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">{{ __('dashboard.galleries') }}</h4>

                    <div class="page-title-right d-flex align-items-center">
                        <div class="btn btn-list">
                            <a href="{{ route('dashboard.galleries.create') }}" class="btn ripple btn-primary">
                                <i class="fas fa-plus-circle"></i> {{ __('dashboard.add') }}
                            </a>
                            <button id="btn_active" class="btn ripple btn-dark">
                                <i class="fas fa-eye"></i> {{ __('dashboard.publish/unpublish') }}
                            </button>
                            <button id="btn_delete" class="btn ripple btn-danger">
                                <i class="fas fa-trash"></i> {{ __('dashboard.delete') }}
                            </button>
                        </div>

                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">{{ __('dashboard.galleries') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Page Header -->

        <!-- Table -->
        <div class="row">
            <div class="col-12">
                <div class="dashboard-table-container">
                    <div class="card-header">
                        <h4>{{ __('dashboard.galleries') }}</h4>
                    </div>
                    <div class="card-body">
                        <table id="datatable-buttons" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 50px;">
                                        <input type="checkbox" id="checkAll" class="form-check-input">
                                    </th>
                                    <th>{{ __('dashboard.id') }}</th>
                                    <th>{{ __('dashboard.title_en') }}</th>
                                    <th>{{ __('dashboard.title_ar') }}</th>
                                    <th>{{ __('dashboard.images_count') }}</th>
                                    <th>{{ __('dashboard.order') }}</th>
                                    <th>{{ __('dashboard.status') }}</th>
                                    <th>{{ __('dashboard.actions') }}</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($galleries as $gallery)
                                    <tr id="{{ $gallery->id }}">
                                        <td class="text-center">
                                            <input type="checkbox" name="checkbox" class="check-inputs form-check-input"
                                                value="{{ $gallery->id }}">
                                        </td>
                                        <td><a
                                                href="{{ route('dashboard.galleries.edit', $gallery->id) }}">{{ $gallery->id }}</a>
                                        </td>
                                        <td><a
                                                href="{{ route('dashboard.galleries.edit', $gallery->id) }}">{{ $gallery->title_en ?? '-' }}</a>
                                        </td>
                                        <td><a
                                                href="{{ route('dashboard.galleries.edit', $gallery->id) }}">{{ $gallery->title_ar ?? '-' }}</a>
                                        </td>
                                        <td>
                                            <a href="{{ route('dashboard.galleries.edit', $gallery->id) }}">
                                                {{ $gallery->images->count() }} {{ __('dashboard.images') }}
                                            </a>
                                        </td>
                                        <td><a
                                                href="{{ route('dashboard.galleries.edit', $gallery->id) }}">{{ $gallery->order }}</a>
                                        </td>
                                        <td>
                                            @if ($gallery->status == 1)
                                                <span class="badge bg-success">{{ __('dashboard.yes') }}</span>
                                            @else
                                                <span class="badge bg-danger">{{ __('dashboard.no') }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('dashboard.galleries.edit', $gallery->id) }}"
                                                class="btn btn-sm btn-primary" title="{{ __('dashboard.edit') }}">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form action="{{ route('dashboard.galleries.destroy', $gallery->id) }}"
                                                method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger"
                                                    title="{{ __('dashboard.delete') }}"
                                                    onclick="return confirm('{{ __('dashboard.confirm_delete') }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>

    @push('scripts')
        <script>
            $(document).ready(function() {
                if (!$.fn.DataTable.isDataTable('#datatable-buttons')) {
                    $('#datatable-buttons').DataTable({
                        "responsive": true,
                        "autoWidth": false,
                        "pageLength": 25,
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Arabic.json"
                        }
                    });
                }

                $('#checkAll').on('click', function() {
                    $('.check-inputs').prop('checked', this.checked);
                });

                $('.check-inputs').on('click', function() {
                    var totalCheckboxes = $('.check-inputs').length;
                    var checkedCheckboxes = $('.check-inputs:checked').length;
                    $('#checkAll').prop('checked', totalCheckboxes === checkedCheckboxes);
                });

                // Bulk delete
                $('#btn_delete').on('click', function() {
                    var selectedIds = [];
                    $('.check-inputs:checked').each(function() {
                        selectedIds.push($(this).val());
                    });

                    if (selectedIds.length === 0) {
                        alert('{{ __('dashboard.please_select_items') }}');
                        return;
                    }

                    if (!confirm('{{ __('dashboard.confirm_delete') }}')) {
                        return;
                    }

                    $.ajax({
                        url: '{{ route('dashboard.galleries.destroy', ':id') }}'.replace(':id', selectedIds[0]),
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: {
                            selectedIds: selectedIds,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                location.reload();
                            } else {
                                alert(response.message || '{{ __('dashboard.an_error_occurred') }}');
                            }
                        },
                        error: function(xhr) {
                            var errorMessage = xhr.responseJSON?.message || '{{ __('dashboard.an_error_occurred') }}';
                            alert(errorMessage);
                        }
                    });
                });
            });
        </script>
    @endpush
</x-dashboard.layout>

