@extends('layouts.app', ['page' => __('Vistas de desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('house-development-highlights.showByDevelopment', $houseDevelopment), 'search' => $search]) @endcomponent

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-8">
                            <span class="bw-card-title">{{ __('HighLights del desarrollo') }}</span>
                            <span class="bw-card-title-bold">
                                <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                                {{ $houseDevelopment->name }}
                            </span>
                        </div>
                        <div class="col-4 text-right">
                            <a href="#" class="btn btn-sm btn-gradient" data-toggle="modal" data-target="#createHighLighModal">
                                {{ __('Alta de HighLight') }}
                            </a>
                            <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Regresar a listado') }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table tablesorter text-center">
                            <thead class="th-gradient">
                                <th class="th-text-color" scope="col"> {{ __('Nombre') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('Icono') }}</th>
                                <th class="th-text-color" scope="col"></th>
                            </thead>
                            <tbody>
                                @foreach ($highligts as $highlight)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            <input type="text" name="name" class="form-control" value="{{ $highlight->name }}" id="highlight-{{ $highlight->id }}">
                                        </td>
                                        <td>
                                            <div class="center">
                                            <select name="highlight_icons[]" class="select2 form-select" required>
                                                <option value="" data-icon="">{{ __('Seleccionar icono') }}</option>
                                                <option value="icon1" data-icon="/assets/icons/icon1.svg" {{ $highlight->icon === 'icon1' ? 'selected' : '' }}></option>
                                                <option value="icon2" data-icon="/assets/icons/icon2.svg" {{ $highlight->icon === 'icon2' ? 'selected' : '' }}></option>
                                                <option value="icon3" data-icon="/assets/icons/icon3.svg" {{ $highlight->icon === 'icon3' ? 'selected' : '' }}></option>
                                                <option value="icon4" data-icon="/assets/icons/icon4.svg" {{ $highlight->icon === 'icon4' ? 'selected' : '' }}></option>
                                                <option value="icon5" data-icon="/assets/icons/icon5.svg" {{ $highlight->icon === 'icon5' ? 'selected' : '' }}></option>
                                                <option value="icon6" data-icon="/assets/icons/icon6.svg" {{ $highlight->icon === 'icon6' ? 'selected' : '' }}></option>
                                                <option value="icon7" data-icon="/assets/icons/icon7.svg" {{ $highlight->icon === 'icon7' ? 'selected' : '' }}></option>
                                                <option value="icon8" data-icon="/assets/icons/icon8.svg" {{ $highlight->icon === 'icon8' ? 'selected' : '' }}></option>
                                                <option value="icon9" data-icon="/assets/icons/icon9.svg" {{ $highlight->icon === 'icon9' ? 'selected' : '' }}></option>
                                                <option value="icon10" data-icon="/assets/icons/icon10.svg" {{ $highlight->icon === 'icon10' ? 'selected' : '' }}></option>
                                                <option value="icon11" data-icon="/assets/icons/icon11.svg" {{ $highlight->icon === 'icon11' ? 'selected' : '' }}></option>
                                                <option value="icon12" data-icon="/assets/icons/icon12.svg" {{ $highlight->icon === 'icon12' ? 'selected' : '' }}></option>
                                                <option value="icon13" data-icon="/assets/icons/icon13.svg" {{ $highlight->icon === 'icon13' ? 'selected' : '' }}></option>
                                                <option value="icon14" data-icon="/assets/icons/icon14.svg" {{ $highlight->icon === 'icon14' ? 'selected' : '' }}></option>
                                                <option value="icon15" data-icon="/assets/icons/icon15.svg" {{ $highlight->icon === 'icon15' ? 'selected' : '' }}></option>
                                                <option value="icon16" data-icon="/assets/icons/icon16.svg" {{ $highlight->icon === 'icon16' ? 'selected' : '' }}></option>
                                                <option value="icon17" data-icon="/assets/icons/icon17.svg" {{ $highlight->icon === 'icon17' ? 'selected' : '' }}></option>
                                                <option value="icon18" data-icon="/assets/icons/icon18.svg" {{ $highlight->icon === 'icon18' ? 'selected' : '' }}></option>
                                                <option value="icon19" data-icon="/assets/icons/icon19.svg" {{ $highlight->icon === 'icon19' ? 'selected' : '' }}></option>
                                                <option value="icon20" data-icon="/assets/icons/icon20.svg" {{ $highlight->icon === 'icon20' ? 'selected' : '' }}></option>
                                                <option value="icon21" data-icon="/assets/icons/icon21.svg" {{ $highlight->icon === 'icon21' ? 'selected' : '' }}></option>
                                                <option value="icon22" data-icon="/assets/icons/icon22.svg" {{ $highlight->icon === 'icon22' ? 'selected' : '' }}></option>
                                                <option value="icon23" data-icon="/assets/icons/icon23.svg" {{ $highlight->icon === 'icon23' ? 'selected' : '' }}></option>
                                                <option value="icon24" data-icon="/assets/icons/icon24.svg" {{ $highlight->icon === 'icon24' ? 'selected' : '' }}></option>
                                                <option value="icon25" data-icon="/assets/icons/icon25.svg" {{ $highlight->icon === 'icon25' ? 'selected' : '' }}></option>
                                                <option value="icon26" data-icon="/assets/icons/icon26.svg" {{ $highlight->icon === 'icon26' ? 'selected' : '' }}></option>
                                                <option value="icon27" data-icon="/assets/icons/icon27.svg" {{ $highlight->icon === 'icon27' ? 'selected' : '' }}></option>
                                                <option value="icon28" data-icon="/assets/icons/icon28.svg" {{ $highlight->icon === 'icon28' ? 'selected' : '' }}></option>
                                                <option value="icon29" data-icon="/assets/icons/icon29.svg" {{ $highlight->icon === 'icon29' ? 'selected' : '' }}></option>
                                                <option value="icon30" data-icon="/assets/icons/icon30.svg" {{ $highlight->icon === 'icon30' ? 'selected' : '' }}></option>
                                                <option value="icon31" data-icon="/assets/icons/icon31.svg" {{ $highlight->icon === 'icon31' ? 'selected' : '' }}></option>
                                                <option value="icon32" data-icon="/assets/icons/icon32.svg" {{ $highlight->icon === 'icon32' ? 'selected' : '' }}></option>
                                                <option value="icon33" data-icon="/assets/icons/icon33.svg" {{ $highlight->icon === 'icon33' ? 'selected' : '' }}></option>
                                                <option value="icon34" data-icon="/assets/icons/icon34.svg" {{ $highlight->icon === 'icon34' ? 'selected' : '' }}></option>
                                                <option value="icon35" data-icon="/assets/icons/icon35.svg" {{ $highlight->icon === 'icon35' ? 'selected' : '' }}></option>
                                                <option value="icon36" data-icon="/assets/icons/icon36.svg" {{ $highlight->icon === 'icon36' ? 'selected' : '' }}></option>
                                                <option value="icon37" data-icon="/assets/icons/icon37.svg" {{ $highlight->icon === 'icon37' ? 'selected' : '' }}></option>
                                                <option value="icon38" data-icon="/assets/icons/icon38.svg" {{ $highlight->icon === 'icon38' ? 'selected' : '' }}></option>
                                                <option value="icon39" data-icon="/assets/icons/icon39.svg" {{ $highlight->icon === 'icon39' ? 'selected' : '' }}></option>
                                                <option value="icon40" data-icon="/assets/icons/icon40.svg" {{ $highlight->icon === 'icon40' ? 'selected' : '' }}></option>
                                                <option value="icon41" data-icon="/assets/icons/icon41.svg" {{ $highlight->icon === 'icon41' ? 'selected' : '' }}></option>
                                                <option value="icon42" data-icon="/assets/icons/icon42.svg" {{ $highlight->icon === 'icon42' ? 'selected' : '' }}></option>
                                                <option value="icon43" data-icon="/assets/icons/icon43.svg" {{ $highlight->icon === 'icon43' ? 'selected' : '' }}></option>
                                                <option value="icon44" data-icon="/assets/icons/icon44.svg" {{ $highlight->icon === 'icon44' ? 'selected' : '' }}></option>
                                                <option value="icon45" data-icon="/assets/icons/icon45.svg" {{ $highlight->icon === 'icon45' ? 'selected' : '' }}></option>
                                            </select>
                                            </div>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-success btn-gradient update-highlight" data-id="{{ $highlight->id }}">
                                                {{ __('Actualizar') }}
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger bw-btn-danger-gradient delete-highlight" data-id="{{ $highlight->id }}">
                                                {{ __('Borrar') }}
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $highligts->appends($_GET)->links() }}
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Creating a New HighLight -->
    <div class="modal fade" id="createHighLighModal" tabindex="-1" role="dialog" aria-labelledby="createHighLightModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createHighLightModalLabel">{{ __('Crear Nuevo HighLigt') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Cerrar') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="create-highlight-form" action="{{ route('house-development-highlights.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="highlight-name">{{ __('Nombre del HighLight') }}</label>
                            <input type="text" class="form-control" id="highlight-name" name="name" required>
                        </div>

                        <div class="form-group">
                            <label for="highlight-icon">{{ __('Icono del HighLight') }}</label>
                            <select name="icon" class="select2 form-select" required>
                                <option value="" data-icon="">{{ __('Seleccionar icono') }}</option>
                                <option value="icon1" data-icon="/assets/icons/icon1.svg"></option>
                                <option value="icon2" data-icon="/assets/icons/icon2.svg"></option>
                                <option value="icon3" data-icon="/assets/icons/icon3.svg"></option>
                                <option value="icon4" data-icon="/assets/icons/icon4.svg"></option>
                                <option value="icon5" data-icon="/assets/icons/icon5.svg"></option>
                                <option value="icon6" data-icon="/assets/icons/icon6.svg"></option>
                                <option value="icon7" data-icon="/assets/icons/icon7.svg"></option>
                                <option value="icon8" data-icon="/assets/icons/icon8.svg"></option>
                                <option value="icon9" data-icon="/assets/icons/icon9.svg"></option>
                                <option value="icon10" data-icon="/assets/icons/icon10.svg"></option>
                                <option value="icon11" data-icon="/assets/icons/icon11.svg"></option>
                                <option value="icon12" data-icon="/assets/icons/icon12.svg"></option>
                                <option value="icon13" data-icon="/assets/icons/icon13.svg"></option>
                                <option value="icon14" data-icon="/assets/icons/icon14.svg"></option>
                                <option value="icon15" data-icon="/assets/icons/icon15.svg"></option>
                                <option value="icon16" data-icon="/assets/icons/icon16.svg"></option>
                                <option value="icon17" data-icon="/assets/icons/icon17.svg"></option>
                                <option value="icon18" data-icon="/assets/icons/icon18.svg"></option>
                                <option value="icon19" data-icon="/assets/icons/icon19.svg"></option>
                                <option value="icon20" data-icon="/assets/icons/icon20.svg"></option>
                                <option value="icon21" data-icon="/assets/icons/icon21.svg"></option>
                                <option value="icon22" data-icon="/assets/icons/icon22.svg"></option>
                                <option value="icon23" data-icon="/assets/icons/icon23.svg"></option>
                                <option value="icon24" data-icon="/assets/icons/icon24.svg"></option>
                                <option value="icon25" data-icon="/assets/icons/icon25.svg"></option>
                                <option value="icon26" data-icon="/assets/icons/icon26.svg"></option>
                                <option value="icon27" data-icon="/assets/icons/icon27.svg"></option>
                                <option value="icon28" data-icon="/assets/icons/icon28.svg"></option>
                                <option value="icon29" data-icon="/assets/icons/icon29.svg"></option>
                                <option value="icon30" data-icon="/assets/icons/icon30.svg"></option>
                                <option value="icon31" data-icon="/assets/icons/icon31.svg"></option>
                                <option value="icon32" data-icon="/assets/icons/icon32.svg"></option>
                                <option value="icon33" data-icon="/assets/icons/icon33.svg"></option>
                                <option value="icon34" data-icon="/assets/icons/icon34.svg"></option>
                                <option value="icon35" data-icon="/assets/icons/icon35.svg"></option>
                                <option value="icon36" data-icon="/assets/icons/icon36.svg"></option>
                                <option value="icon37" data-icon="/assets/icons/icon37.svg"></option>
                                <option value="icon38" data-icon="/assets/icons/icon38.svg"></option>
                                <option value="icon39" data-icon="/assets/icons/icon39.svg"></option>
                                <option value="icon40" data-icon="/assets/icons/icon40.svg"></option>
                                <option value="icon41" data-icon="/assets/icons/icon41.svg"></option>
                                <option value="icon42" data-icon="/assets/icons/icon42.svg"></option>
                                <option value="icon43" data-icon="/assets/icons/icon43.svg"></option>
                                <option value="icon44" data-icon="/assets/icons/icon44.svg"></option>
                                <option value="icon45" data-icon="/assets/icons/icon45.svg"></option>
                            </select>
                        </div>
                        <input type="hidden" name="house_development_id" value="{{ $houseDevelopment->id }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-gradient" data-dismiss="modal">{{ __('Cerrar') }}</button>
                        <button type="submit" class="btn btn-primary btn-gradient">{{ __('Guardar') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('js')
<script>
    $(document).ready(function() {
        function formatState(option) {
            if (!option.id) {
                return option.text;
            }

            // Toma el valor del atributo `data-icon`
            var iconPath = $(option.element).data('icon');

            // Crea la representación de la opción con el ícono SVG
            var $option = $(
                '<span>' +
                    (iconPath ? '<img src="' + iconPath + '" style="width: 20px; height: 20px; margin-right: 8px;" />' : '') +
                    option.text +
                '</span>'
            );
            return $option;
        }

        $('.select2').select2({
            templateResult: formatState,  // Plantilla para las opciones del menú desplegable
            templateSelection: formatState,  // Plantilla para la opción seleccionada
            width: '37%'  // Ajusta el ancho del select2 según sea necesario
        });

        document.querySelectorAll('.update-highlight').forEach(button => {
            button.addEventListener('click', function() {
                const highlightId = this.getAttribute('data-id');
                const highlightName = document.getElementById('highlight-' + highlightId).value;
                const highlightIcon = document.getElementById('highlight-icon-' + highlightId ).value;
                const token = '{{ csrf_token() }}';
                fetch(`{{ url('house-development-highlights') }}/${highlightId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token
                    },
                    body: JSON.stringify({
                        name: highlightName,
                        icon: highlightIcon,
                    }),
                })
                .then(response => response.json())
                .then(data => {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: data.message || 'HighLight actualizado correctamente',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        location.reload();
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error',
                        text: 'Hubo un problema al actualizar el HighLight.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                });
            });
        });

        document.querySelectorAll('.delete-highlight').forEach(button => {
            button.addEventListener('click', function() {
                if (!confirm('{{ __('¿Estás seguro de eliminar este HighLight?') }}')) return;

                const highlightId = this.getAttribute('data-id');
                const token = '{{ csrf_token() }}';
                fetch(`{{ url('house-development-highlights') }}/${highlightId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                })
                .then(response => response.json())
                .then(data => {
                    Swal.fire({
                        title: '¡Eliminado!',
                        text: data.message || 'HighLight borrado correctamente',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        location.reload();
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error',
                        text: 'Hubo un problema al borrar el HighLight.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                });
            });
        });
    });
</script>
@endpush