@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = empty($provider->id) ? __('Create new Provider') : __('Edit Provider');
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="provider-form" method="post"
            action="{{ empty($provider->id) ? route('providers.store') : route('providers.update', $provider->id) }}">
            @if (!empty($provider->id))
                @method('PATCH')
            @endif
            <div class="card">
                <div class="card-body">
                    <div class="notes">(*) Datos obligatorios.</div>
                    <div class="form-group">
                        <label for="name">*{{ __('Name') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="name" name="name" value="{{ $provider->name ?? '' }}">
                            <span id="name-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address">{{ __('Address') }}</label>
                        <div class="col-md-10">
                            <input class="form-control mapAutocomplete" id="address" name="address"
                                value="{{ $provider->address ?? '' }}" placeholder="Introduce una ubicación"><br>
                            <span id="address-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>

                            {{-- Map --}}
                            <div class="clear-map" style="width:100%;text-align:right;display:none;">
                                <a href="#" class="button-link"
                                    onclick="clearMap(event)">{{ __('Clear address') }}</a>
                            </div>

                            <div class="map" style="width:100%; height:400px; display:none;"></div>

                            <div class="form-group" style="display:none">
                                <label for="latitude">{{ __('Latitude') }}</label>
                                <div class="col-md-10">
                                    <input class="form-control" id="latitude" name="latitude"
                                        value="{{ $provider->latitude ?? '' }}">
                                </div>
                                <label for="longitude">{{ __('Longitude') }}</label>
                                <div class="col-md-10">
                                    <input class="form-control" id="longitude" name="longitude"
                                        value="{{ $provider->longitude ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @can('consultar contactos')
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            @can('crear contactos')
                                <div class="row">
                                    <div class="col-lg-12">
                                        <a href="javascript:openContactModal()" class="btn btn-info">
                                            <i class="fas fa-plus-circle" style="padding-right: 5px"></i>
                                            {{ __('New Contact') }}
                                        </a>
                                    </div>
                                </div><br>
                            @endcan
                            <table id="client-contacts-table" class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th style="text-align: left">{{ __('Name') }}</th>
                                        <th style="text-align: left">{{ __('Title') }}</th>
                                        <th style="text-align: left">{{ __('Celular') }}</th>
                                        <th style="text-align: left">{{ __('Email') }}</th>
                                        <th>{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($provider->contacts->isNotEmpty())
                                        @foreach ($provider->contacts as $contact)
                                            <tr id="row{{ $loop->index }}">
                                                <input type="hidden" name="contacts[{{ $loop->index }}][id]"
                                                    value="{{ $contact->id }}">
                                                <input type="hidden" name="contacts[{{ $loop->index }}][name]"
                                                    value="{{ $contact->name }}">
                                                <input type="hidden" name="contacts[{{ $loop->index }}][title]"
                                                    value="{{ $contact->title }}">
                                                <input type="hidden" name="contacts[{{ $loop->index }}][phone]"
                                                    value="{{ $contact->phone }}">
                                                <input type="hidden" name="contacts[{{ $loop->index }}][email]"
                                                    value="{{ $contact->email }}">
                                                <td style="text-align: left">{{ $contact->name }}</td>
                                                <td style="text-align: left">{{ $contact->title }}</td>
                                                <td style="text-align: left">{{ $contact->phone }}</td>
                                                <td style="text-align: left">{{ $contact->email }}</td>
                                                <td>
                                                    @can('editar contactos')
                                                        <button class="btn btn-default btn-sm" type="button"
                                                            style="margin-left: 5px;"
                                                            onclick="openContactModal('{{ $loop->index }}')"><i
                                                                class="far fa-edit"></i></button>
                                                    @endcan
                                                    @can('borrar contactos')
                                                        <button class="btn btn-default btn-sm" type="button"
                                                            style="margin-left: 5px;"
                                                            onclick="removeContactRow('{{ $loop->index }}', '{{ addslashes($contact->name) }}')">
                                                            <i class="far fa-trash-alt"></i>
                                                        </button>
                                                    @endcan
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    <tr id="nocontact" style="{{ $provider->contacts->isEmpty() ? '' : 'display:none;' }}">
                                        <td colspan="11" class="td-nocontact">No se han agregado contactos</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endcan
            {{-- buttons --}}
            <div class="card">
                <div class="card-body">
                    <div class="form-group row" style="margin-bottom:0">
                        <a href="javascript:loadContent('{{ route('providers.index') }}')" id="cancel" name="cancel"
                            class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($provider->id) ? __('Create') : __('Save') }}</button>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>

    <!-- Contact Modal -->
    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactModalLabel">{{ __('Edit Contact') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="provider-contact-form" method="post">
                    <div class="modal-body" id="contact">
                        <input type="hidden" id="contact_id" name="contact_id" value="" />
                        <div class="form-group row">
                            <label for="contact_name" class="col-md-2 col-form-label">*{{ __('Name') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-name" id="contact_name" name="contact_name">
                                <span id="contact_name-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_title" class="col-md-2 col-form-label">{{ __('Title') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-title" id="contact_title" name="contact_title">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_phone" class="col-md-2 col-form-label">*{{ __('Phone') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-phone" id="contact_phone" name="contact_phone">
                                <span id="contact_phone-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_email" class="col-md-2 col-form-label">*{{ __('Email') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-email" id="contact_email" name="contact_email">
                                <span id="contact_email-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="button" class="btn btn-info" id="saveContactButton">
                            {{ __('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>
        .table-responsive {
            width: 100%;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        #contacts-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }

        #contacts-table th,
        #contacts-table td {
            white-space: nowrap;
        }

        .td-nocontact {
            background-color: #f3f3f3;
            text-align: center;
        }
    </style>
    <script>
        @if (!empty($provider->id))

            // Load map 
            @if (!empty($provider->latitude) && !empty($provider->longitude))
                latitude = parseFloat("{{ $provider->latitude }}");
                longitude = parseFloat("{{ $provider->longitude }}");

                loadMap(parseFloat({{ $provider->latitude }}), parseFloat({{ $provider->longitude }}));
            @endif
        @endif

        $('.contact-phone').mask('(000) 000-0000');

        document.getElementById('saveContactButton').addEventListener('click', function() {

            $('.invalid-feedback').text('').css('display', 'none');

            let isValid = true;

            const contactName = $('#contactModal #contact_name').val().trim();
            if (!contactName) {
                isValid = false;
                $('#contactModal #contact_name-error').text('{{ __('Name is required.') }}').css('display',
                    'block');
            }

            const contactPhone = $('#contactModal #contact_phone').val().trim();
            if (!contactPhone) {
                isValid = false;
                $('#contactModal #contact_phone-error').text('{{ __('Phone is required.') }}').css('display',
                    'block');
            }

            const contactEmail = $('#contactModal #contact_email').val().trim();
            if (!contactEmail) {
                isValid = false;
                $('#contactModal #contact_email-error').text('{{ __('Email is required.') }}').css('display',
                    'block');
            } else if (!validateEmail(contactEmail)) {
                isValid = false;
                $('#contactModal #contact_email-error').text('{{ __('Invalid email format.') }}').css('display',
                    'block');
            }

            if (isValid) {
                addContact();
            }
        });

        function openContactModal(index = null) {

            $('.invalid-feedback').text('').css('display', 'none');

            let contactData = null;

            if (index != null) {
                contactData = {
                    id: $(`input[name="contacts[${index}][id]"]`).val(),
                    name: $(`input[name="contacts[${index}][name]"]`).val(),
                    title: $(`input[name="contacts[${index}][title]"]`).val(),
                    phone: $(`input[name="contacts[${index}][phone]"]`).val(),
                    email: $(`input[name="contacts[${index}][email]"]`).val(),
                };
            }

            if (contactData !== null) {
                $('#contactModal #contact_id').val(contactData.id);
                $('#contactModal #contact_name').val(contactData.name);
                $('#contactModal #contact_title').val(contactData.title);
                $('#contactModal #contact_phone').val(contactData.phone);
                $('#contactModal #contact_email').val(contactData.email);
                $('#contactModalLabel').text('{{ __('Edit Contact') }}');
                $('#saveContactButton').text('{{ __('Save') }}');
            } else {
                $('#contactModal #contact_id').val('');
                $('#contactModal #contact_name').val('');
                $('#contactModal #contact_title').val('');
                $('#contactModal #contact_phone').val('');
                $('#contactModal #contact_email').val('');
                $('#contactModalLabel').text('{{ __('New Contact') }}');
                $('#saveContactButton').text('{{ __('Add') }}');
            }

            $('#contactModal').modal('show');
        }

        function addContact() {
            // Step 1: Copy new data from another form (provider-contact-form)
            let newContact = {
                id: $('#contactModal #contact_id').val() || Math.random().toString(36).substr(2, 9),
                name: $('#contactModal #contact_name').val(),
                title: $('#contactModal #contact_title').val(),
                phone: $('#contactModal #contact_phone').val(),
                email: $('#contactModal #contact_email').val(),
            };

            // Step 2: Clear the form inputs for the new contact
            $('#provider-contact-form input').val('');

            // Step 3: Get initial contacts
            const contacts = getInitialContacts();
            const updatedContacts = [...contacts];

            let existingContactIndex = updatedContacts.findIndex(contact => contact.id === newContact.id);

            if (existingContactIndex !== -1) {
                updatedContacts[existingContactIndex] = newContact;
            } else {
                updatedContacts.push(newContact);
            }

            rebuildHiddenInputs(updatedContacts);
        }

        function rebuildContactTableRows(contacts) {

            let tableRows = '';
            contacts.forEach((contact, index) => {
                tableRows += `
            <tr id="row${index}">
                <td style="text-align: left">${contact.name}</td>
                <td style="text-align: left">${contact.title}</td>
                <td style="text-align: left">${contact.phone}</td>
                <td style="text-align: left">${contact.email}</td>
                <td>
                    @can('editar contactos')<button class="btn btn-default btn-sm" type="button" style="margin-left: 5px;" onclick="openContactModal('${index}')"><i class="far fa-edit"></i></button>@endcan
                    @can('borrar contactos')<button class="btn btn-default btn-sm" type="button" style="margin-left: 5px;" onclick="removeContactRow('${index}', '${contact.name}')"><i class="far fa-trash-alt"></i></button>@endcan
                </td>
            </tr>
        `;
            });

            tableRows += `<tr id="nocontact"><td colspan="11" class="td-nocontact">No se han agregado contactos</td></tr>`;

            $('#client-contacts-table tbody').html(tableRows);
            $('#nocontact').hide();
            $('#contactModal').modal('hide');
        }

        function removeContactRow(index, name) {
            if (confirm(`¿Estás seguro de eliminar Contacto ${name}?`)) {
                $(`#row${index}`).remove();

                $(`input[name^="contacts[${index}]"]`).remove();

                if ($('input[name^="contacts"]').length === 0) {
                    $("#nocontact").show();
                } else {
                    $("#nocontact").hide();
                }
            }
        }

        function getInitialContacts() {
            let contacts = [];

            $('#provider-form input[name^="contacts"]').each(function() {
                let matches = $(this).attr('name').match(/^contacts\[(\d+)]\[(\w+)]$/);
                if (matches) {
                    let index = matches[1];
                    let key = matches[2];

                    if (!contacts[index]) {
                        contacts[index] = {};
                    }

                    contacts[index][key] = $(this).val();
                }
            });

            return contacts;
        }

        function rebuildHiddenInputs(contacts) {
            let hiddenInputs = '';
            contacts.forEach((contact, index) => {
                Object.keys(contact).forEach(key => {
                    hiddenInputs +=
                        `<input type="hidden" name="contacts[${index}][${key}]" value="${contact[key]}">`;
                });
            });

            // Remove existing contact inputs
            $('#client-contacts-table tbody').find('tr[id^="row"]').remove();
            $('#provider-form').find('input[type="hidden"][name^="contacts"]').remove();

            // Append new hidden inputs
            $('#provider-form').append(hiddenInputs);

            // Rebuild contact table rows
            rebuildContactTableRows(contacts);
        }
    </script>
@endsection