@extends('admin.layouts.main')

@section('content')

    <div class="row">
        <div class="col-xs-10">
            <h1>Form Response: {{ $form->form->title }}</h1>
            <p class="text-muted">Submitted on {{ $form->created_at->setTimezone('Europe/Brussels')->format('d/m/Y H:i:s') }}</p>
        </div>
        @if($canView)
            <div class="col-xs-2">
                <a href="{{ url('/admin/form-responses') }}" class="back-btn btn btn-default" type="button" data-toggle="tooltip" data-placement="bottom" title="" class="btn btn-default pull-right" data-original-title="{{trans('backend.back_list')}}">
                    <span class="icon glyphicon glyphicon-th-list"></span>
                </a>
            </div>
        @endif
    </div>

    <div id="view_form" class="generic_wrapper">
        <div class="row form-responses">
            @if($form->form->description)
                <div class="col-xs-12">
                    <p class="form-description">{{ $form->form->description }}</p>
                </div>
            @endif

            @foreach($form->form->formSections as $section)
                <h2 class="col-xs-12">{{ $section->title }}</h2>

                @if($section->intro_text)
                    <div class="col-xs-12">
                        <p class="section-intro">{{ $section->intro_text }}</p>
                    </div>
                @endif

                @foreach($section->formFields as $field)
                    @php
                        $fieldKey = "field_{$field->form_field_id}";
                        $responses = is_array($form->responses) ? $form->responses : (json_decode($form->responses, true) ?? []);
                        $fieldValue = $responses[$fieldKey] ?? null;
                    @endphp

                    @if($fieldValue !== null && $fieldValue !== '')
                        <div class="col-xs-12 {{ $field->layout === 'double' ? 'col-sm-6' : '' }}">
                            <span><strong>{{ $field->title }}:</strong></span>

                            @if($field->field_type === 'checkbox' && is_array($fieldValue))
                                {{-- Checkbox field - show selected options --}}
                                <ul class="checkbox-values">
                                    @foreach($fieldValue as $selectedValue)
                                        @php
                                            $option = $field->fieldOptions->where('value', $selectedValue)->first();
                                            $displayValue = $selectedValue;
                                        @endphp
                                        <li>{{ $displayValue }}</li>
                                    @endforeach
                                </ul>
                            @elseif($field->field_type === 'radio')
                                {{-- Radio field - show selected option --}}
                                @php
                                    $option = $field->fieldOptions->where('value', $fieldValue)->first();
                                    $displayValue = $fieldValue;
                                @endphp
                                {{ $displayValue }}
                            @elseif($field->field_type === 'textarea')
                                {{-- textarea field - preserve line breaks --}}
                                <div class="textarea-value">{!! nl2br(e($fieldValue)) !!}</div>
                            @elseif($field->field_type === 'members')
                                {{-- Members field - show company name --}}
                                @php
                                    $member = \App\Models\Member::full()
                                        ->select('members.*', 'member_languages.*')
                                        ->where('members.id', $fieldValue)
                                        ->first();
                                @endphp
                                {{ $member ? $member->title : $fieldValue }}
                            @else
                                {{-- Text and email fields --}}
                                {{ $fieldValue }}
                            @endif
                        </div>
                    @endif
                @endforeach
            @endforeach

            {{-- Response metadata --}}
            <h2 class="col-xs-12">Response Information</h2>
            <div class="col-xs-12 col-sm-6">
                <span><strong>Response ID:</strong></span> {{ $form->id }}
            </div>
            <div class="col-xs-12 col-sm-6">
                <span><strong>Submitted at:</strong></span> {{ $form->created_at->setTimezone('Europe/Brussels')->format('d/m/Y H:i:s') }}
            </div>
            <div class="col-xs-12 col-sm-6">
                <span><strong>Status:</strong></span>
                @if($form->isCancelled())
                    <span class="label label-danger">Cancelled</span>
                @else
                    <span class="label label-success">Confirmed</span>
                @endif
            </div>
            @if($form->cancelled_at)
                <div class="col-xs-12 col-sm-6">
                    <span><strong>Cancelled at:</strong></span> {{ $form->cancelled_at->setTimezone('Europe/Brussels')->format('d/m/Y H:i:s') }}
                </div>
            @endif
        </div>
    </div>

    <style>
        .form-description {
            background-color: #f8f9fa;
            padding: 15px;
            border-left: 4px solid #007bff;
            margin-bottom: 20px;
        }

        .section-intro {
            font-style: italic;
            color: #666;
            margin-bottom: 15px;
        }

        .checkbox-values {
            margin: 0;
            padding-left: 20px;
        }

        .textarea-value {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            margin-top: 5px;
        }

        .form-responses > div {
            margin-bottom: 15px;
        }

        .form-responses h2 {
            margin-top: 30px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }
    </style>
@stop