@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));
@endphp

<!-- Contact Us -->
<section>
    <div
      class="2xl:container 2xl:mx-auto flex flex-col gap-12 px-2 py-10 md:flex-row-reverse md:px-[20px] lg:px-[105px]">
      <!-- right -->
      <section class="2xl:container 2xl:mx-auto space-y-2 text-[#2F2B2B] md:w-[50%]">
        <!-- Header -->
        <div class="space-y-2.5">
          <div class="w-12 h-1 bg-blue-500 rounded-full"></div>
          <h1 class="text-[18px] font-bold text-blue-500">
          {{$parent['title']}}
          </h1>
          <p class="text-[14px] text-[#354971]">
            {{$parent['description']}}
          </p>
        </div>
      </section>

      <!-- left -->
      <section class="text-[#00194c] md:w-[50%]">
        <form enctype="multipart/form-data" action="{{ route('rfp.store.frontend') }}" method="post" class="grid grid-cols-12 gap-4">
          @csrf
          <div class="col-span-12 space-y-1">
            <input type="text" id="name" name="title" placeholder="Title" required
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md">
          </div>

          <div class="col-span-12 space-y-1">
            <input type="text" id="Firstname" name="first_name" placeholder="Firstname" required
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md">
          </div>
          <div class="col-span-12 space-y-1"> 
            <input type="text" id="Lastname" name="last_name" placeholder="Lastname" required
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md">
          </div>
          <div class="col-span-12 space-y-1"> 
            <input type="text" id="job" name="position" placeholder="Position/Job itle"
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md">
          </div>
          <div class="col-span-12 space-y-1">
            <input type="text" id="Address" name="email" placeholder="Email Address" required
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md">
          </div>
          <div class="col-span-12 space-y-1">
            <input type="text" id="number" name="phone" placeholder="Phone Number"
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md">
          </div>

          <div class="col-span-12 space-y-1">

                <x-backend.input-dropdown id="company_location" name="company_location" class="field" :values=" [
                    ['id' => 'Baridhara', 'name' => 'Baridhara'],
                    ['id' => 'Gulshan', 'name' => 'Gulshan'],
                    ['id' => 'Mirpur', 'name' => 'Mirpur'],
                ]" :label_name="'name'" :label_id="'id'" :placeholder="'Company Location'" selected='' 
                required />
          </div>

          <div class="col-span-12 space-y-1">

            <x-backend.input-dropdown id="industry" name="industry" class="field" :values=" [
                ['id' => 'Oil', 'name' => 'Oil'],
                ['id' => 'Technology', 'name' => 'Technology'],
                ['id' => 'Hospitality', 'name' => 'Hospitality'],
            ]" :label_name="'name'" :label_id="'id'" :placeholder="'Industry'" selected='' 
            required />
          </div>

          <div class="col-span-12 space-y-1">
            <input type="text" id="company_name" name="company_name" placeholder="Company/Organisation name"
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md">
          </div>

          <div class="col-span-12 space-y-1">

            <x-backend.input-dropdown id="revenue" name="revenue" class="field" :values=" [
                ['id' => '100 Thousand', 'name' => '100 Thousand'],
                ['id' => '1 Million', 'name' => '1 Million'],
                ['id' => '1 Billion', 'name' => '1 Billion'],
            ]" :label_name="'name'" :label_id="'id'" :placeholder="'Yearly Revenue'" selected='' 
             />
          </div>
            
          <div class="col-span-12 space-y-2">
            <label for="file" class="block font-bold text-[rgb(102,102,102)]">Attachment</label>
            <input id="file" name='file' type="file" class="hidden">
            <label for="file" class="inline-block bg-white border rounded-full text-[rgb(102,102,102)] border-[rgb(102,102,102)] py-2 px-3 hover:text-white hover:bg-[rgb(102,102,102)] transition-colors duration-300">Choose File</label>
          </div>

          <div class="col-span-12 space-y-1">
            <textarea name="comment" id="" cols="30" rows="4" name="" placeholder="Comments and/or instructions" required
              class="px-4 py-2 w-full border border-blue-100 focus:border-blue-400 focus:shadow-md transition-colors focus:outline-none rounded-md"></textarea>
          </div>

          <div class="col-span-12 space-y-1 flex justify-between gap-3">
            
            <div class="pt-1"><input id="check" type="checkbox" name="terms_and_condition" required></div>
            <div><p>Terms And Conditions: I have read and accept the <a href="{{url('terms')}}" class="text-blue-500 hover:underline">Terms of Use </a>. Please read our <a href="{{url('privacy')}}" class="text-blue-500 hover:underline">privacy statement</a> to understand how we plan to use your personal information.</p></div>
            
          </div>
          
          <div class="col-span-12">
            <button
              class="text-white bg-[rgb(16,118,168)] block w-[20%] px-4 py-2 rounded-full hover:bg-blue-700 transition-colors duration-300 font-semibold">Submit</button>
          </div>

        </form>
      </section>
    </div>
  </section>

  @push('js')
  <script>
    $
  </script>
  @endpush