@extends('admin.layouts.master')

@section('title', __('lang.workers'))

@section('content')
    <x-ui.breadcrumb :items="[__('lang.workers') => null]" />

    <div class="d-flex align-items-center justify-content-between mb-4">
        <h1 class="h5 fw-semibold mb-0">{{ __('lang.workers') }}</h1>
        @can('workers.create')
            <x-button href="{{ route('admin.workers.create') }}" variant="primary" size="sm">
                <i class="bi bi-plus-lg me-1"></i>{{ __('lang.add_worker') }}
            </x-button>
        @endcan
    </div>

    <form method="GET" class="row g-2 align-items-start mb-3">
        <div class="col-sm-6 col-lg-3">
            <x-ui.input type="search" name="search" :value="request('search')" placeholder="{{ __('lang.search_placeholder') }}" />
        </div>

        <div class="col-sm-6 col-lg-2">
            <select name="office_id" class="form-select" onchange="this.form.submit()">
                <option value="">{{ __('lang.all_offices') }}</option>
                @foreach ($offices as $office)
                    <option value="{{ $office->id }}" @selected(request('office_id') == $office->id)>{{ $office->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-sm-6 col-lg-2">
            <select name="nationality_id" class="form-select" onchange="this.form.submit()">
                <option value="">{{ __('lang.all_nationalities') }}</option>
                @foreach ($nationalities as $nationality)
                    <option value="{{ $nationality->id }}" @selected(request('nationality_id') == $nationality->id)>{{ $nationality->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-sm-6 col-lg-2">
            <select name="admin_status" class="form-select" onchange="this.form.submit()">
                <option value="">{{ __('lang.all_statuses') }}</option>
                @foreach (\App\Models\Worker::ADMIN_STATUSES as $status)
                    <option value="{{ $status }}" @selected(request('admin_status') === $status)>{{ __('lang.admin_status_'.$status) }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-auto">
            <button type="submit" class="btn btn-light border">{{ __('lang.search') }}</button>
        </div>
    </form>

    <div class="card">
        <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
                <thead>
                    <tr>
                        <th>{{ __('lang.worker_name') }}</th>
                        <th>{{ __('lang.office') }}</th>
                        <th>{{ __('lang.nationality') }}</th>
                        <th>{{ __('lang.job_type') }}</th>
                        <th>{{ __('lang.admin_status') }}</th>
                        <th>{{ __('lang.availability_status') }}</th>
                        <th>{{ __('lang.created_by') }}</th>
                        <th class="text-end">{{ __('lang.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($workers as $worker)
                        <tr>
                            <td class="fw-semibold">{{ $worker->name }}</td>
                            <td>{{ $worker->office->name }}</td>
                            <td>{{ $worker->nationality->name }}</td>
                            <td>{{ $worker->jobType->name }}</td>
                            <td>
                                @can('workers.moderate')
                                    <form method="POST" action="{{ route('admin.workers.status', $worker) }}" class="js-admin-status-form">
                                        @csrf
                                        @method('PATCH')
                                        <select
                                            name="admin_status"
                                            class="form-select form-select-sm js-admin-status-select"
                                            style="width: auto;"
                                            data-current="{{ $worker->admin_status }}"
                                            data-worker-name="{{ $worker->name }}"
                                        >
                                            @foreach (\App\Models\Worker::ADMIN_STATUSES as $status)
                                                <option value="{{ $status }}" @selected($worker->admin_status === $status)>{{ __('lang.admin_status_'.$status) }}</option>
                                            @endforeach
                                        </select>
                                    </form>
                                @else
                                    <x-ui.badge :variant="match ($worker->admin_status) { 'approved' => 'success', 'rejected' => 'danger', default => 'warning' }">
                                        {{ __('lang.admin_status_'.$worker->admin_status) }}
                                    </x-ui.badge>
                                @endcan
                            </td>
                            <td>
                                <x-ui.badge :variant="match ($worker->availability_status) { 'available' => 'success', 'reserved' => 'warning', default => 'secondary' }">
                                    {{ __('lang.availability_status_'.$worker->availability_status) }}
                                </x-ui.badge>
                            </td>
                            <td>
                                @if ($worker->creator)
                                    <div class="small">{{ $worker->creator->name }}</div>
                                    <div class="text-muted" style="font-size: .75rem;">{{ __('lang.'.($worker->creatorTypeLabel() ? 'created_by_'.$worker->creatorTypeLabel() : 'created_by_unknown')) }}</div>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="d-inline-flex gap-2">
                                    <a href="{{ route('admin.workers.cv', $worker) }}" class="btn btn-sm btn-light border" title="{{ __('lang.download_cv') }}" aria-label="{{ __('lang.download_cv') }}">
                                        <i class="bi bi-file-earmark-arrow-down"></i>
                                    </a>

                                    @can('workers.update')
                                        <a href="{{ route('admin.workers.edit', $worker) }}" class="btn btn-sm btn-light border" title="{{ __('lang.edit') }}" aria-label="{{ __('lang.edit') }}">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                    @endcan

                                    @can('workers.delete')
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-light border text-danger"
                                            title="{{ __('lang.delete') }}"
                                            aria-label="{{ __('lang.delete') }}"
                                            data-delete-url="{{ route('admin.workers.destroy', $worker) }}"
                                            data-delete-message="{{ __('lang.confirm_delete_worker', ['name' => $worker->name]) }}"
                                        >
                                            <i class="bi bi-trash3"></i>
                                        </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">{{ __('lang.no_workers_yet') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if ($workers->hasPages())
        <div class="mt-3">
            {{ $workers->links() }}
        </div>
    @endif

    @can('workers.moderate')
        <div class="modal fade" id="rejectReasonModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="POST" id="rejectReasonForm">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="admin_status" value="rejected">
                        <div class="modal-header">
                            <h2 class="modal-title h5 fw-semibold mb-0">{{ __('lang.reject_worker') }}</h2>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('lang.close_menu') }}"></button>
                        </div>
                        <div class="modal-body">
                            <p class="text-muted small" id="rejectReasonWorkerName"></p>
                            <label for="rejectReasonInput" class="form-label">{{ __('lang.rejection_reason') }}</label>
                            <textarea name="rejection_reason" id="rejectReasonInput" class="form-control" rows="3" required></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light border" data-bs-dismiss="modal">{{ __('lang.cancel') }}</button>
                            <button type="submit" class="btn btn-danger">{{ __('lang.reject') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const rejectModalEl = document.getElementById('rejectReasonModal');
                    const rejectForm = document.getElementById('rejectReasonForm');
                    const rejectWorkerName = document.getElementById('rejectReasonWorkerName');
                    const rejectModal = new bootstrap.Modal(rejectModalEl);
                    let pendingSelect = null;

                    document.querySelectorAll('.js-admin-status-select').forEach((select) => {
                        select.addEventListener('change', function () {
                            if (select.value === 'rejected') {
                                pendingSelect = select;
                                rejectForm.action = select.closest('form').action;
                                rejectWorkerName.textContent = select.dataset.workerName;
                                rejectModal.show();
                                return;
                            }

                            select.closest('form').submit();
                        });
                    });

                    rejectModalEl.addEventListener('hidden.bs.modal', function () {
                        if (pendingSelect && !rejectForm.dataset.submitted) {
                            pendingSelect.value = pendingSelect.dataset.current;
                        }
                        rejectForm.dataset.submitted = '';
                    });

                    rejectForm.addEventListener('submit', function () {
                        rejectForm.dataset.submitted = '1';
                    });
                });
            </script>
        @endpush
    @endcan
@endsection