@extends('layouts.app')

@section('title', 'Add New Contact')
{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/contact.css') }}">
<style>
    .select2-container .select2-selection--multiple,
    .select2-container .select2-selection--single {
        min-height: 38px !important;
        border: 1px solid #ced4da !important;
    }

    .select2-container .select2-selection__arrow {
        display: block !important;
    }

    /* Ensure the dropdown arrow is visible */
    .select2-container--default .select2-selection--multiple {
        padding-right: 30px;
        /* Space for the arrow */
        position: relative;
    }

    .select2-container--default .select2-selection--multiple::after {
        content: "▼";
        font-size: 8px;
        position: absolute;
        right: 5px;
        top: 35%;
        transform: translateY(-50%);
        color: #888888;
        pointer-events: none;
    }
</style>
@endpush
{{-- page connect --}}
@section('content')
<x-content-body>
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />
    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Add New Contact</h4>
        </x-slot:title>

        <x-form id="add-contact-form">
            @csrf

            <div class="row ">

                <div class="mb-3 col-md-3">
                    <x-input-label for="contact_type" :value="__('Contact Type')" />
                    <select id="contact_type" name="contact_type" class="form-control form-control-sm wide multi-select">
                        <option value="" selected>Select contact type</option> <!-- Default option -->
                        <option value="general">General</option>
                        <option value="Professionals/Contractors">Professionals/Contractors</option>
                        <option value="investors">Investors</option>
                    </select>
                </div>
                {{-- {{ dd($transactionAssociations); }} --}}
                <div class="mb-3 col-md-3">
                    <label class="form-label" for="transaction-associate-select">General - Client Type </label>
                    <select class="multi-select form-control form-control-sm wide assignedTransactionAssociate"
                        multiple name="assign_title[]" id="transaction-associate-select" data-placeholder="Select Client Type...">
                        {{-- <option value="" disabled selected hidden>Select client type...</option> --}}
                        @foreach ($transactionAssociations as $value => $label)
                        <option value="{{ $label }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>



                <div class="mb-3 col-md-3">
                    <label class="form-label" for="assign-title-select">Professional Business Type</label>
                    <select class="multi-select form-control form-control-sm wide assign-title select2"
                        multiple name="transaction_associate[]" id="assign-title-select" data-placeholder="Select business type...">
                        @foreach ($assignTitles as $title)
                        <option value="{{ $title }}">{{ $title }}</option>
                        @endforeach
                    </select>
                </div>


                <div class="mb-3 col-md-3">
                    <label class="form-label">Tags/Properties of Interest</label>
                    <select name="tags[]"
                        class="multi-select form-control form-control-sm wide tags" multiple data-placeholder="Select Tags...">

                        @foreach($propertyOptions as $value => $label)
                        <option value="{{ $value }}" {{ in_array($value, $contact['tags'] ?? []) ? 'selected': '' }}>
                            {{ $label }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            {{-- {{ dd($propertyOptions) }} --}}
            <x-contact.personal-informaction :pipelines="$pipelines" :propertyOptions="$propertyOptions"
                :contactSources="$contactSources" />
            <x-contact.historical :filteredProperties="$filtered_properties" />
            <x-contact.additional-information />
            {{-- this functionality add in the next phase --}}

            <div class="my-4 text-end">
                <x-primary-button class="submit" id="contact_save_exit"> {{ __('Save & Exit ') }} </x-primary-button>
                <button type="button" class="btn btn-primary btn-sm" id="save_contact">Save</button>
                <button type="button" class="btn btn-danger btn-sm" id="exit_contact">Exit</button>
            </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection
{{-- custom js --}}
@push('js')

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ asset('assets/js/custom/contact/create.js') }}"></script>
<script>
    var contactsIndexRoute = "{{ route('contacts.index') }}";
    var contactsCreateRoute = "{{ route('contacts.create') }}";
    var contactsStoreRoute = "{{ route('contacts.store') }}";
    // Initialize for Create & Edit Forms
    $("#save_contact").on('click', setupFormValidation("#add-contact-form", "#save_contact", contactsStoreRoute, contactsCreateRoute));
    $("#contact_save_exit").on('click', setupFormValidation("#add-contact-form", "#contact_save_exit", contactsStoreRoute, contactsIndexRoute));
</script>

<script>
    $("#add-contact-form").on("keypress", function(e) {

        if (e.which === 13 && !$(e.target).is("textarea")) {
            // Allow Enter in textarea
            e.preventDefault();
        }
    });
 
</script>
@endpush