@php
    $helpdeskAttachmentAccept = collect(config('helpdesk.allowed_extensions', config('helpdesk.allowed_mimes', [])))
        ->filter(fn ($extension) => is_string($extension) && trim($extension) !== '')
        ->map(fn ($extension) => '.' . strtolower(ltrim(trim($extension), '.')))
        ->unique()
        ->implode(',');
@endphp
<div class="space-y-6">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @include('helpdesk::partials.page-header', [
        'eyebrow' => 'Helpdesk',
        'title' => 'Edit Ticket',
        'subtitle' =>
            'Update ownership, assignment, workflow status, product/service, project, team, category, priority and ticket details.',
    ])

    <form wire:submit.prevent="save" class="space-y-6">
        <div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900 shadow-sm">
            <div class="border-b border-zinc-700 bg-zinc-800/80 px-6 py-4">
                <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <div class="flex flex-wrap items-center gap-3">
                            <h2 class="text-lg font-semibold text-zinc-100">
                                {{ $ticket->reference }} · Ticket controls
                            </h2>

                            <span
                                class="inline-flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-200">
                                <i class="fa-regular fa-user text-zinc-400" aria-hidden="true"></i>
                                Owner:
                                <span class="font-semibold text-white">{{ $ticket->owner?->name ?? 'Unknown' }}</span>
                            </span>
                        </div>

                        <p class="mt-2 text-sm text-zinc-400">
                            Mandatory fields are marked with <span class="helpdesk-required-star">*</span>.
                            Assignment and status updates trigger configured workflow messages.
                        </p>
                    </div>

                    <a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
                        class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
                        Back to ticket
                    </a>
                </div>
            </div>

            <div class="grid gap-5 p-6 lg:grid-cols-3 xl:grid-cols-6">
                <div class="lg:col-span-3 xl:col-span-6">
                    <label class="block text-sm font-semibold text-zinc-200" for="subject">
                        Subject <span class="helpdesk-required-star">*</span>
                    </label>

                    <input id="subject" type="text" spellcheck="true" lang="en-GB" autocorrect="on" autocomplete="on" autocapitalize="sentences" inputmode="text" maxlength="180" wire:model.defer="subject"
                        class="mt-2 block h-14 w-full max-w-4xl rounded-xl border border-zinc-700 bg-zinc-950 px-4 text-base font-medium text-zinc-100 shadow-sm outline-none transition-colors duration-150 placeholder:text-zinc-500 focus:border-blue-500 focus:bg-zinc-950 focus:ring-2 focus:ring-blue-500/40"
                        data-dusk="ticket-edit-subject" dusk="ticket-edit-subject" />

                    @error('subject')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                @if ($companies->isNotEmpty())
                    <div class="xl:col-span-2">
                        <label class="block text-sm font-semibold text-zinc-200" for="company_id">
                            Company <span class="helpdesk-required-star">*</span>
                        </label>

                        <div class="mt-2" wire:ignore>
                            <select id="company_id" data-helpdesk-select2 data-placeholder="Select option"
                                data-wire-model="company_id"
                                class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                <option value="">Select company</option>
                                @foreach ($companies as $company)
                                    <option value="{{ $company->id }}" @selected((string) $company_id === (string) $company->id)>
                                        {{ $company->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        @error('company_id')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                @endif

                <div class="xl:col-span-2">
                    <label class="block text-sm font-semibold text-zinc-200" for="board_id">Board</label>

                    <div class="mt-2" wire:ignore>
                        <select id="board_id" data-helpdesk-select2 data-placeholder="Select option"
                            data-wire-model="board_id"
                            class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                            data-dusk="ticket-edit-board">
                            <option value="">No board</option>
                            @foreach ($boards as $board)
                                <option value="{{ $board->id }}" @selected((string) $board_id === (string) $board->id)>
                                    {{ $board->name }}{{ $board->owner ? ' · ' . $board->owner->name : '' }}</option>
                            @endforeach
                        </select>
                    </div>

                    @error('board_id')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="xl:col-span-2">
                    <label class="block text-sm font-semibold text-zinc-200" for="status_id">
                        Status <span class="helpdesk-required-star">*</span>
                    </label>

                    <div class="mt-2" wire:ignore>
                        <select id="status_id" data-helpdesk-select2 data-placeholder="Select option"
                            data-wire-model="status_id"
                            class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                            data-dusk="ticket-edit-status">
                            <option value="">No status</option>
                            @foreach ($statuses as $status)
                                <option value="{{ $status->id }}" @selected((string) $status_id === (string) $status->id)>{{ $status->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @error('status_id')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="xl:col-span-2">
                    <label class="block text-sm font-semibold text-zinc-200" for="priority_id">
                        Priority <span class="helpdesk-required-star">*</span>
                    </label>

                    <div class="mt-2" wire:ignore>
                        <select id="priority_id" data-helpdesk-select2 data-placeholder="Select option"
                            data-wire-model="priority_id"
                            class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                            data-dusk="ticket-edit-priority">
                            <option value="">Select priority</option>
                            @foreach ($priorities as $priority)
                                <option value="{{ $priority->id }}" @selected((string) $priority_id === (string) $priority->id)>{{ $priority->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @error('priority_id')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="xl:col-span-2">
                    <label class="block text-sm font-semibold text-zinc-200" for="agent_id">Assigned agent</label>

                    <div class="mt-2">
                        <select id="agent_id" wire:model.live="agent_id"
                            class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                            data-dusk="ticket-edit-agent">
                            <option value="">Unassigned</option>
                            @forelse ($agents as $agent)
                                <option value="{{ $agent->id }}">{{ $agent->name }} · {{ $agent->email }}
                                </option>
                            @empty
                                <option value="" disabled>No users available for assignment</option>
                            @endforelse
                        </select>
                    </div>

                    @error('agent_id')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="xl:col-span-2">
                    <label class="block text-sm font-semibold text-zinc-200" for="category_id">
                        Category <span class="helpdesk-required-star">*</span>
                    </label>

                    <div class="mt-2" wire:ignore>
                        <select id="category_id" data-helpdesk-select2 data-placeholder="Select option"
                            data-wire-model="category_id"
                            class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">No category</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @selected((string) $category_id === (string) $category->id)>
                                    {{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    @error('category_id')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="xl:col-span-2">
                    <label class="block text-sm font-semibold text-zinc-200" for="project_id">
                        Project <span class="helpdesk-required-star">*</span>
                    </label>

                    <div class="mt-2" wire:ignore>
                        <select id="project_id" data-helpdesk-select2 data-placeholder="Select option"
                            data-wire-model="project_id"
                            class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">No project</option>
                            @foreach ($projects as $project)
                                <option value="{{ $project->id }}" @selected((string) $project_id === (string) $project->id)>
                                    {{ $project->title ?? $project->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    @error('project_id')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="xl:col-span-2">
                    <label class="block text-sm font-semibold text-zinc-200" for="team_id">
                        Team <span class="helpdesk-required-star">*</span>
                    </label>

                    <div class="mt-2" wire:ignore>
                        <select id="team_id" data-helpdesk-select2 data-placeholder="Select option"
                            data-wire-model="team_id"
                            class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">No team</option>
                            @foreach ($teams as $team)
                                <option value="{{ $team->id }}" @selected((string) $team_id === (string) $team->id)>{{ $team->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @error('team_id')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="lg:col-span-3 xl:col-span-6">
                    <fieldset class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
                        <legend class="text-sm font-semibold text-zinc-200">Tags</legend>
                        <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                            <span class="text-xs text-zinc-500">
                                Optional · select all that apply
                            </span>
                        </div>

                        <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                            @forelse ($tags as $tag)
                                <label for="tag_{{ $tag->id }}"
                                    class="flex cursor-pointer items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm font-medium text-zinc-200 transition hover:border-blue-500 hover:bg-zinc-800">
                                    <input id="tag_{{ $tag->id }}" type="checkbox" wire:model.defer="tag_ids"
                                        value="{{ $tag->id }}"
                                        class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500">

                                    <span class="truncate">
                                        {{ $tag->name }}
                                    </span>
                                </label>
                            @empty
                                <div
                                    class="rounded-xl border border-dashed border-zinc-700 bg-zinc-900 px-4 py-3 text-sm text-zinc-400">
                                    No tags are available.
                                </div>
                            @endforelse
                        </div>

                        @error('tag_ids')
                            <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
                        @enderror

                        @error('tag_ids.*')
                            <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </fieldset>
                </div>

                <div class="xl:col-span-2">
                    <x-helpdesk::date-picker id="due_at" model="due_at" label="Due date"
                        placeholder="Select due date" value="{{ $due_at }}" />

                    @error('due_at')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="lg:col-span-3 xl:col-span-6">
                    <x-helpdesk::html-editor
                        model="body"
                        label="Details *"
                        rows="10"
                        placeholder="Update the ticket details..."
                        editor-dusk="ticket-edit-body-editor"
                    />

                    @error('body')
                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="lg:col-span-3 xl:col-span-6">
                    <div
                        class="overflow-hidden rounded-2xl border border-blue-500/30 bg-zinc-950/70 shadow-sm shadow-blue-950/30">
                        <div class="bg-gradient-to-r from-blue-700 via-sky-600 to-emerald-600 px-5 py-4 text-white">
                            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                                <div>
                                    <label
                                        class="flex items-center gap-2 text-base font-extrabold text-white drop-shadow-sm"
                                        for="attachments">
                                        <span
                                            class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/25">
                                            <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
                                        </span>
                                        Attachments
                                    </label>

                                    <p class="mt-2 max-w-2xl text-sm font-medium text-blue-50/90">
                                        Add screenshots, documents, logs or supporting files to help resolve the ticket.
                                    </p>
                                </div>

                                <label for="attachments"
                                    class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-blue-700 shadow-sm transition hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-white/80 focus:ring-offset-2 focus:ring-offset-blue-700">
                                    <i class="fa-solid fa-plus" aria-hidden="true"></i>
                                    <span>Add attachments</span>
                                </label>
                            </div>
                        </div>

                        <div class="p-4">

                            <input id="attachments" type="file" wire:model="attachments" multiple accept="{{ $helpdeskAttachmentAccept }}"
                                class="sr-only">

                            <div wire:loading.flex wire:target="attachments"
                                class="mt-4 items-center gap-2 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm font-medium text-blue-200">
                                <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
                                Uploading attachments...
                            </div>

                            @if ($ticket->attachments->isNotEmpty())
                                <div class="mt-4 space-y-3">
                                    <div
                                        class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
                                        <h3
                                            class="inline-flex items-center gap-2 text-sm font-extrabold text-emerald-200">
                                            <span
                                                class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-500 text-white shadow-sm">
                                                <i class="fa-solid fa-folder-open" aria-hidden="true"></i>
                                            </span>
                                            Existing attachments
                                        </h3>

                                        <span
                                            class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-extrabold text-emerald-800 shadow-sm ring-1 ring-emerald-300/70">
                                            <span class="inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
                                            {{ $ticket->attachments->count() }} file(s)
                                        </span>
                                    </div>

                                    @foreach ($ticket->attachments as $attachment)
                                        <div
                                            class="flex flex-col gap-3 rounded-xl border border-zinc-700 bg-zinc-900 p-3 text-sm sm:flex-row sm:items-center sm:justify-between">
                                            <a href="{{ route('helpdesk.attachments.download', $attachment->id) }}"
                                                target="_blank"
                                                class="min-w-0 font-medium text-blue-300 hover:text-blue-200">
                                                <i class="fa-regular fa-file mr-2" aria-hidden="true"></i>
                                                {{ $attachment->original_name ?? ($attachment->original_filename ?? ($attachment->filename ?? ($attachment->file_name ?? basename($attachment->path ?? ($attachment->file_path ?? ''))))) }}
                                            </a>

                                            <button type="button"
                                                wire:click="removeAttachment({{ $attachment->id }})"
                                                wire:confirm="Remove this attachment?"
                                                class="inline-flex items-center justify-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700">
                                                Remove
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if ($attachments !== [])
                                <div
                                    class="mt-4 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm text-blue-100">
                                    {{ count($attachments) }} new attachment(s) selected. Save the ticket to attach
                                    them.
                                </div>
                            @endif

                            @error('attachments')
                                <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
                            @enderror

                            @error('attachments.*')
                                <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 border-t border-zinc-700 bg-zinc-900 px-6 py-4">
                <button type="button" wire:click="clearForm"
                    class="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700">
                    Clear
                </button>

                <a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
                    class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
                    Cancel
                </a>

                <button type="submit"
                    class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
                    data-dusk="ticket-edit-submit" wire:loading.attr="disabled">
                    <i class="fa-regular fa-floppy-disk" aria-hidden="true"></i>
                    <span wire:loading.remove>Save Ticket</span>
                    <span wire:loading>Saving...</span>
                </button>
            </div>
        </div>
    </form>
</div>