@extends('layout.layout')

@section('content')
    @include('components.alert')

    <style>
        .request-edit-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
        }

        .requester-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .requester-card__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .requester-card__avatar {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 0.9rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .requester-card__label {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.2rem;
        }

        .requester-card__name {
            color: #111827;
            font-size: 1rem;
            font-weight: 900;
            overflow-wrap: anywhere;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem !important;
            font-weight: 900;
            color: #111827;
        }

        .form-section__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select,
        .form-control,
        .form-select,
        .select2-container .select2-selection--single {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        textarea.asset-input {
            min-height: 120px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus,
        .form-control:focus,
        .form-select:focus,
        .select2-container--default.select2-container--open .select2-selection--single {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .asset-invalid,
        .is-invalid {
            border-color: #dc3545 !important;
        }

        .select2-container {
            display: block !important;
            width: 100% !important;
        }

        .select2-container .selection {
            display: block !important;
            width: 100% !important;
        }

        .select2-container .select2-selection--single {
            display: flex !important;
            align-items: center;
        }

        .select2-container .select2-selection__rendered {
            padding-left: 0 !important;
            padding-right: 1.5rem !important;
            color: #111827 !important;
            line-height: 1.5 !important;
        }

        .upload-box {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            padding: 1rem;
            background: #f8fafc;
        }

        .upload-box__title {
            color: #111827;
            font-size: 0.95rem !important;
            font-weight: 900;
            margin-bottom: 0.2rem;
        }

        .upload-box__text {
            color: #64748b;
            font-size: 0.86rem;
            margin-bottom: 0.85rem;
        }

        .attachments-panel {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #f8fafc;
            padding: 1rem;
        }

        .attachments-panel__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .attachments-panel__title {
            color: #111827;
            font-size: 0.98rem !important;
            font-weight: 900;
        }

        .attachments-panel__sub {
            color: #64748b;
            font-size: 0.86rem !important;
            line-height: 1.5;
            margin-top: 0.2rem;
        }

        .attachments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 0.85rem;
        }

        .attachment-card {
            display: block;
            text-decoration: none;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            transition: 0.18s ease;
            color: #334155;
        }

        .attachment-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
            color: #071b3d;
        }

        .attachment-card__preview {
            width: 100%;
            height: 110px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-bottom: 1px solid #eef2f7;
        }

        .attachment-card__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .attachment-card__footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.65rem;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .request-edit-actions {
            margin-top: 1rem;
        }

        .request-status-note {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #475569;
            font-weight: 700;
        }

        .escalation-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .escalation-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
        }

        .escalation-card__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .escalation-card__title {
            color: #111827;
            font-size: 0.98rem;
            font-weight: 900;
        }

        .escalation-card__meta {
            margin-top: 0.25rem;
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .escalation-card__description {
            margin-top: 0.9rem;
            color: #334155;
            font-size: 0.92rem;
            line-height: 1.7;
        }

        .escalation-replies {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .escalation-reply {
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #fff;
            padding: 0.9rem;
        }

        .escalation-reply__meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 800;
            margin-bottom: 0.45rem;
        }

        .escalation-reply__content {
            color: #334155;
            font-size: 0.9rem;
            line-height: 1.65;
            overflow-wrap: anywhere;
        }

        .escalation-empty {
            margin-top: 0.9rem;
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            text-decoration: none;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        @media (max-width: 991.98px) {
            .asset-col-6 {
                grid-column: span 12 / span 12;
            }

            .requester-card {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .request-edit-page .ui-card {
                padding: 1rem;
            }

            .asset-actions .asset-btn {
                width: 100%;
            }

            .attachments-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
        }
    </style>

    <div class="container-fluid app-bg request-edit-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Edit Student Request"
                    description="Update request classification, priority, subject, description, and supporting attachments.">
                    <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                        <i class="fas fa-arrow-left"></i>
                        Back to Requests
                    </a>
                </x-page-title>

                <form action="{{ route('requests.update', $studentRequest->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="ui-card requester-card">
                        <div class="requester-card__main">
                            <div class="requester-card__avatar">
                                {{ strtoupper(substr($auth->first_name ?? 'S', 0, 1) . substr($auth->last_name ?? '', 0, 1)) }}
                            </div>

                            <div>
                                <div class="requester-card__label">Requester Name</div>
                                <div class="requester-card__name">
                                    {{ $auth->first_name }} {{ $auth->last_name }}
                                </div>
                            </div>
                        </div>

                        <span class="ui-pill ui-pill--info">
                            <i class="fas fa-edit"></i>
                            Edit Request
                        </span>
                    </div>

                    @php
                        $escalationStatusClass = static function (?string $status) {
                            return match ($status) {
                                'pending' => 'ui-pill--warn',
                                'assigned', 'in_progress' => 'ui-pill--info',
                                'resolved', 'closed' => 'ui-pill--success',
                                'rejected' => 'ui-pill--danger',
                                default => 'ui-pill--neutral',
                            };
                        };
                    @endphp

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Request Classification</h5>
                                <p class="form-section__sub mb-0">
                                    Update the request type, related category, and priority level.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="type" class="asset-label">Request Type</label>
                                    <select name="type"
                                            id="type"
                                            class="asset-select @error('type') asset-invalid @enderror">
                                        <option value="">Select Type</option>
                                        <option value="complaint" {{ old('type', $studentRequest->type) == 'complaint' ? 'selected' : '' }}>Complaint</option>
                                        <option value="request" {{ old('type', $studentRequest->type) == 'request' ? 'selected' : '' }}>Request</option>
                                        <option value="need" {{ old('type', $studentRequest->type) == 'need' ? 'selected' : '' }}>Need</option>
                                        <option value="information" {{ old('type', $studentRequest->type) == 'information' ? 'selected' : '' }}>Information</option>
                                        <option value="escalation" {{ old('type', $studentRequest->type) == 'escalation' ? 'selected' : '' }}>Escalation</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="related_to" class="asset-label">Related To</label>
                                    <select name="related_to"
                                            id="related_to"
                                            class="asset-select @error('related_to') asset-invalid @enderror">
                                        <option value="">Select Related To</option>
                                        <option value="activities" {{ old('related_to', $studentRequest->related_to) == 'activities' ? 'selected' : '' }}>Activities</option>
                                        <option value="homework" {{ old('related_to', $studentRequest->related_to) == 'homework' ? 'selected' : '' }}>Homework</option>
                                        <option value="whiteboard" {{ old('related_to', $studentRequest->related_to) == 'whiteboard' ? 'selected' : '' }}>Whiteboard</option>
                                        <option value="curriculum" {{ old('related_to', $studentRequest->related_to) == 'curriculum' ? 'selected' : '' }}>Curriculum</option>
                                        <option value="time" {{ old('related_to', $studentRequest->related_to) == 'time' ? 'selected' : '' }}>Time</option>
                                    </select>
                                    @error('related_to')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="priority" class="asset-label">Priority</label>
                                    <select name="priority"
                                            id="priority"
                                            class="asset-select @error('priority') asset-invalid @enderror">
                                        <option value="high" {{ old('priority', $studentRequest->priority) == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="medium" {{ old('priority', $studentRequest->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="low" {{ old('priority', $studentRequest->priority) == 'low' ? 'selected' : '' }}>Low</option>
                                    </select>
                                    @error('priority')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Request Content</h5>
                                <p class="form-section__sub mb-0">
                                    Update the request subject, description, and supporting files.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-12">
                                    <label for="subject" class="asset-label">
                                        Subject <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                           name="subject"
                                           id="subject"
                                           class="asset-input @error('subject') asset-invalid @enderror"
                                           value="{{ old('subject', $studentRequest->subject) }}"
                                           pattern="^[A-Za-z0-9\s]+$"
                                           title="Only letters, numbers, and spaces are allowed"
                                           placeholder="Enter request subject">
                                    @error('subject')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="description" class="asset-label">Description</label>
                                    <textarea name="description"
                                              id="description"
                                              rows="4"
                                              class="asset-input @error('description') asset-invalid @enderror"
                                              oninput="this.value = this.value.replace(/[^A-Za-z0-9\s]/g, '')"
                                              placeholder="Write request details...">{{ old('description', $studentRequest->description) }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label class="asset-label">Status Note</label>
                                    <div class="request-status-note" title="{{ $studentRequest->status_note }}">
                                        {{ $studentRequest->status_note ?: '-' }}
                                    </div>
                                </div>

                                <div class="asset-col-12">
                                    <label for="attachments" class="asset-label">Attachments</label>

                                    <div class="upload-box">
                                        <div class="upload-box__title">Upload new attachments</div>
                                        <div class="upload-box__text">
                                            You can upload one or more files. Existing attachments will remain visible below.
                                        </div>

                                        <input type="file"
                                               name="attachments[]"
                                               id="attachments"
                                               class="asset-input @error('attachments') asset-invalid @enderror @error('attachments.*') asset-invalid @enderror"
                                               multiple>
                                    </div>

                                    @error('attachments')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror

                                    @error('attachments.*')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                @if ($studentRequest->attachments && count($studentRequest->attachments))
                                    <div class="asset-col-12">
                                        <div class="attachments-panel">
                                            <div class="attachments-panel__head">
                                                <div>
                                                    <h6 class="attachments-panel__title mb-0">Existing Attachments</h6>
                                                    <p class="attachments-panel__sub mb-0">
                                                        Files already uploaded for this request.
                                                    </p>
                                                </div>

                                                <span class="ui-pill ui-pill--neutral">
                                                    {{ count($studentRequest->attachments) }} File(s)
                                                </span>
                                            </div>

                                            <div class="attachments-grid">
                                                @foreach ($studentRequest->attachments as $file)
                                                    <a href="{{ asset($file->file_path) }}"
                                                       target="_blank"
                                                       class="attachment-card">
                                                        <div class="attachment-card__preview">
                                                            <img src="{{ asset($file->file_path) }}"
                                                                 alt="Attachment"
                                                                 class="attachment-card__img">
                                                        </div>

                                                        <div class="attachment-card__footer">
                                                            <i class="fas fa-paperclip"></i>
                                                            <span>Open File</span>
                                                        </div>
                                                    </a>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    @if ($studentRequest->escalationRequests->isNotEmpty())
                        <div class="ui-card">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Escalations</h5>
                                    <p class="form-section__sub mb-0">
                                        Current escalation status and student-visible replies attached to this request.
                                    </p>
                                </div>

                                <div class="escalation-list">
                                    @foreach ($studentRequest->escalationRequests as $escalation)
                                        <div class="escalation-card">
                                            <div class="escalation-card__head">
                                                <div>
                                                    <div class="escalation-card__title">
                                                        {{ $escalation->title ?: 'Escalation #' . $escalation->id }}
                                                    </div>
                                                    <div class="escalation-card__meta">
                                                        {{ $escalation->fromDepartment?->name ?? 'N/A' }}
                                                        to
                                                        {{ $escalation->toDepartment?->name ?? 'N/A' }}
                                                        •
                                                        {{ $escalation->created_at?->format('d M Y, h:i A') }}
                                                    </div>
                                                </div>

                                                <span class="ui-pill {{ $escalationStatusClass($escalation->status) }}">
                                                    {{ ucfirst(str_replace('_', ' ', $escalation->status)) }}
                                                </span>
                                            </div>

                                            @if ($escalation->description)
                                                <div class="escalation-card__description">
                                                    {!! nl2br(e($escalation->description)) !!}
                                                </div>
                                            @endif

                                            @if ($escalation->notes->isNotEmpty())
                                                <div class="escalation-replies">
                                                    @foreach ($escalation->notes as $note)
                                                        <div class="escalation-reply">
                                                            <div class="escalation-reply__meta">
                                                                <span>{{ $note->staff?->full_name ?? trim(($note->staff?->first_name ?? '') . ' ' . ($note->staff?->last_name ?? '')) ?: 'Staff' }}</span>
                                                                <span>{{ $note->created_at?->format('d M Y, h:i A') }}</span>
                                                            </div>
                                                            <div class="escalation-reply__content">
                                                                {!! nl2br(e($note->content)) !!}
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="escalation-empty">
                                                    No student-visible escalation notes yet.
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="asset-actions request-edit-actions">
                        <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            <i class="fas fa-save"></i>
                            Update Student Request
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endsection