@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Providers';
    @endphp

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

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-body table-responsive no-padding">
                @can('crear proveedores')
                    <div class="row">
                        <div class="col-lg-12">
                            <a href="javascript:loadContent('{{ route('providers.create') }}')" class="btn btn-info">
                                <i class="fas fa-plus-circle" style="padding-right: 5px"></i>
                                {{ __('New Provider') }}
                            </a>
                        </div>
                    </div><br>
                @endcan
                <table id="tbl_providers" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Address') }}</th>
                            <th>{{ __('Contacts') }}</th>
                            <th>{{ __('Actions') }}</td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <!-- Map Modal -->
    <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapModalLabel">{{ __('Map') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="map" style="width:100%; height:400px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Cerrar</button>
                </div>
            </div>
        </div>
    </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">{{ __('Contact') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="contact">
                    <div class="modal-body" id="contact">
                        <div class="form-group row">
                            <div style="font-weight:bold">{{ __('Name') }}</div>
                            <div class="col-md-10 contact-name"></div>
                            <div style="font-weight:bold">{{ __('Title') }}</div>
                            <div class="col-md-10 contact-title"></div>
                            <div style="font-weight:bold">{{ __('Phone') }}</div>
                            <div class="col-md-10 contact-phone"></div>
                            <div style="font-weight:bold">{{ __('Email') }}</div>
                            <div class="col-md-10 contact-email"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        {{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        function openMapModal(title, lat, lng) {

            loadMap(lat, lng, false);

            $('#mapModalLabel').text(title);
            $('#mapModal').modal('show');
        }

        async function openContactModal(id) {
            var urlTemplate = `{{ route('contacts.edit', ['id' => ':id', 'modal_view' => ':modal_view']) }}`;
            var url = urlTemplate.replace(':id', id).replace(':modal_view', 1);

            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
            });

            if (response.ok) {
                const data = await response.json();

                $('#contactModal .contact-name').text(data.name);
                $('#contactModal .contact-title').text(data.title);
                $('#contactModal .contact-phone').text(data.phone);
                $('#contactModal .contact-email').text(data.email);
                $('#contactModalLabel').text('Contacto');
                $('#contactModal').modal('show');
            } else {
                console.log(response);
            }
        }
    </script>
@endsection