@extends('admin.layouts.app')

@section('title', __('admin/tickets.title'))

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/tickets.title')"
        :subtitle="__('admin/tickets.subtitle')"
        icon="fas fa-headset"
    >
        @can('create', App\Models\Ticket::class)
            <a href="{{ route('admin.tickets.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus me-1"></i>{{ __('admin/tickets.buttons_create') }}
            </a>
        @endcan
    </x-admin.page-header>

    <x-admin.card>
        <!-- Filters -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <!-- Search (Left) -->
            <div class="input-group input-group-sm" style="max-width: 220px;">
                <span class="input-group-text border-end-0 bg-transparent">
                    <i class="fas fa-search text-muted small"></i>
                </span>
                <input type="text"
                       class="form-control form-control-sm border-start-0 ps-0"
                       id="searchInput"
                       placeholder="{{ __('admin/tickets.search_placeholder') }}">
            </div>

            <!-- Dropdown Filters (Right) -->
            <div class="d-flex gap-2">
                <select id="statusFilter" class="form-select form-select-sm" style="width: auto; min-width: 130px;">
                    <option value="all">{{ __('admin/tickets.filters_all_statuses') }}</option>
                    <option value="open">{{ __('admin/tickets.filters_open_tickets') }}</option>
                    <option value="closed">{{ __('admin/tickets.filters_closed_tickets') }}</option>
                    <option value="pending">{{ __('admin/tickets.filters_pending_tickets') }}</option>
                </select>
                <select id="departmentFilter" class="form-select form-select-sm" style="width: auto; min-width: 140px;">
                    <option value="all">{{ __('admin/tickets.filters_all_departments') }}</option>
                    @foreach($departments as $department)
                        <option value="{{ $department->id }}">{{ $department->getTranslation('name') }}</option>
                    @endforeach
                </select>
                <select id="priorityFilter" class="form-select form-select-sm" style="width: auto; min-width: 130px;">
                    <option value="all">{{ __('admin/tickets.filters_all_priorities') }}</option>
                    <option value="low">{{ __('admin/tickets.fields_priority_low') }}</option>
                    <option value="medium">{{ __('admin/tickets.fields_priority_medium') }}</option>
                    <option value="high">{{ __('admin/tickets.fields_priority_high') }}</option>
                    <option value="urgent">{{ __('admin/tickets.fields_priority_urgent') }}</option>
                </select>

                
                <select id="assignedFilter" class="form-select form-select-sm" style="width: auto; min-width: 140px;">
                    <option value="all">{{ __('admin/tickets.filter_assigned_all') }}</option>
                    <option value="unassigned">{{ __('admin/tickets.filter_assigned_unassigned') }}</option>
                    <option value="{{ auth()->id() }}">{{ __('admin/tickets.filter_assigned_mine') }}</option>
                </select>
            </div>
        </div>

        <!-- Bulk Actions Toolbar -->
        <div id="bulkActionsBar" class="alert alert-primary d-none mb-3">
            <div class="d-flex justify-content-between align-items-center">
                <span><strong id="selectedCount">0</strong> {{ __('admin/tickets.bulk_selected') }}</span>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-warning bulk-action-btn" data-action="close">
                        <i class="fas fa-times-circle me-1"></i>{{ __('admin/tickets.bulk_close') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-info bulk-action-btn" data-action="merge">
                        <i class="fas fa-compress-arrows-alt me-1"></i>{{ __('admin/tickets.merge_button') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-danger bulk-action-btn" data-action="delete">
                        <i class="fas fa-trash me-1"></i>{{ __('admin/common.buttons_delete') }}
                    </button>
                </div>
            </div>
        </div>

        <!-- DataTable -->
        <div class="table-responsive">
            <table id="tickets" class="table table-hover align-middle mb-0"
                   data-records-url="{{ route('api.admin.tickets.records') }}"
                   data-bulk-url="{{ route('api.admin.tickets.bulk-action') }}">
                <thead>
                    <tr>
                        <th style="width: 30px;"><input type="checkbox" class="form-check-input" id="selectAllTickets"></th>
                        <th>{{ __('admin/tickets.fields_id') }}</th>
                        <th>{{ __('admin/tickets.fields_title') }}</th>
                        <th>{{ __('admin/tickets.fields_client_name') }}</th>
                        <th>{{ __('admin/tickets.fields_department_name') }}</th>
                        <th>{{ __('admin/tickets.fields_status_name') }}</th>
                        <th>{{ __('admin/tickets.fields_priority') }}</th>
                        <th>{{ __('admin/tickets.fields_last_reply') }}</th>
                        <th>{{ __('admin/tickets.fields_last_reply_by') }}</th>
                        <th>{{ __('admin/tickets.fields_created_at') }}</th>
                        <th class="text-end">{{ __('admin/common.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </x-admin.card>
</div>
@endsection

@push('scripts')
<script>
    // Yetki kontrolü için permissions nesnesi
    window.permissions = {
        tickets: {
            view: {{ json_encode(Auth::user()->can('viewAny', App\Models\Ticket::class)) }},
            update: {{ json_encode(Auth::user()->can('updateAny', App\Models\Ticket::class)) }},
            delete: {{ json_encode(Auth::user()->can('deleteAny', App\Models\Ticket::class)) }}
        },
        clients: {
            view: {{ json_encode(Auth::user()->can('viewAny', App\Models\Client::class)) }}
        }
    };

    // Route bilgilerini JavaScript'e aktar
    window.routes = {
        tickets: {
            show: '{{ route("admin.tickets.show", ":id") }}',
            delete: '{{ route("api.admin.tickets.destroy", ":id") }}',
            bulkAction: '{{ route("api.admin.tickets.bulk-action") }}'
        },
        clients: {
            show: '{{ route("admin.clients.overview", ":id") }}'
        }
    };

    // Dil çevirilerini JavaScript'e aktar
    window.translations = {
        tickets: {
            fields_priority_low: '{{ __("admin/tickets.fields_priority_low") }}',
            fields_priority_medium: '{{ __("admin/tickets.fields_priority_medium") }}',
            fields_priority_high: '{{ __("admin/tickets.fields_priority_high") }}',
            fields_priority_urgent: '{{ __("admin/tickets.fields_priority_urgent") }}'
        },
        common: {
            date_format_today: '{{ __("admin/common.date_format_today") }}',
            date_format_yesterday: '{{ __("admin/common.date_format_yesterday") }}',
            date_format_days_ago: '{{ __("admin/common.date_format_days_ago") }}',
            date_format_weeks_ago: '{{ __("admin/common.date_format_weeks_ago") }}',
            buttons_view: '{{ __("admin/common.buttons_view") }}'
        }
    };
</script>
@vite('resources/js/admin/tickets/index.js')
@endpush