@extends('layouts/layoutMaster')

@section('title', 'Fill Form - ' . $form->name)

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/select2/select2.scss'])
    <style>
        .signature-container {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .signature-canvas {
            width: 100% !important;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            touch-action: none;
            display: none; /* Hide initially */
        }

        .signature-controls {
            margin-top: 10px;
            display: none; /* Hide initially */
        }

        .location-loading {
            display: none;
            margin-left: 10px;
        }

        @media (max-width: 576px) {
            .signature-canvas {
                height: 150px;
            }
        }
    </style>
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('page-script')
    @vite(['resources/js/formUser_create-manage.js'])
@endsection

@section('content')
    <h4 class="mb-3">Fill Form: <strong>{{ $form->name }}</strong></h4>

    @if(isset($responseValues))
    <form id="dynamic-form" method="POST" action="{{ route('formUser-list.update', $formResponse->id) }}" enctype="multipart/form-data">
    @method('PUT')
    @else
    <form id="dynamic-form" method="POST" action="{{ route('formUser-list.store') }}" enctype="multipart/form-data">
    @endif
        @csrf
        <input type="hidden" name="form_id" value="{{ $form->id }}">
        @if(isset($taskId))
            <input type="hidden" name="task_id" value="{{ $taskId }}">
        @endif
        @if(isset($responseValues))
        <input type="hidden" name="form_response_id" value="{{ $formResponse->id }}">
        @endif
        <div class="row">
            <div class="col-md-6">
                @foreach ($fields as $field)
                    <div class="mb-3 p-3 rounded shadow-sm">
                        <label class="fw-bold mb-1">{{ $field->label }}
                            @if ($field->required)
                                <span class="text-danger">*</span>
                            @endif
                        </label>

                        @php 
                            $required = $field->required ? 'required' : '';
                            $value = isset($responseValues[$field->id]) ? $responseValues[$field->id] : '';
                        @endphp

                        @if ($field->type === 'description')
                            <div class="text-muted">{{ $field->label }}</div>

                        @elseif ($field->type === 'dropdown')
                            <select class="form-select" name="field_{{ $field->id }}" {{ $required }}>
                                @foreach (json_decode($field->options, true) ?? [] as $option)
                                    <option value="{{ $option }}" {{ $value == $option ? 'selected' : '' }}>{{ $option }}</option>
                                @endforeach
                            </select>

                        @elseif ($field->type === 'number')
                            <input type="number" class="form-control" name="field_{{ $field->id }}" value="{{ $value }}" {{ $required }}>

                        @elseif ($field->type === 'yes/no')
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="field_{{ $field->id }}" value="Yes" {{ $value == 'Yes' ? 'checked' : '' }} {{ $required }}>
                                    <label class="form-check-label">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="field_{{ $field->id }}" value="No" {{ $value == 'No' ? 'checked' : '' }}>
                                    <label class="form-check-label">No</label>
                                </div>
                            </div>

                        @elseif ($field->type === 'location')
                            <textarea class="form-control" name="field_{{ $field->id }}" rows="2" placeholder="Enter location or use GPS" {{ $required }}>{{ $value }}</textarea>
                            <div class="d-flex align-items-center mt-2">
                                <button type="button" class="btn btn-outline-primary btn-sm fetch-location">
                                    <i class="bx bx-map me-1"></i> Get My Location
                                </button>
                                <div class="location-loading">
                                    <span class="spinner-border spinner-border-sm text-primary" role="status"></span>
                                    <span class="ms-1">Fetching location...</span>
                                </div>
                            </div>

                        @elseif ($field->type === 'signature')
                            <div class="signature-container mt-2" data-id="{{ $field->id }}">
                                <button type="button" class="btn btn-outline-primary btn-sm start-signature mb-2">
                                    <i class="bx bx-pencil me-1"></i> {{ $value ? 'Edit Signature' : 'Click to Sign' }}
                                </button>
                                <canvas class="signature-canvas"></canvas>
                                <div class="signature-controls w-100 d-flex justify-content-between">
                                    <button type="button" class="btn btn-sm btn-outline-secondary clear-signature">
                                        <i class="bx bx-x me-1"></i> Clear
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-success save-signature">
                                        <i class="bx bx-check me-1"></i> Save
                                    </button>
                                </div>
                                <input type="hidden" name="field_{{ $field->id }}" class="signature-data" value="{{ $value }}">
                                <div class="signature-preview mt-2 text-center {{ $value ? '' : 'd-none' }}">
                                    <p class="text-muted small mb-1">Your signature:</p>
                                    <img src="{{ $value ? asset('storage/' . $value) : '' }}" class="img-fluid border rounded signature-preview-img" style="max-height: 80px;">
                                </div>
                            </div>

                        @elseif ($field->type === 'image upload')
                            @if($value)
                                <div class="mb-2">
                                    <img src="{{ asset('storage/' . $value) }}" class="img-fluid border rounded" style="max-height: 100px;">
                                </div>
                            @endif
                            <input type="file" class="form-control" name="field_{{ $field->id }}" accept="image/*" {{ $value ? '' : $required }}>

                        @elseif ($field->type === 'file upload')
                            @if($value)
                                <div class="mb-2">
                                    <a href="{{ asset('storage/' . $value) }}" target="_blank" class="btn btn-sm btn-outline-info">
                                        <i class="bx bx-file me-1"></i> View Uploaded File
                                    </a>
                                </div>
                            @endif
                            <input type="file" class="form-control" name="field_{{ $field->id }}" {{ $value ? '' : $required }}>

                        @elseif ($field->type === 'date')
                            <input type="date" class="form-control" name="field_{{ $field->id }}" value="{{ $value }}" {{ $required }}>

                        @else
                            <input type="text" class="form-control" name="field_{{ $field->id }}" value="{{ $value }}" {{ $required }}>
                        @endif
                    </div>
                @endforeach

                <div class="mt-3">
                    <button type="submit" class="btn btn-dark">Submit Form</button>
                </div>
            </div>
        </div>
    </form>
@endsection