@extends('layouts.app')

@section('content')
    <!--begin::App Content Header-->
    <div class="app-content-header"> <!--begin::Container-->
        <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
                <div class="col-sm-6">
                    <h3 class="card-title">Borang Permohonan myGAP 1.1 - {{ $form->title }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            myGAP 1.1 form
                        </li>
                    </ol>
                </div>
            </div>
            <!--end::Row-->
        </div> <!--end::Container-->
    </div>
    <!--end::App Content Header-->

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div
                        style="display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid black; padding-bottom: 10px; margin-bottom: 20px;">
                        <!-- Left Logo -->
                        <img src="{{ asset('assets/img/jabatan-pertanian.jpg') }}" alt="Left Logo" style="width:15%">

                        <div style="text-align: center;">
                            <h5 class="mb-0 text-decoration-underline fw-bold">
                                BORANG PERMOHONAN MYGAP 1-1
                            </h5>
                            <h6 class="fw-bold">
                                APPLICATION
                            </h6>
                            <p class="fst-italic">(SILA RUJUK PANDUAN MENGISI BORANG)</p>
                        </div>

                        <img src="{{ asset('assets/img/mygap.png') }}" alt="Right Logo" style="width:15%">
                    </div>
                
                </div>
                <form action="{{ route('form.submit', ['form' => $form->id]) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id_form" value="{{ $form->id }}">
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <!-- Sections Loop -->
                        @foreach ($sections as $section)
                            <div class="form-section mb-4">
                                <div class="card card-warning">
                                    <div class="card-header">
                                        <h5 class="card-title">{{ $section->title }}</h5>
                                    </div>
                                    <div class="card-body">
                                        @foreach ($section->form_question as $question)
                                            <div class="form-group row mb-4">
                                                <label for="question_{{ $question->id }}" class="col-sm-6 col-form-label">
                                                    {!! $question->tittle_numbering !!}. {!! $question->question !!}
                                                </label>
                                                <div class="col-sm-6">
                                                    @include('partials.question', [
                                                        'question' => $question,
                                                    ])
                                                    @error('answers.' . $question->id)
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="card-footer d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection