@extends('layouts.head_office_app')
@section('title', 'Head office Settings')



@if ($is_intelligence === null)
@section('sub-header')
<div class="container mx-auto">
    <a href="{{ route('head_office.contacts.view', $new_contact->id) }}" class="link text-info">Details</a>
    <a href="{{ route('head_office.contact_view_timeline', $new_contact->id) }}" class="link text-info ms-4">Timeline</a>
    <a href="{{ route('head_office.contact_intelligence', $new_contact->id) }}"
        class="link text-info ms-4">Intelligence</a>
    <a href="{{ route('head_office.contact_matchs', $new_contact->id) }}" class="link text-info ms-4">Matches</a>
</div>
@endsection
@endif
@section('content')


    <div id="content" style="margin: 0;padding:0;">

        @include('layouts.error')

        <div class="container-lg mx-auto">
            <div class="d-flex justify-content-center gap-5 my-3">
                {{-- contanct 1 --}}
                <div class="border rounded-3 p-3" style="width: 30%;">
                    <h4 class="text-center">1st Matching Contact</h4>
                    @php
                        $unique_new_contact = $new_contact;
                    @endphp
                    @include('head_office.contacts.contact_match_component',['main_other_contact' => $unique_new_contact, 'main_new_contact' => $other_contact_unique])
                </div>
                {{-- contanct 2 --}}
                <div class="border rounded-3 p-3" style="width: 30%;">
                    <h4 class="text-center">2nd Matching Contact</h4>
                    @include('head_office.contacts.contact_match_component',['main_other_contact' => $other_contact_unique, 'main_new_contact' => $unique_new_contact])
                </div>
                {{-- Final contact --}}
                <div class="border rounded-3 p-3" style="width: 30%;min-height:100%;">
                    <h4 class="text-center">Final Contact</h4>
                    <form id="final-contact-form" action="{{ route('head_office.contacts.save_final_contact') }}"  method="POST">
                        @csrf
                        <input type="hidden" name="new_contact_id" value="{{ $new_contact->id }}">
                        <input type="hidden" name="other_contact_id" value="{{ $other_contact_unique->id }}">
                        <div id="final-contact-fields">
                            {{-- Fields will be dynamically inserted here --}}
                        </div>
                        <button type="submit" class="btn btn-success w-100 mt-3">Save Final Contact</button>
                    </form>
                </div>
                
            </div>
        </div>
    </div>


@section('scripts')





    <script src="{{ asset('js/alertify.min.js') }}"></script>
    <script>
 $(document).ready(() => {
  // Helper function to capitalize the first letter of each word
  function capitalizeEachWord(str) {
    return str
      .split(" ")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ")
  }

  $('input[type="radio"], input[type="checkbox"]').on("click", function () {
    const fieldId = $(this).attr("name").replace("[]", "") // Remove [] for checkboxes
    const finalContactFields = $("#final-contact-fields")
    const existingField = $("#final_" + fieldId)

    if ($(this).is(":radio")) {
      const value = $(this).val()

      if (existingField.length) {
        existingField.find("p").text(value)
        existingField.find("input").val(value)
      } else {
        const fieldDiv = $(`
                    <div class="mb-2" id="final_${fieldId}">
                        <label style="margin: 0;font-size: 12px;">${capitalizeEachWord(fieldId.replace(/_/g, " "))}</label>
                        <div class="d-flex align-items-center gap-2 justify-content-between">
                            <p class="m-0">${value}</p>
                            <input type="hidden" name="${fieldId}" value="${value}">
                        </div>
                    </div>
                `)
        finalContactFields.append(fieldDiv)
      }
    } else if ($(this).is(":checkbox")) {
      const selectedValues = []

      // Find all checked checkboxes with the same fieldId
      $(`input[name="${fieldId}[]"]:checked`).each(function () {
        selectedValues.push($(this).val())
      })

      if (existingField.length) {
        existingField.find("p").text(selectedValues.join(", "))
        existingField.find("input").val(JSON.stringify(selectedValues))
      } else {
        const fieldDiv = $(`
                    <div class="mb-2" id="final_${fieldId}">
                        <label style="margin: 0;font-size: 12px;">${capitalizeEachWord(fieldId.replace(/_/g, " "))}</label>
                        <div class="d-flex align-items-center gap-2 justify-content-between">
                            <p class="m-0">${selectedValues.join(", ")}</p>
                            <input type="hidden" name="${fieldId}" value='${JSON.stringify(selectedValues)}'>
                        </div>
                    </div>
                `)
        finalContactFields.append(fieldDiv)
      }
    }
  })
})




    </script>








@endsection


@endsection