@extends('layouts.app')

@section('title', 'Edit Contact')

@push('css')
<style>
    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: "▼";
        /* Unicode arrow */
        font-size: 8px;
        position: absolute;
        right: 5px;
        top: 35%;
        transform: translateY(-50%);
        color: #888888;
        pointer-events: none;
    }
</style>
<link rel="stylesheet" href="{{ asset('assets/css/custom/contact.css') }}">
@endpush

@section('content')
<x-content-body>
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Edit Contact</h4>
        </x-slot:title>

        <x-form id="edit-contact-form">
            @method('PUT')
            @csrf

            <x-text-input name="id" type="hidden" :value="$contact['id']" />

            <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">
                        <option value="general"
                            {{ isset($contact['contact_type']) && in_array('general', (array) $contact['contact_type']) ? 'selected' : '' }}>
                            General</option>
                        <option value="Professionals/Contractors"
                            {{ isset($contact['contact_type']) && in_array('Professionals/Contractors', (array) $contact['contact_type']) ? 'selected' : '' }}>
                            Professionals/Contractors</option>
                        <option value="investors"
                            {{ isset($contact['contact_type']) && in_array('investors', (array) $contact['contact_type']) ? 'selected' : '' }}>
                            Investors</option>
                    </select>
                </div>

                <div class="mb-3 col-md-3">
                    <label class="form-label">General - Client Type </label>
                    <select class="multi-select form-control form-control-sm wide assign-title" multiple
                        name="assign_title[]" data-placeholder="Select Client Type...">
                        @foreach ($transactionAssociations as $title)
                        <option value="{{ $title }}"
                            {{ in_array($title, $contact['assign_title']) ? 'selected' : '' }}>{{ $title }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3 col-md-3">
                    <label class="form-label">Professional Business Type</label>
                    <select class="multi-select form-control form-control-sm assignedTransactionAssociate" multiple
                        name="transaction_associate[]" id="transaction-associate-select" data-placeholder="Select business type...">
                        @foreach ($assignTitles as $value => $label)
                        <option value="{{ $label }}"
                            {{ in_array($label, $contact['transaction_associate']) ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3 col-md-3">
                    <label class="form-label">Tags/Properties of Interest</label>
                    @php
                    $formattedTags = array_map(fn($tag) => strtolower(str_replace(' ', '_', $tag)), $contact['tags'] ?? []);
                    @endphp
                    <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, $formattedTags ?? []) ? 'selected' : '' }}>{{ $label }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <x-contact.personal-informaction :contact="$contact" :pipelines="$pipelines" :propertyOptions="$propertyOptions" :contactSources="$contactSources" />
            <x-contact.historical :filteredProperties="$filtered_properties" :contact="$contact" />
            <x-contact.additional-information :contact="$contact" />

            <div class="my-4 text-end">
                <x-primary-button type="button" id="contact_update_exit" data-url="{{ route('contacts.update', ['contact' => $contact['id']]) }}"> {{ __('Save & Exit') }} </x-primary-button>
                <x-primary-button id="save" data-url="{{ route('contacts.update', ['contact' => $contact['id']]) }}"> {{ __('Save') }} </x-primary-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

@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 updateContactRoute = "{{ route('contacts.update', ['contact' => $contact['id']]) }}";
    var contactsCreateRoute = "{{ route('contacts.create') }}";
    // =============================================================
    $("#contact_update_exit").on('click', setupFormValidation("#edit-contact-form", "#contact_update_exit", updateContactRoute, contactsIndexRoute))
    $("#save").on('click', setupFormValidation("#edit-contact-form", "#save", updateContactRoute, null));
    // ==============================================================
</script>

@endpush