@extends('bucketadmin.master')

@section('pageTitle', 'Cita - Detalle')

@section('template-content')
@include('partials.messages')
<div class="row">
    <div class="col-sm-12">
        <section class="panel" id="complete-appointments">
            <header class="panel-heading">
                @if($appointment->client->prospect == 0)
                <i class="fa fa-calendar"></i> Cita con cliente <i>
                    <a href="/clients/show/{{$appointment->client->id}}" style="color:#fff">
                    {{ $appointment->client->name }} {{ $appointment->client->last_name }}
                    </a>
                </i>
                @else
                <i class="fa fa-calendar"></i> Cita con Prospecto <i>
                    <a href="/prospects/show/{{$appointment->client->id}}" style="color:#fff">
                    {{ $appointment->client->name }} {{ $appointment->client->last_name }}
                    </a>
                </i>
                @endif
                @if($appointment->status == 1)                            
                <span class="label label-success text-uppercase pull-right">Completada</span>                                        
                @else
                <span class="label label-warning text-uppercase pull-right">Pendiente</span>                                        
                @endif
            </header>
            <div class="panel-body">
                @if($appointment->user_id == auth()->user()->id)                                    
                <div class=".col-md-4 col-offset-md-8">
                    <!-- <button type="button"  id="{{ $appointment->id}}" class="btn btn-success pull-right" style="margin-bottom: 5px;">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Completar
                    </button> -->
                     @if($appointment->status == 0)  
                    <button type="button" class="btn btn-success pull-right complete-appointment" id="{{ $appointment->id}}"  data-toggle="modal" data-target="#myModal">
                        <i class="fa fa-check-square" aria-hidden="true"></i>
                        Completar
                    </button>
                    @endif
                </div>             
                @endif
                <div class="col-md-6">
                    @if($appointment->client->prospect == 0)
                    <h4 style="margin-bottom: 20px;">Información del Cliente:</h4>
                    @else
                    <h4 style="margin-bottom: 20px;">Información del Prospecto:</h4>
                    @endif
                    <table class="table table-striped detail-event">
                        <tbody>
                            <tr>
                                <td><strong>Cliente</strong></td>
                                <td>
                                    <a href="/clients/show/{{$appointment->client->id}}" style=#167787:#024FA0">
                                        {{ $appointment->client->name }} {{ $appointment->client->last_name }}
                                    </a></i>
                                </td>
                            </tr>
                            @if($client->records->count() > 0)
                            <tr>
                                <td><strong>Número de folio (s)</strong></td>
                                <td>
                                    @foreach($client->records as $record)
                                    <a href="/expedients/documents/{{$record->id}}" style="color: #167787">#{{ $record->record_number}}</a><br>
                                    @endforeach
                                </td>
                            </tr>
                            @else
                            <tr>
                                <td><strong>Estatus</strong></td>
                                <td>
                                    <span class="label text-uppercase"  style="background-color:purple">Prospección</span>
                                </td>
                            </tr>
                            @endif
                            <tr>
                                <td><strong>Correo</strong></td>
                                <td>{{$appointment->client->email }}</td>
                            </tr>
                            <tr>
                                <td><strong>Teléfono(s)</strong></td>
                                <td>{{$appointment->client->phone}} <br>
                                    {{$appointment->client->cellphone}} </td>
                                </tr>
                                <tr>
                                    <td><strong>Descripción</strong></td>
                                    <td>{{ $appointment->description }}</td>
                                </tr>
                                @if(auth()->user()->role == "G. Comercial" || auth()->user()->role == "Administrador" || auth()->user()->role == "E. Atención a Clientes")   
                                <tr>
                                    <td><strong>Ejecutivo Asignado</strong></td>
                                    <td>
                                        <a href="{{ url('users/profile', ['id' => $appointment->user_id]) }}" style="color: #167787">
                                            {{ $appointment->user['name'] }} {{ $appointment->user['last_name'] }} 
                                        </a>
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-12">
                                <h4><strong>Dirección:</strong></h4>
                                <p style="font-size: 15px;">
                                    {{ $appointment->place }}
                                </p>
                                <br>
                                <h4><strong>Fecha:</strong></h4>
                                <p style="font-size: 15px;">{{ App\Helper\Utils::convierte_fecha($appointment->start_date) }}</p>
                            </div>
                            <div class="col-md-12">
                                <div id="map" style="margin-top:30px;width: 100%;height: 300px;"></div>
                                <input type="text" id="latitude"  hidden="true" value="{{ $appointment->latitude}}">
                                <input type="text" id="longitude" hidden="true" value="{{ $appointment->longitude}}">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Agregar comentario</h4>
                    </div>
                    {!! Form::open(['url' => ['/appointments/newComment', $appointment->id], 'method' => 'POST']) !!}
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="comment" class="col-form-label"><strong>Comentario:</strong></label>
                            <textarea class="form-control" rows="4" name="comment" required="true" placeholder="Agregar comentario"></textarea>
                        </div>
                        <div class="form-group">
                            <input tabindex="3" type="radio" id="pending"  name="status" value=0 required="true">
                            <label for="pending"><i class="fa fa-clock-o"></i> Pendiente </label>
                        </div>
                        <div class="form-group">
                            <input tabindex="3" type="radio" id="complete" name="status" value=1 required="true">
                            <label for="complete"><i class="fa fa-check"></i> Completada</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button class="btn btn-primary" type="submit" >
                            <i class="glyphicon glyphicon-floppy-disk"></i>  Guardar
                        </button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
    @endsection

    @push('scripts')
    <script type="text/javascript" src="{{ asset('plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>

    <script type="text/javascript">
        jQuery(document).ready(function($) {

            /* Eliminar usuarios con sweetalert */
            $("#complete-appointments").on('click', '.complete-appointments', function(event) {
                event.preventDefault();

                var id = $(this).attr('id');

                swal({
                    title: '¿La cita fue completada?',
                    text: 'Se actualizará el estado de la cita.',
                    type: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#47a447',
                    cancelButtonColor: '#DC3545',
                    confirmButtonText: '<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Si, cita fue completada!',
                    cancelButtonText: '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Cancelar',
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {

                        // const contentType = "application/x-www-form-urlencoded; charset=utf-8";
                        // const url = "/appointments/updatetask/"+ id;
                        axios.post('/appointments/newComment/'+id,{
                        }).then(({data}) => {
                            if (data == 'Success') {
                                swal({
                                    type: 'success',
                                    title: 'La cita fue completada con éxito.',
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                setTimeout(function(){
                                    window.location.href = "/";
                                }, 1800);                                   
                            } else if (data == 'Error') {
                                swal(
                                    'Fallido!',
                                    'Oops ha ocurrido un problema al eliminar, intentelo nuevamente.',
                                    'error'
                                    );
                            }

                        });

                        // $.ajax({
                        //     url: url,
                        //     method: 'POST',
                        //     data: {'_method': 'UPDATE', '_token' : "{{ csrf_token() }}" },
                        //     contentType: contentType,
                        //     success: function(result) {
                        //         if (result == 'Success') {
                        //             swal({
                        //                 type: 'success',
                        //                 title: 'La cita fue completada con éxito.',
                        //                 showConfirmButton: false,
                        //                 timer: 1500
                        //             });
                        //             setTimeout(function(){
                        //                 window.location.href = "/appointments";
                        //             }, 1800);                                   
                        //         } else if (result == 'Error') {
                        //             swal(
                        //                 'Fallido!',
                        //                 'Oops ha ocurrido un problema al eliminar, intentelo nuevamente.',
                        //                 'error'
                        //             );
                        //         }
                        //     }
                        // });
                    } else if (result.dismiss === swal.DismissReason.cancel) {
                        swal(
                            'Operación Cancelada',
                            'Recuerde actualizar el estado de la cita cuando sea completada.',
                            'warning'
                            );
                    }
                });
            });                     
        });     
    </script>
    <script>
        var global_markers = []; 
        var longitude = $('#longitude').val();
        var latitude = $('#latitude').val();
        var markers = [[latitude,longitude, 'trialhead0']];

        function initAutocomplete() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(latitude, longitude);
            var myOptions = {
                zoom: 16,
                center: new google.maps.LatLng(latitude,longitude,'trialhead0')||map.setCenter(marker.getPosition()),
                mapTypeId: 'roadmap'
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            bounds  = map;
            addMarker();     
        }

        function addMarker() {
            for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
        var lat = parseFloat(markers[i][0]);
        var lng = parseFloat(markers[i][1]);
        var trailhead_name = markers[i][2];

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
        });

        marker['infowindow'] = contentString;

        global_markers[i] = marker;

        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNh1zGzQyZNuVHCc2uFwdKOLqDKDgiI4g&libraries=places&callback=initAutocomplete"
async defer></script>

@endpush