@extends('layouts.app', ['page' => __('Listado De Prospectos'), 'pageSlug' => 'prospects', 'section' => 'menu'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('prospects.index'), '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">
                            <h2 class="card-title">{{ __('Lista de Prospectos')  }}</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-sm btn-gradient" data-toggle="modal" data-target="#prospectModal">{{ __('Crear Prospecto') }}</button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                        <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">{{ __('Correo electrónico') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Teléfono') }}</th>
                                <th class="th-text-color" scope="col"></th>
                            </thead>
                            <tbody>
                                 @foreach ($prospects as $prospect)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            {{ $prospect->name }}
                                        </td>
                                        <td>
                                            {{ $prospect->email }}
                                        </td>
                                        <td>
                                            {{ $prospect->phonenumber }}
                                        </td>
                                        <td>
                                                <div class="dropdown">
                                                    <a class="btn btn-sm btn-icon-only text-light bw-btn-anchor" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="tim-icons icon-settings-gear-63"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                        <a class="dropdown-item" href="{{ route('estimations.by.prospect', ['prospect' => $prospect]) }}">{{ __('Cotizaciones') }}</a>
                                                        <a class="dropdown-item edit-prospect-btn" href="javascript:void(0)" data-id="{{ $prospect->id }}" data-name="{{ $prospect->name }}" data-email="{{ $prospect->email }}" data-phonenumber="{{ $prospect->phonenumber }}">{{ __('Editar') }}</a>
                                                        <form action="{{ route('prospects.destroy', ['prospect' => $prospect]) }}" method="post">
                                                            @csrf
                                                            @method('delete')
                                                            <button type="button" class="dropdown-item" onclick="confirm('{{ __('Estas seguro que quieres eliminar a este prospecto?') }}') ? this.parentElement.submit() : ''">
                                                                    {{ __('Borrar') }}
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $prospects->appends($_GET)->links() }}
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Prospect Creation -->
    <div class="modal fade" id="prospectModal" tabindex="-1" role="dialog" aria-labelledby="prospectModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="prospectModalLabel">{{ __('Crear Prospecto') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="prospectForm">
                        @csrf
                        <div class="form-group">
                            <label for="name">{{ __('Nombre') }}</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">{{ __('Correo') }}</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phonenumber">{{ __('Número de Teléfono') }}</label>
                            <input type="text" class="form-control" id="phonenumber" name="phonenumber" required>
                        </div>
                        <button type="submit" class="btn btn-gradient">{{ __('Guardar') }}</button>
                        <button type="button" class="btn btn-danger bw-btn-danger-gradient" data-dismiss="modal">{{ __('Cancelar') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Prospect Editing -->
    <div class="modal fade" id="editProspectModal" tabindex="-1" role="dialog" aria-labelledby="editProspectModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editProspectModalLabel">{{ __('Editar Prospecto') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeEditModal()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editProspectForm">
                        @csrf
                        @method('PUT')
                        <input type="hidden" id="editProspectId" name="id">
                        <div class="form-group">
                            <label for="editName">{{ __('Nombre') }}</label>
                            <input type="text" class="form-control" id="editName" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="editEmail">{{ __('Correo') }}</label>
                            <input type="email" class="form-control" id="editEmail" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="editPhonenumber">{{ __('Número de Teléfono') }}</label>
                            <input type="text" class="form-control" id="editPhonenumber" name="phonenumber" required>
                        </div>
                        <button type="submit" class="btn btn-gradient">{{ __('Actualizar') }}</button>
                        <button type="button" class="btn btn-danger bw-btn-danger-gradient" data-dismiss="modal" onclick="closeEditModal()">{{ __('Cancelar') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const prospectForm = document.getElementById('prospectForm');

            prospectForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(prospectForm);

                fetch('{{ route('prospects.store') }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: '¡Éxito!',
                            text: 'El prospecto se ha registrado correctamente. Se procederá a la vista de alta de cotización.',
                            icon: 'success',
                            timer: 5000,
                            timerProgressBar: true,
                            willClose: () => {
                                setTimeout(() => location.reload(), 200);
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: data.message || 'Ocurrió un error al registrar el prospecto.',
                            icon: 'error'
                        }).then(() => {
                            setTimeout(() => location.reload(), 200);
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        title: 'Error',
                        text: 'Ocurrió un error al registrar el prospecto.',
                        icon: 'error'
                    }).then(() => {
                        setTimeout(() => location.reload(), 200);
                    });
                });
            });

            const editButtons = document.querySelectorAll('.edit-prospect-btn');
            const editProspectModal = document.getElementById('editProspectModal');
            const editProspectForm = document.getElementById('editProspectForm');

            editButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    const name = this.getAttribute('data-name');
                    const email = this.getAttribute('data-email');
                    const phonenumber = this.getAttribute('data-phonenumber');

                    // Llenar el formulario del modal con los datos actuales del prospecto
                    document.getElementById('editProspectId').value = id;
                    document.getElementById('editName').value = name;
                    document.getElementById('editEmail').value = email;
                    document.getElementById('editPhonenumber').value = phonenumber;

                    // Mostrar el modal de edición
                    $('#editProspectModal').modal('show');
                });
            });

            // Manejar la actualización del prospecto
            editProspectForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const id = document.getElementById('editProspectId').value;
                const formData = new FormData(editProspectForm);

                fetch(`/admin/prospects/${id}`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'X-HTTP-Method-Override': 'PUT'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: '¡Éxito!',
                            text: 'El prospecto se ha actualizado correctamente.',
                            icon: 'success',
                            timer: 3000,
                            timerProgressBar: true,
                            willClose: () => {
                                location.reload();
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: data.message || 'Ocurrió un error al actualizar el prospecto.',
                            icon: 'error'
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        title: 'Error',
                        text: 'Ocurrió un error al actualizar el prospecto.',
                        icon: 'error'
                    });
                });
            });
        });

        function closeEditModal()
        {
            $('#editProspectModal').modal('hide');
        }
    </script>
@endpush