@extends('daylight::layouts.app')

@section('title', __('daylight::forms.submission') . ' #' . $submission->id)

@section('content')
    <div x-data="{ showConfirmDeleteModal: false }">
    <x-daylight::page-header :title="__('daylight::forms.submission') . ' #' . $submission->id">
        <livewire:daylight::resend-submission :form="$form" :submission="$submission" />

        <x-daylight::buttons.secondary href="{{ route('daylight.content.forms.submissions', $form) }}" element="a">
            {{ __('daylight::forms.back_to_submissions') }}
        </x-daylight::buttons.secondary>

        @can('delete:pages')
            <x-daylight::buttons.danger @click.prevent="showConfirmDeleteModal = true">
                {{ __('daylight::general.delete') }}
            </x-daylight::buttons.danger>
        @endcan
    </x-daylight::page-header>

    <x-daylight::input.group :label="__('daylight::forms.form_name')">
        <p class="block text-sm leading-6 text-gray-700 sm:pt-1.5">
            <a href="{{ route('daylight.content.forms.edit', $form) }}" class="text-sky-700">
                {{ $form->name }}
            </a>
        </p>
    </x-daylight::input.group>

    <x-daylight::input.group :label="__('daylight::forms.submitted_at')">
        <p class="block text-sm leading-6 text-gray-700 sm:pt-1.5">{{ $submission->created_at->isoFormat('LLL') }}</p>
    </x-daylight::input.group>

    @if($submission->ip_address)
        <x-daylight::input.group :label="__('daylight::forms.ip_address')">
            <p class="block text-sm leading-6 text-gray-700 sm:pt-1.5">{{ $submission->ip_address }}</p>
        </x-daylight::input.group>
    @endif

    @if($submission->page_url)
        <x-daylight::input.group :label="__('daylight::forms.page_url')">
            <p class="block text-sm leading-6 text-gray-700 sm:pt-1.5">
                <a href="{{ $submission->page_url }}" target="_blank" class="text-sky-700">{{ $submission->page_url }}</a>
            </p>
        </x-daylight::input.group>
    @endif

    <div class="mt-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ __('daylight::forms.submitted_data') }}</h2>

        @php
            $fields = collect($form->fields);
        @endphp

        @foreach($fields as $field)
            @php
                $fieldId = $field['id'];
                $label = $field['label'] ?: $field['type'];
                $value = $submission->data[$fieldId] ?? null;
                $fileData = $submission->files[$fieldId] ?? null;
            @endphp

            @if($field['type'] === 'heading')
                @continue
            @endif

            <x-daylight::input.group :label="$label">
                @if($field['type'] === 'file' && $fileData)
                    <div class="block text-sm leading-6 text-gray-700 sm:pt-1.5">
                        @foreach((array) $fileData as $path)
                            @php
                                $filename = basename($path);
                                $url = null;
                                try {
                                    if (\Illuminate\Support\Facades\Storage::disk('media')->exists($path)) {
                                        $url = \Illuminate\Support\Facades\Storage::disk('media')->temporaryUrl($path, now()->addHours(24));
                                    }
                                } catch (\Exception $e) {
                                    // Storage unavailable
                                }
                            @endphp
                            @if($url)
                                <a href="{{ $url }}" target="_blank" class="text-sky-700 inline-flex items-center gap-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                    {{ $filename }}
                                </a>
                            @else
                                <span class="text-gray-500">{{ $filename }}</span>
                            @endif
                        @endforeach
                    </div>
                @elseif($field['type'] === 'checkbox')
                    <p class="block text-sm leading-6 text-gray-700 sm:pt-1.5">
                        {{ $value ? __('daylight::general.yes') : __('daylight::general.no') }}
                    </p>
                @else
                    <p class="block text-sm leading-6 text-gray-700 sm:pt-1.5">
                        {{ is_array($value) ? implode(', ', $value) : ($value ?: '-') }}
                    </p>
                @endif
            </x-daylight::input.group>
        @endforeach
    </div>

    <x-daylight::modal.confirm-delete-modal>
        <x-slot name="content">
            <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">{{ __('daylight::forms.delete_submission_title') }}</h3>
            <div class="mt-2">
                <p class="text-sm text-gray-500">
                    {{ __('daylight::forms.delete_submission_confirm') }}
                </p>
            </div>
        </x-slot>

        <x-slot name="footer">
            <form method="post" action="{{ route('daylight.content.forms.submissions.destroy', [$form, $submission]) }}">
                @csrf
                @method('DELETE')

                <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100 sm:mt-0 sm:w-auto" @click.prevent="showConfirmDeleteModal = false">
                    {{ __('daylight::general.cancel') }}
                </button>

                <button type="submit" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-2 sm:w-auto">
                    {{ __('daylight::general.delete') }}
                </button>
            </form>
        </x-slot>
    </x-daylight::modal.confirm-delete-modal>
    </div>
@endsection
