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

<!-- Contact Us -->
<section style="background: url({{asset('images/'.$parent['background_img'])}})" class="bg-cover bg-no-repeat">
    <div
      class="2xl:container 2xl:mx-auto px-2 md:px-[20px] lg:px-[105px] py-10 flex flex-col gap-14 md:flex-row md:items-center">
      <!-- left -->
      <section class="container mx-auto mb-auto space-y-6 text-[#2F2B2B] md:w-[50%]">
        <!-- Header -->
        <div class="space-y-2.5">
          <div class="w-12 h-1 bg-red-500 rounded-full"></div>
          <h2 class="text-[18px] font-bold text-red-500">
          {{$parent['title']}}
          </h2>
          <h1 class="text-[25px] font-extrabold leading-[42px] lg:text-[35px] text-[#6d0117]">
            {{$parent['header']}}
          </h1>
          <p class="text-[14px] text-[#834f4f]">
            {{$parent['description']}}
          </p>
        </div>
        <form enctype="multipart/form-data" action="{{ route('contact.store.frontend') }}" method="post"  class="grid grid-cols-12 gap-4 ">
          @csrf
          <div class="col-span-12 md:col-span-6 space-y-1">
            <label for="name" class="block text-sm font-medium">Your Name <span class="text-red-500">*</span></label>
            <input type="text" id="name" name="name" placeholder="Name"
              class="px-4 py-2 w-full border border-red-100 focus:border-red-400 focus:shadow-md transition-colors focus:outline-none rounded-md focus:ring-0">
          </div>
          <div class="col-span-12 md:col-span-6 space-y-1">
            <label for="email" class="block text-sm font-medium">Your Email <span class="text-red-500">*</span></label>
            <input type="text" id="email" name="email" placeholder="Email"
              class="px-4 py-2 w-full border border-red-100 focus:border-red-400 focus:shadow-md transition-colors focus:outline-none rounded-md focus:ring-0">
          </div>
          <div class="col-span-12 md:col-span-6 space-y-1">
            <label for="phone" class="block text-sm font-medium">Your Phone <span class="text-red-500">*</span></label>
            <input type="text" id="phone" name="phone" placeholder="Phone"
              class="px-4 py-2 w-full border border-red-100 focus:border-red-400 focus:shadow-md transition-colors focus:outline-none rounded-md focus:ring-0">
          </div>
          <div class="col-span-12 md:col-span-6 space-y-1">
            <label for="address" class="block text-sm font-medium">Your Address <span
                class="text-red-500">*</span></label>
            <input type="text" id="address" name="address" placeholder="Address"
              class="px-4 py-2 w-full border border-red-100 focus:border-red-400 focus:shadow-md transition-colors focus:outline-none rounded-md focus:ring-0">
          </div>
          <div class="col-span-12 space-y-1">
            <label for="subject" class="block text-sm font-medium">Subject <span class="text-red-500">*</span></label>
            <input type="text" id="subject" name="subject" placeholder="Subject"
              class="px-4 py-2 w-full border border-red-100 focus:border-red-400 focus:shadow-md transition-colors focus:outline-none rounded-md focus:ring-0">
          </div>
          <div class="col-span-12 space-y-1">
            <label for="description" class="block text-sm font-medium">Content <span class="text-red-500">*</span></label>
            <textarea name="description" id="description" cols="30" rows="4" placeholder="Type your text here"
              class="px-4 py-2 w-full border border-red-100 focus:border-red-400 focus:shadow-md transition-colors focus:outline-none rounded-md focus:ring-0"></textarea>
          </div>

          {{-- <div class="col-span-12">          
            <label class="block mb-2 text-sm font-medium text-black" for="file_input">Upload file</label>
            <input class="block w-full text-sm text-black border rounded-lg cursor-pointer bg-white focus:outline-none" id="file_input" type="file">
          </div> --}}

          <div class="col-span-12">          
              <label class="block mb-2 text-sm font-medium text-black" for="file_input">Upload file</label>
              <div class="relative before:absolute before:bg-red-700 before:top-0 before:left-0 before:w-[115px] before:h-full before:rounded-l-lg before:text-sm before:content-['Upload_file'] before:text-white before:flex before:text-center before:items-center before:justify-center"> 
              <input type="file" id="input_file" name="file" class="border border-red-100 w-full rounded-md bg-white">
              </div>
          </div>
          
          {!! NoCaptcha::renderJs() !!}
          {!! NoCaptcha::display() !!}
          @if ($errors->has('g-recaptcha-response'))
              <small class="block col-span-12 text-red-500">{{$errors->first('g-recaptcha-response')}}</small>
          @endif

          <div class="col-span-12">
            <button
              class="text-white bg-red-600 block w-full px-4 py-2 rounded-full hover:bg-red-700 transition-colors duration-300 font-semibold">Send</button>
          </div>

        </form>
      </section>
      <!-- right -->
      <section class="text-[#6d0117] md:w-[50%] space-y-4">

          @if (!empty($child))
            @foreach ($child as $value )
            <div class="space-y-2 flex justify-left gap-5 items-center">
            <div class="mb-auto text-4xl text-white">
              <span class="rounded-full w-[70px] h-[70px] bg-[#6d0117] flex justify-center items-center text-center"><i class="{{$value['icon']}}"></i></span>
            </div>
              <div class="w-[45%]">
                <h1 class="text-[18px] font-bold">{{$value['offiece']}}</h1>
                <div class="text-[#834f4f] text-[16px]">
                  <p>{{$value['address']}}</p>
                    <p>Email: {{$value['email']}}</p>
                    <p>Phone: {{$value['phone']}}</p>
                </div>
              </div>
            </div>
            @endforeach
          @endif

        <div class="mt-5 flex justify-center items-center">
          <iframe class="w-full" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.8493989588196!2d90.3900112744867!3d23.752749288687756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b938f95b8afd%3A0xa95affda34482df6!2sDhaka%20Trade%20Centre!5e0!3m2!1sen!2sbd!4v1733122448243!5m2!1sen!2sbd"  height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        
      </section>
    </div>
  </section>