@extends('layouts.admin')

@section('title', __('Home Sliders'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Home Sliders') }}</h1>
            <p class="mb-0 text-muted">{{ __('Manage your home sliders') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.home-sliders.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> {{ __('Create New') }}
            </a>
            <a href="{{ route('admin.home-sliders.dashboard', ['locale' => app()->getLocale()]) }}" class="btn btn-info ml-2">
                <i class="fas fa-chart-bar"></i> {{ __('Dashboard') }}
            </a>
        </div>
    </div>

    <!-- Top Controls -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Filters & Search') }}</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.home-sliders.index', ['locale' => app()->getLocale()]) }}">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="search">{{ __('slidesSearch') }}</label>
                            <input type="text" class="form-control" id="search" name="search" value="{{ request('search') }}" placeholder="{{ __('Search by title...') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="status">{{ __('Status') }}</label>
                            <select class="form-control" id="status" name="status">
                                <option value="">{{ __('All') }}</option>
                                <option value="published" {{ request('status') == 'published' ? 'selected' : '' }}>{{ __('Published') }}</option>
                                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>{{ __('Draft') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="language">{{ __('Language') }}</label>
                            <select class="form-control" id="language" name="language">
                                <option value="">{{ __('All') }}</option>
                                <option value="en" {{ request('language') == 'en' ? 'selected' : '' }}>{{ __('English') }}</option>
                                <option value="ar" {{ request('language') == 'ar' ? 'selected' : '' }}>{{ __('Arabic') }}</option>
                                <option value="both" {{ request('language') == 'both' ? 'selected' : '' }}>{{ __('Both') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="type">{{ __('Type') }}</label>
                            <select class="form-control" id="type" name="type">
                                <option value="">{{ __('All') }}</option>
                                <option value="image" {{ request('type') == 'image' ? 'selected' : '' }}>{{ __('Image') }}</option>
                                <option value="video" {{ request('type') == 'video' ? 'selected' : '' }}>{{ __('Video') }}</option>
                                <option value="mixed" {{ request('type') == 'mixed' ? 'selected' : '' }}>{{ __('Mixed') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary mr-2">
                                    <i class="fas fa-search"></i> {{ __('Filter') }}
                                </button>
                                <a href="{{ route('admin.home-sliders.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                                    {{ __('Reset') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Sliders List') }} ({{ $homeSliders->total() }})</h6>
            <div class="d-flex align-items-center">
                <div class="form-group mb-0 mr-3">
                    <select class="form-control form-control-sm bulk-action-select" id="bulkAction">
                        <option value="">{{ __('Bulk Actions') }}</option>
                        <option value="publish">{{ __('Publish') }}</option>
                        <option value="unpublish">{{ __('Unpublish') }}</option>
                        <option value="delete">{{ __('Delete') }}</option>
                        <option value="duplicate">{{ __('Duplicate') }}</option>
                    </select>
                </div>
                <button class="btn btn-sm btn-primary bulk-action-btn" disabled>
                    <i class="fas fa-check"></i> {{ __('Apply') }}
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th><input type="checkbox" class="select-all"></th>
                            <th>{{ __('Preview') }}</th>
                            <th>{{ __('Title') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Language') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Views') }}</th>
                            <th>{{ __('Clicks') }}</th>
                            <th>{{ __('Created') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($homeSliders as $slider)
                            <tr>
                                <td><input type="checkbox" class="bulk-checkbox" value="{{ $slider->id }}"></td>
                                <td>
                                    @if($slider->desktopImage)
                                        <img src="{{ $slider->desktopImage->url }}" alt="Preview" class="img-thumbnail" style="width: 60px; height: 40px; object-fit: cover;" data-toggle="tooltip" title="{{ $slider->desktopImage->name }}">
                                    @else
                                        <div class="bg-light text-center" style="width: 60px; height: 40px; line-height: 40px;">
                                            <i class="fas fa-image text-muted"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $slider->title_en ?? $slider->title_ar ?? __('Untitled') }}</strong>
                                    @if($slider->title_en && $slider->title_ar)
                                        <br><small class="text-muted">{{ __('(Bilingual)') }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge badge-info">{{ $slider->slider_type ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    <span class="badge badge-primary">{{ $slider->language ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    @if($slider->is_published)
                                        <span class="badge badge-success">{{ __('Published') }}</span>
                                    @else
                                        <span class="badge badge-secondary">{{ __('Draft') }}</span>
                                    @endif
                                    @if($slider->start_date || $slider->end_date)
                                        <br><small class="text-muted">
                                            {{ __('Schedule: ') }}
                                            @if($slider->start_date) {{ $slider->start_date->format('Y-m-d H:i') }} @endif
                                            @if($slider->end_date) - {{ $slider->end_date->format('Y-m-d H:i') }} @endif
                                        </small>
                                    @endif
                                </td>
                                <td>
                                    <span class="text-primary">{{ $slider->analytics ? $slider->analytics->where('event_type', 'view')->count() : 0 }}</span>
                                </td>
                                <td>
                                    <span class="text-success">{{ $slider->analytics ? $slider->analytics->where('event_type', 'click')->count() : 0 }}</span>
                                </td>
                                <td>{{ $slider->created_at->format('M d, Y') }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.home-sliders.show', ['home_slider' => $slider, 'locale' => app()->getLocale()]) }}" class="btn btn-sm btn-info" data-toggle="tooltip" title="{{ __('View') }}">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.home-sliders.edit', ['home_slider' => $slider, 'locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary" data-toggle="tooltip" title="{{ __('Edit') }}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        @if(auth()->user()->can('delete', $slider))
                                            <form action="{{ route('admin.home-sliders.destroy', ['home_slider' => $slider, 'locale' => app()->getLocale()]) }}" method="POST" style="display: inline;" onsubmit="return confirm('{{ __('Are you sure?') }}')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger" data-toggle="tooltip" title="{{ __('Delete') }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center py-4">
                                    <i class="fas fa-images fa-3x text-gray-300 mb-3"></i>
                                    <h5 class="text-gray-500">{{ __('No sliders found') }}</h5>
                                    <p class="text-gray-400">{{ __('Create your first home slider to get started.') }}</p>
                                    <a href="{{ route('admin.home-sliders.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                                        {{ __('Create Slider') }}
                                    </a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted">
                    {{ __('Showing ') }}{{ $homeSliders->firstItem() }} {{ __('to ') }}{{ $homeSliders->lastItem() }} {{ __('of ') }}{{ $homeSliders->total() }} {{ __('results') }}
                </div>
                {{ $homeSliders->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();

    // Bulk actions
    let selectedCount = 0;
    const selectAllCheckbox = $('.select-all');
    const bulkCheckboxes = $('.bulk-checkbox');
    const bulkSelect = $('#bulkAction');
    const bulkBtn = $('.bulk-action-btn');

    // Select all
    selectAllCheckbox.on('change', function() {
        bulkCheckboxes.prop('checked', this.checked);
        updateBulkActions();
    });

    // Individual checkboxes
    bulkCheckboxes.on('change', function() {
        selectedCount = bulkCheckboxes.filter(':checked').length;
        selectAllCheckbox.prop('checked', selectedCount === bulkCheckboxes.length);
        updateBulkActions();
    });

    function updateBulkActions() {
        if (selectedCount > 0) {
            bulkBtn.prop('disabled', false);
            bulkSelect.val('');
        } else {
            bulkBtn.prop('disabled', true);
        }
    }

    // Apply bulk action
    $('.bulk-action-btn').on('click', function() {
        const action = bulkSelect.val();
        if (!action || selectedCount === 0) return;

        if (confirm(`{{ __('Apply ') }} "${action}" {{ __('to ') }}${selectedCount} {{ __('selected items?') }}`)) {
            const form = $('<form>', {
                'method': 'POST',
                'action': '{{ route("admin.home-sliders.bulk-action", ["locale" => app()->getLocale()]) }}'
            });
            form.append('<input type="hidden" name="_token" value="{{ csrf_token() }}">');
            form.append(`<input type="hidden" name="action" value="${action}">`);
            bulkCheckboxes.filter(':checked').each(function() {
                form.append(`<input type="hidden" name="ids[]" value="${$(this).val()}">`);
            });
            $('body').append(form);
            form.submit();
        }
    });

    // DataTable initialization (optional, if using server-side)
    $('#dataTable').DataTable({
        "pageLength": 25,
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "order": [[ 8, "desc" ]],
        "columnDefs": [
            { "orderable": false, "targets": [0, 9] }
        ],
        "language": {
            "search": "{{ __('Search:') }}",
            "lengthMenu": "{{ __('Show _MENU_ entries') }}",
            "info": "{{ __('Showing _START_ to _END_ of _TOTAL_ entries') }}",
            "paginate": {
                "first": "{{ __('First') }}",
                "last": "{{ __('Last') }}",
                "next": "{{ __('Next') }}",
                "previous": "{{ __('Previous') }}"
            }
        }
    });
});
</script>
@endpush
@endsection