@extends('app')

@section('content')
   <div class="max-w-screen-2xl mx-auto px-8 py-8" id="Intake">

            

            <!-- Center column -->
            <div class="space-y-8">
                @include('intake.search')

                  {{-- ✅ Local & Offline-safe Notifications --}}
                @if ($errors->any())
                    <div id="alert-error"
                        class="fixed top-5 right-5 z-50 flex items-start p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 shadow-md animate-fade-in"
                        role="alert">
                        {{-- Inline SVG icon (local-safe) --}}
                        <svg class="w-5 h-5 mt-0.5 me-2 flex-shrink-0 text-red-600" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20" fill="currentColor">
                            <path
                                d="M18 10A8 8 0 1 1 2 10a8 8 0 0 1 16 0ZM9 6a1 1 0 1 0 2 0v4a1 1 0 0 1-2 0V6Zm1 8a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 10 14Z" />
                        </svg>

                        <div class="flex-1">
                            <p class="font-semibold mb-1">Please check your input:</p>
                            <ul class="list-disc list-inside space-y-0.5">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>

                        {{-- Close button (no external dependency) --}}
                        <button type="button"
                            class="ms-3 text-red-600 hover:text-red-900 font-bold rounded-lg focus:outline-none"
                            onclick="this.parentElement.remove()">×</button>
                    </div>
                @endif

                @if (session('Success'))
                    <div id="alert-success"
                        class="fixed top-5 right-5 z-50 flex items-center p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 shadow-md animate-fade-in"
                        role="alert">
                        {{-- Inline SVG icon --}}
                        <svg class="w-5 h-5 me-2 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path
                                d="M10 18A8 8 0 1 1 10 2a8 8 0 0 1 0 16Zm-1.293-4.707 5-5-1.414-1.414L9 10.586 7.707 9.293 6.293 10.707l2.414 2.586Z" />
                        </svg>

                        <span class="font-medium">Success:</span>
                        <span class="ml-1">{{ session('Success') }}</span>

                        <button type="button"
                            class="ms-3 text-green-600 hover:text-green-900 font-bold rounded-lg focus:outline-none"
                            onclick="this.parentElement.remove()">×</button>
                    </div>
                @endif
                
                <form id = "inputform ">
                    <div id="accordion-collapse" data-accordion="collapse">
                        <h2 id="accordion-collapse-heading-1">
                            <button type="button"
                               class="flex items-center justify-between w-full px-6 py-5 font-semibold
                                bg-white text-gray-800 border border-blue-100 rounded-t-2xl
                                hover:bg-blue-50 transition shadow-sm"
                                data-accordion-target="#accordion-collapse-body-1" aria-expanded="true"
                                aria-controls="accordion-collapse-body-1">
                                <span class="flex items-center gap-3">
                                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                    Client Information
                                </span>
                                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M9 5 5 1 1 5" />
                                </svg>
                            </button>
                        </h2>
                        <div id="accordion-collapse-body-1" class=" " aria-labelledby="accordion-collapse-heading-1">
                            @include('intake.client')
                        </div>

                         <h2 id="accordion-collapse-heading-4">
                            <button type="button"
                               class="flex items-center justify-between w-full px-6 py-5 font-semibold
                                bg-white text-gray-800 border-x border-b border-blue-100
                                hover:bg-blue-50 transition shadow-sm"
                                data-accordion-target="#accordion-collapse-body-4" aria-expanded="true"
                                aria-controls="accordion-collapse-body-4">
                                <span class="flex items-center gap-3">
                                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                    Family Composition
                                </span>
                                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M9 5 5 1 1 5" />
                                </svg>
                            </button>
                        </h2>
                        <div id="accordion-collapse-body-4" class=" " aria-labelledby="accordion-collapse-heading-1">
                            @include('intake.family')
                        </div>

                        <h2 id="accordion-collapse-heading-2">
                            <button type="button"
                               class="flex items-center justify-between w-full px-6 py-5 font-semibold
                                bg-white text-gray-800 border-x border-b border-blue-100
                                hover:bg-blue-50 transition shadow-sm"
                                data-accordion-target="#accordion-collapse-body-2" aria-expanded="false"
                                aria-controls="accordion-collapse-body-2">
                                <span class="flex items-center gap-3">
                                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                   REPRESENTATIVE’S IDENTIFTYING INFORMATION
                                </span>
                                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M9 5 5 1 1 5" />
                                </svg>
                            </button>
                        </h2>
                        <div id="accordion-collapse-body-2" class="   " aria-labelledby="accordion-collapse-heading-2">

                            @include('intake.representative')

                        </div>
                        <h2 id="accordion-collapse-heading-3">
                            <button type="button"   
                               class="flex items-center justify-between w-full px-6 py-5 font-semibold
                                bg-white text-gray-800 border-x border-b border-blue-100
                                hover:bg-blue-50 transition shadow-sm"
                                data-accordion-target="#accordion-collapse-body-3" aria-expanded="false"
                                aria-controls="accordion-collapse-body-3">
                                <span class="flex items-center gap-3">
                                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                   Beneficiary Category / Assistance Provided
                                </span>
                                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M9 5 5 1 1 5" />
                                </svg>
                            </button>
                        </h2>
                        <div id="accordion-collapse-body-3" class=" " aria-labelledby="accordion-collapse-heading-3">
                            @include('intake.category')
                        </div>
                    </div>
                </form>
            </div>
          
         
    </div>


    <!-- Review Modal -->
    <div id="reviewModal" tabindex="-1" aria-hidden="true"
        class="hidden fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto 
         md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black/50 flex justify-center items-center">
        @include('intake.summary')
    </div>

@endsection