@extends('layouts.app')

@section('css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            border-radius: 999px;
            padding: 0.35rem 0.8rem;
            font-size: 0.85rem;
            font-weight: 600;
        }
    </style>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const statusBtn = document.getElementById('updateStatusBtn');
            if (!statusBtn) {
                return;
            }

            statusBtn.addEventListener('click', async function () {
                const statusSelect = document.getElementById('statusSelect');
                const statusValue = statusSelect ? statusSelect.value : null;

                if (!statusValue) {
                    return;
                }

                const originalText = statusBtn.innerHTML;
                statusBtn.disabled = true;
                statusBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>{{ __("labels.update") }}';

                try {
                    const response = await fetch('{{ route("further-education-event-requests.update-status", $furtherEducationEventRequest->id) }}', {
                        method: 'PATCH',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            status: statusValue
                        })
                    });

                    const result = await response.json();

                    if (!response.ok || result.success === false) {
                        throw new Error(result.message || '{{ __("messages.something_went_wrong") }}');
                    }

                    window.location.reload();
                } catch (error) {
                    alert(error.message || '{{ __("messages.something_went_wrong") }}');
                } finally {
                    statusBtn.disabled = false;
                    statusBtn.innerHTML = originalText;
                }
            });
        });
    </script>
@endsection

@push('pageTitle')
    {{ __('labels.further_education_event_request') }}
@endpush

@section('content')
    @include('components.common.page-header', [
        'pageTitle' => __('labels.further_education_event_request'),
        'actionButton' => [
            'url' => route('further-education-event-requests.index'),
            'text' => __('labels.back_to_list'),
        ],
    ])

    @include('components.common.flush-message')

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <h1 class="groups-title mb-0">{{ $furtherEducationEventRequest->name ?? __('labels.no_name') }}</h1>
                <div class="d-flex gap-2">
                    <button id="copyLinkBtnHeader"
                        onclick="copyToClipboard(window.location.href, this)"
                        class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip"
                        title="{{ __('labels.copy_link') }}">
                        <i class="fas fa-link"></i>
                    </button>
                </div>
            </div>

            <div class="row g-3 mt-1">
                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border">
                        <div class="card-header bg-transparent border-bottom py-2">
                            <small class="text-muted">
                                <i class="fas fa-envelope me-1"></i>
                                {{ __('labels.email') }}
                            </small>
                        </div>
                        <div class="card-body p-3">
                            {{ $furtherEducationEventRequest->email ?: '-' }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border">
                        <div class="card-header bg-transparent border-bottom py-2">
                            <small class="text-muted">
                                <i class="fas fa-envelope-open-text me-1"></i>
                                {{ __('labels.contact_email') }}
                            </small>
                        </div>
                        <div class="card-body p-3">
                            {{ $furtherEducationEventRequest->contact_email ?: '-' }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border">
                        <div class="card-header bg-transparent border-bottom py-2">
                            <small class="text-muted">
                                <i class="fas fa-building me-1"></i>
                                {{ __('labels.company') }}
                            </small>
                        </div>
                        <div class="card-body p-3">
                            {{ $furtherEducationEventRequest->company ?: '-' }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border">
                        <div class="card-header bg-transparent border-bottom py-2">
                            <small class="text-muted">
                                <i class="fas fa-phone me-1"></i>
                                {{ __('labels.phone') }}
                            </small>
                        </div>
                        <div class="card-body p-3">
                            {{ $furtherEducationEventRequest->phone ?: '-' }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border">
                        <div class="card-header bg-transparent border-bottom py-2">
                            <small class="text-muted">
                                <i class="fas fa-circle-notch me-1"></i>
                                {{ __('labels.status') }}
                            </small>
                        </div>
                        <div class="card-body p-3">
                            @php
                                $currentStatus = $furtherEducationEventRequest->status ?? 'pending';
                                $statusClasses = [
                                    'pending' => 'bg-warning-subtle text-warning border border-warning-subtle',
                                    'in_progress' => 'bg-info-subtle text-info border border-info-subtle',
                                    'completed' => 'bg-success-subtle text-success border border-success-subtle',
                                    'closed' => 'bg-secondary-subtle text-secondary border border-secondary-subtle',
                                ];
                                $statusClass = $statusClasses[$currentStatus] ?? 'bg-light text-dark border';
                            @endphp
                            <span class="status-pill {{ $statusClass }}">
                                <i class="fas fa-circle small"></i>
                                {{ __('labels.' . $currentStatus) }}
                            </span>
                        </div>
                    </div>
                </div>

                @can('update', $furtherEducationEventRequest)
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100 border">
                            <div class="card-header bg-transparent border-bottom py-2">
                                <small class="text-muted">
                                    <i class="fas fa-pen-to-square me-1"></i>
                                    {{ __('labels.status') }} {{ __('labels.update') }}
                                </small>
                            </div>
                            <div class="card-body p-3">
                                <div class="input-group input-group-sm">
                                    <select id="statusSelect" class="form-select border-end-0">
                                        @php
                                            $statusOptions = ['pending', 'in_progress', 'completed', 'closed'];
                                        @endphp
                                        @foreach ($statusOptions as $statusOption)
                                            <option value="{{ $statusOption }}"
                                                {{ ($furtherEducationEventRequest->status ?? 'pending') === $statusOption ? 'selected' : '' }}>
                                                {{ __('labels.' . $statusOption) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button" id="updateStatusBtn" class="btn btn-outline-primary">
                                        <i class="fas fa-save me-1"></i>{{ __('labels.update') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endcan
            </div>
        </div>
    </div>

    @if ($furtherEducationEventRequest->message)
        <div class="card section-card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom py-3">
                <h5 class="card-title mb-0">
                    <i class="fas fa-align-left me-2 text-primary"></i>
                    {{ __('labels.message') }}
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="groups-content">
                    {!! nl2br(e($furtherEducationEventRequest->message)) !!}
                </div>
            </div>
        </div>
    @endif

    <div class="card section-card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent border-bottom py-3">
            <h5 class="card-title mb-0">
                <i class="fas fa-shield-halved me-2 text-primary"></i>
                {{ __('labels.tracking_info') }}
            </h5>
        </div>
        <div class="card-body p-4">
            <div class="row g-3">
                <div class="col-md-6">
                    <small class="text-muted d-block mb-1">{{ __('labels.ip_address') }}</small>
                    <div>{{ $furtherEducationEventRequest->ip_address ?: '-' }}</div>
                </div>
                <div class="col-md-6">
                    <small class="text-muted d-block mb-1">{{ __('labels.user_agent') }}</small>
                    <div class="text-break">{{ $furtherEducationEventRequest->user_agent ?: '-' }}</div>
                </div>
            </div>
        </div>
    </div>

    @include('components.meta.stats', [
        'created_at' => $furtherEducationEventRequest->created_at ?? null,
        'updated_at' => $furtherEducationEventRequest->updated_at ?? null,
        'published_at' => null,
        'is_published' => null,
        'creater' => null,
        'creator_avatar' => null,
    ])
@endsection