@extends('layouts.app', ['page' => __('Listado De Cotizaciones'), 'pageSlug' => 'estimates', 'section' => 'estimates'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('estimations.by.prospect',$prospect), '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 Cotizaciones') }} | Prospecto: {{ $prospect->name }}</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>
                            <a href="{{ route('estimates.create') }}" class="btn btn-sm btn-gradient">{{ __('Crear Cotizacion') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table tablesorter text-center" id="">
                            <thead class="th-gradient">
                                <th class="th-text-color" scope="col"> {{ __('Id') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('Prospecto') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Email') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Unidad') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Precio') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Estatus') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Origen') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Vendedor') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Fecha') }}</th>
                                <th class="th-text-color" scope="col"></th>
                            </thead>
                            <tbody>
                                 @foreach ($estimates as $estimate)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            <a class="d-block" href="{{ route('estimates.edit', $estimate) }}">
                                              {{ $estimate->id }}
                                            </a>
                                        </td>
                                        <td class="description-cell">
                                            <p>{{ $estimate->prospect->name ?? 'N/A' }}</p>
                                        </td>
                                        <td class="description-cell">
                                            <p>{{ $estimate->prospect->email ?? 'N/A' }}</p>
                                        </td>
                                        <td>
                                            <a class="d-block" href="{{ route('estimates.edit', $estimate) }}">
                                              {{ $estimate->unit->name ?? 'N/A' }}
                                            </a>
                                        </td>
                                        <td class="description-cell">
                                            <p>{{ $estimate->list_price_str }}</p>
                                        </td>
                                        <td class="description-cell">
                                            <p>{{ $estimate->status }}</p>
                                        </td>
                                        <td class="description-cell">
                                            <p>{{ $estimate->origin }}</p>
                                        </td>
                                        <td class="description-cell">
                                            <p>{{ $estimate->assignedTo->name ?? 'N/A' }}</p>
                                        </td>
                                        <td>
                                            <p>{{ $estimate->created_at->format('d/m/Y') }}</p>
                                        </td>
                                        <td>
                                            <div class="row justify-content-center">
                                                <div class="col-sm-2">
                                                    <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">
                                                            @can('asignar_vendedor_cotizacion')
                                                                <a class="dropdown-item btn-add-seller" href="#" data-toggle="modal" data-target="#assignSellerModal" data-estimate="{{ $estimate->id }}">{{ __('Asignar vendedor') }}</a>
                                                            @endcan
                                                            <a class="dropdown-item" href="{{ route('estimates.edit', $estimate) }}">{{ __('Ver detalle') }}</a>
                                                            <a class="dropdown-item" href="{{ route('estimate.pdf.generate', $estimate) }}">{{ __('Ver PDF') }}</a>
                                                            <form action="{{ route('estimates.destroy', $estimate) }}" method="post">
                                                                @csrf
                                                                @method('delete')
                                                                <button type="button" class="dropdown-item" onclick="confirm('{{ __('Are you sure you want to delete this estimate?') }}') ? this.parentElement.submit() : ''">
                                                                        {{ __('Borrar') }}
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $estimates->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 para asignar vendedor -->
    <div class="modal fade" id="assignSellerModal" tabindex="-1" aria-labelledby="assignSellerModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignSellerModalLabel">{{ __('Asignar Vendedor') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeSellerModal()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="assignSellerForm">
                        <input id="current-estimate-id" hidden>
                        <div class="form-group">
                            <label for="sellerSelect">{{ __('Seleccionar Vendedor') }}</label>
                            <select class="form-control" id="sellerSelect" name="seller_id" required>
                                <option value="">{{ __('Seleccione un vendedor') }}</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger bw-btn-danger-gradient" data-dismiss="modal" onclick="closeSellerModal()">{{ __('Cancelar') }}</button>
                    <button type="button" class="btn btn-gradient" id="saveSellerButton">{{ __('Guardar') }}</button>
                </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: () => {
                                window.location.href = '{{ route('estimates.create') }}';
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: data.message || 'Ocurrió un error al registrar el prospecto.',
                            icon: 'error'
                        }).then(() => {
                            setTimeout(() => location.reload(), 200); // Recarga la página después de 1 segundo
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        title: 'Error',
                        text: 'Ocurrió un error al registrar el prospecto.',
                        icon: 'error'
                    }).then(() => {
                        setTimeout(() => location.reload(), 200); // Recarga la página después de 1 segundo
                    });
                });
            });

            // ASIGNAR VENDEDOR

            $('.btn-add-seller').on('click', function(event) {
                event.preventDefault();

                // Obtener el ID de la cotización desde el atributo data-estimate
                const estimateId = $(this).data('estimate');

                // Mostrar el modal
                $('#assignSellerModal').modal('show');

                // Limpiar el select de vendedores
                $('#sellerSelect').empty().append('<option value="">{{ __('Seleccione un vendedor') }}</option>');

                // Hacer la petición AJAX para obtener los vendedores
                $.ajax({
                    url: '/users-get-by-type/vendedor',
                    method: 'GET',
                    success: function(data) {
                        Object.entries(data).forEach(([id, name]) => {
                            $('#sellerSelect').append(`<option value="${id}">${name}</option>`);
                        });

                        $("#current-estimate-id").val(estimateId);
                    },
                    error: function(error) {
                        console.error('Error al cargar los vendedores:', error);
                        alert('{{ __('Hubo un error al cargar los vendedores') }}');
                    }
                });
            });

            // Guardar el vendedor seleccionado al hacer clic en el botón "Guardar"
            $('#saveSellerButton').off('click').on('click', function() {
                const sellerId = $('#sellerSelect').val();
                const estimateId = $('#current-estimate-id').val();

                console.log(">>> Seller: ", sellerId);
                console.log(">>> Estimate: ", estimateId);

                if (!sellerId) {
                    alert('{{ __('Por favor seleccione un vendedor') }}');
                    return;
                }

                // Enviar la selección del vendedor y el ID de la cotización al backend
                $.ajax({
                    url: `/estimate/assign-seller`,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        seller_id: sellerId,
                        estimate_id: estimateId
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#assignSellerModal').modal('hide');

                            Swal.fire({
                                title: '¡Éxito!',
                                text: response.message,
                                icon: 'success',
                                timer: 2000,
                                timerProgressBar: true,
                                willClose: () => {
                                    setTimeout(() => location.reload(), 200);
                                }
                            });
                        } else {
                            alert('{{ __('Hubo un error al asignar el vendedor') }}');
                        }
                    },
                    error: function(error) {
                        console.error('Error al asignar vendedor:', error);
                        alert('{{ __('Hubo un error al asignar el vendedor') }}');
                    }
                });
            });
        });

        function closeSellerModal()
        {
            $("#assignSellerModal").modal('hide');
        }
    </script>
@endpush