@extends('layouts.templatemedflix')
//
@section('content_ticketview')
<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col-4 col-md-4 col-lg-4">
                <h3>
                    Ticket #{{$ticket->ticket_number}}
                    @if (Auth::user()->following->contains('ticket_id',$ticket->id))
                    <a role="button" class="btn btn-link btn-lg" href="javascript:unfollowTicketFunction()">
                    <span style="color:#f6e58d;">
                    <i class="fas fa-star"></i>
                    </a>
                    @elseif(Auth::user()->name == $ticket->assigned_user)
                    <span style="color:#f6e58d">
                    <i class="fas fa-star"></i>
                    </span>
                    @else
                    <a role="button" class="btn btn-link btn-lg" href="javascript:followTicketFunction()">
                    <span style="color:#f6e58d;">
                    <i class="far fa-star"></i>
                    </span>
                    </a>
                    @endif
                </h3>
            </div>

            <div class="col-4 col-md-4 col-lg-4">
                <h3>Fecha emitida: {{$ticket->created_at}}</h3>
            </div>

            <div class="col-4 col-md-4 col-lg-4">
                <h3>
                Status:
                @if ($ticket->status == "Documentos")
                <span class="badge-dot badge-info mr-1"></span>
                @elseif ($ticket->status == "Completados")
                <span class="badge-dot badge-success mr-1"></span>
                @elseif ($ticket->status =="PENDING STATUS")
                <span class="badge-dot badge-warning mr-1"></span>
                @elseif ($ticket->status == "No se a determinado cita")
                <span class="badge-dot badge-warning mr-1"></span>
                @endif
                {{-- <span class="badge-dot badge-brand mr-1" style="background-color:#5969ff !important;"></span> --}}
                {{$ticket->status}}
                </h3>
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                <h5></h5>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-4 col-md-4 col-lg-4">
                <h3>Información del paciente:</h3>
                <p class="card-text">Nombre completo: {{ $ticket->userprofile->user->name }}</p>
                <p class="card-text">Edad: {{$ticket->userprofile->birthdate}}</p>
                <p class="card-text">Sexo: {{$ticket->userprofile->sex}}</p>
            </div>

            <div class="col-4 col-md-4 col-lg-4">
                <form method="post" action="" id="myCode">
                <input type="hidden" name="_method" value="PUT">
                {{ csrf_field() }}
                    <h3>
                        Servicio solicitado:
                        <input type="text" name="action" value="7" hidden>
                        <select class="js-example-placeholder-multiple js-states custom-select" id="service-code" name="code" onchange="addCode.call()">
                            @if($ticket->code == null)
                                <option></option>
                            @else 
                                <option>{{$ticket->code}}</option>
                            @endif
                            <optgroup label="MRI">
                                <option>1520</option>
                                <option>6532</option>
                            </optgroup>  
                            <optgroup label="MRA">
                            </optgroup> 
                            <optgroup label="CTA">
                                <option>75214</option>
                                <option>6452</option>
                                <option>6540</option>
                            </optgroup>  
                            <optgroup label="Dual Sorce CT">
                                <option>5632</option>
                            </optgroup> 
                            <optgroup label="CTA">
                                <option>4879</option>
                            </optgroup>
                            <optgroup label="Nuclear Medicine">
                                <option>7854</option>
                            </optgroup>
                            <optgroup label="SPECT-CT">
                                <option>3456</option>
                            </optgroup>
                            <optgroup label="PET-CT">
                                <option>9514</option>
                            </optgroup>
                            <optgroup label="DEXA-Bone Densitometry">
                                <option>3547</option>
                            </optgroup>
                            <optgroup label="Body Composition Analysis">
                                <option>2587</option>
                            </optgroup>
                                <optgroup label="General and Vascular Ultrasound">
                            </optgroup>
                            <optgroup label="Pediatric and Adult Sedation">
                            </optgroup>
                            <optgroup label="Iodine 131 Therapy">
                            </optgroup>
                            <optgroup label="DaTscan">
                            </optgroup>
                        </select>
                    </h3>
                </form>
                {{--  --}}
                <form method="post" action="" id="myService">
                <input type="hidden" name="_method" value="PUT">
                {{ csrf_field() }}
                <input type="text" name="action" value="8" hidden>
                    <h3>
                        <select class="js-example-placeholder-multiple js-states custom-select" id="service-select" name="service" onchange="addService.call()">
                            @if($ticket->service == null)
                                <option></option>
                            @else
                                <option>{{ $ticket->service }}</option>
                            @endif
                            <option value="MRI">MRI</option>
                            <option value="MRA">MRA</option>
                            <option value="Dual Sorce CT">Dual Sorce CT</option>
                            <option value="CTA">CTA</option>
                            <option value="Nuclear Medicine">Nuclear Medicine</option>
                            <option value="SPECT-CT">SPECT-CT</option>
                            <option value="PET-CT">PET-CT</option>
                            <option value="DEXA-Bone Densitometry">DEXA-Bone Densitometry</option>
                            <option value="Body Composition Analysis">Body Composition Analysis</option>
                            <option value="General and Vascular Ultrasound">General and Vascular Ultrasound</option>
                            <option value="Pediatric and Adult Sedation">Pediatric and Adult Sedation</option>
                            <option value="Iodine 131 Therapy">Iodine 131 Therapy</option>
                            <option value="DaTscan">DaTscan</option>
                        </select>
                    </h3>
                </form>

                <hr>

                <h3>Información de Contacto</h3>
                    <p class="card-text">Teléfono: {{$ticket->userprofile->phone}}</p>
                    <p class="card-text">Email: {{$ticket->userprofile->user->email}}</p>
                <hr>
            </div>

            <div class="col-4 col-md-4 col-lg-4">
                <form method="post" action="" id="mySelectionForm">
                <input type="hidden" name="_method" value="PUT">
                {{ csrf_field() }}
                    <hr>
                    <h5>Asignar a:</h5>
                    <div class="dropdown">
                        <button class="btn btn-brand dropdown-toggle" type="button" id="dropdownMenuButtonUsers" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            @if($ticket->assigned_user == "PENDING USER")
                            PENDING USER
                            @else
                            {{$ticket->assigned_user}}
                            @endif
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonUsers" id="dropDownUsers">
                            @foreach ($staffs as $staff)
                            <a class="dropdown-item" href="javascript:assignedUserFunction()">{{$staff->user->name}}</a>    
                            @endforeach
                        </div>
                    </div>
                    <hr>
                    <h5>Cambiar Status:</h5>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            @if($ticket->status == "PENDING STATUS")
                            PENDING STATUS
                            @else
                            {{$ticket->status}}
                            @endif
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonStatus" id="dropDownStatus">
                            @for ($i = 0 ; $i < $statuslenght ; $i++ )
                            <a class="dropdown-item" href="javascript:changeStatusFunction()">{{$status[$i]->status}}</a>
                            @endfor
                        </div>
                    </div>
                <input type="text" value="" name="action" id="action" hidden>
                <input type="text" value="" name="" id="info" hidden>
                </form>                                        
            </div>

            <br>
{{--  Div Archivos Principales  --}}
            <div class="container-fluid">
                <div class="col">
                    {{--  --}}
                    <div class="card row">
                        <div class="card-header">
                            <h3 class="card-title mb-2">Archivos Principales</h3>
                        </div>
                        <div class="container justify-content-md-center">
                            <div class="row">
                                <div class="col">
                                    <a href="#" class="pop">
                                        <img width="300" height="200" class="img-thumbnail" src="data:image;base64,{!! base64_encode($decryptId) !!}" alt="" />
                                    </a>
                                </div>

                                <div class="col">
                                    <a href="#" class="pop">
                                        <img width="300" height="200" class="img-thumbnail" src="data:image;base64,{!! base64_encode($decryptFile[0]) !!}" alt="" />
                                    </a>
                                </div>
                                <div class="w-100"></div>

                                <div class="col">
                                    <a href="#" class="pop">
                                        <img width="300" height="200" class="img-thumbnail" height="" src="data:image;base64,{!! base64_encode($decryptMedicalCard) !!}" alt="" />
                                    </a>
                                    <p>PRIMARIO</p>
                                </div>

                                <div class="col">
                                    @if ($ticket->medical_plan->count() == 2)
                                        <a href="#" class="pop">
                                        <img width="300" height="200" class="img-thumbnail" height="" src="data:image;base64,{!! base64_encode($decrypt2ndMedicalCard) !!}" alt="" />
                                        </a>
                                        <p>SECUNDARIO</p>
                                    @endif
                                </div>
                            </div>
                        </div>                        
                    </div>
                    {{--  --}}
                    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">              
                                <div class="modal-body">
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                        <img src="" class="imagepreview" style="width: 100%;" >
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--  --}}
                </div>
            </div>

{{--  Div Archivos Adicionales  --}}
            <div class="container-fluid">
                <div class="col">
                    <div class="card row">
                        <div class="card-header">
                            <h3 class="card-title mb-auto">Archivos Adicionales</h3>
                        </div>

                        <div class="container justify-content-md-center">
                            <div class="row">
                                @php($t=4)
                                @for ($i = 1; $i < $ticket->file->count(); $i++) 
                                    @if ($ticket->file[$i]->category == "doc")
                                        <div class="col">
                                            <a href="{{ url('document', $ticket->file[$i]->id)}}" target="_blank">
                                                <img width="150" height="100" class="img-thumbnail" height="" src="{{ URL::asset('pdfIcon.png') }}" alt="" />
                                                <p>{{ $ticket->file[$i]->file_url }}</p> 
                                            </a>  
                                        </div>
                                    @else
                                        <div class="col">   
                                            <a href="#" class="pop">                                                                  
                                                {{-- <img width="150" height="100" class="img-thumbnail" height="" src="data:image;base64,{!! base64_encode($decryptFile[$i]) !!}" alt="" /> --}}
                                                <img width="150" height="100" class="img-thumbnail" height="" src="data:image;base64,{!! base64_encode($decryptFile[$i]) !!}" alt="" />
                                                <p>{{ $ticket->file[$i]->file_url }}</p> 
                                            </a>
                                        </div> 
                                    @endif
                                    @if ($i == $t)
                                        <div class="w-100"></div>
                                        @php($t = $t+4)
                                    @endif
                                @endfor
                            </div>
                        </div>                                                                              
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- START : Small Form For Comments --}}

<div class="card">
    <div class="card-header">
        <h3>Comentario</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-12 col-md-12 col-lg-12">
                <form method="post" action="">
                <input type="hidden" name="_method" value="PUT">
                {{ csrf_field() }}

                <div class="form-group">
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" name="comment" type="text"></textarea>
                </div>
                <input type="text" value="3" name="action" id="action" hidden>
                <button type="submit" class="btn btn-primary">Enviar</button>

                </form>
            </div>

            <div class="col-12 col-md-12 col-lg-12">
                <form method="post" action="" id="dropZoneForm" enctype="multipart/form-data">
                <input type="hidden" name="_method" value="PUT">
                {{ csrf_field() }}
                    <div class="form-group file-upload-wrapper">
                        <div id="dropzone" data-v-3bfeb226="" class="vue-dropzone dropzone dz-clickable">
                            <!---->
                            <div class="dz-default dz-message" style="height:100px;">
                                <span>Drop files here to upload</span>
                            </div>
                        </div>
                    </div>
                <input type="file" name="file[]" id="file" hidden>
                <input type="text" value="5" name="action" id="action" multiple hidden>
                </form>                                
            </div>
        </div>
    </div>
</div>
{{-- END : Small Form For Comments --}}

<div class="card">
    <div class="card-header">
        <h3>Comentarios:</h3>
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-2 col-md-2 col-lg-2">
                <h4>Nombre</h4>
            </div>
            <div class="col-2 col-md-2 col-lg-2">
                <h4>Fecha</h4>
            </div>
            <div class="col-8 col-md-8 col-lg-8">
                <h4>Comentarios</h4>
            </div>
        </div>
        @foreach ($ticket->activities as $activities )
            @if($activities->action == '3')
                <hr>
                <div class="row">
                    <div class="col-2 col-md-2 col-lg-2">
                        <h4>{{$activities->user->name}}</h4>
                    </div>
                    <div class="col-2 col-md-2 col-lg-2">           
                        <h4>{{$activities->created_at->format('m/d/y h:m s')}}</h4>
                    </div>
                    <div class="col-8 col-md-8 col-lg-8">
                        <h4>Comentario:</h4>
                        <form method="post" action="">
                        <input type="hidden" name="_method" value="PUT">
                        {{ csrf_field() }}
                            @for($i = 0 ; $i < $activities->ticket->ticket_comments->count() ; $i++)
                                @if($activities->created_at == $activities->ticket->ticket_comments[$i]->created_at)                                                   
                                    @if($activities->ticket->ticket_comments[$i]->user_id == Auth::user()->id)
                                        <textarea class="form-control" rows="2" name="comment" type="text">
                                            {{$activities->ticket->ticket_comments[$i]->comment}}
                                        </textarea>
                                        <br>
                                        <input type="text" value="{{$activities->ticket->ticket_comments[$i]->id}}" name="id" hidden>
                                        <button type="submit" class="btn btn-primary">Edit Comment</button>
                                    @else
                                        <p>{{$activities->ticket->ticket_comments[$i]->comment}}</p> 
                                    @endif
                                @endif
                            @endfor
                        <input type="text" value="4" name="action" id="action" hidden>
                        </form>
                    </div>
                </div>
            @endif
        @endforeach
    </div>
</div>

<hr>

<div class="card">
    <div class="card-header">
        <h3>Actividad</h3>
    </div>        
    <div class="card-body">
        <div class="row">
            <div class="col-2 col-md-2 col-lg-2">
                <h4>Nombre</h4>
            </div>
            <div class="col-2 col-md-2 col-lg-2">
                <h4>Fecha</h4>
            </div>
            <div class="col-8 col-md-8 col-lg-8">
                <h4>Descripcion</h4>
            </div>
        </div>
        @foreach($ticket->activities as $activities)
            <hr>
            <div class="row">
                <div class="col-2 col-md-2 col-lg-2">
                    <h4>{{$activities->user->name}}</h4>
                </div>
                <div class="col-2 col-md-2 col-lg-2">
                    <h4>{{$activities->created_at->format('m/d/y h:m s')}}</h4>
                </div>
                <div class="col-8 col-md-8 col-lg-8">
                    <h4>{{$activities->description}}</h4>
                </div>
            </div>
        @endforeach
    </div>
</div>
{{--  --}}
   <!-- Modal -->
<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">
                    <input class="form-control" type="text" placeholder="Search" aria-label="Search" id="myInput" onkeyup="mySearch()">
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="myTable" class="table">
                    <tr class="header">
                        <th style="width:60%;">Pacientes</th>
                        {{-- <th style="width:40%;">Country</th> --}}
                    </tr>
                    @foreach ($table as $ticket )
                    <tr>
                        <td>
                            <a href="tickets/{{ $ticket->id }}">
                            {{$ticket->ticket_number}} : {{ $ticket->userprofile->user->name }}
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
            <div class="modal-footer">
        
            </div>
        </div>
    </div>
</div>

    {{-- Follow Ticket Section Test --}}
    <form method="post" action="" id="myFollowTicketForm">
    <input type="hidden" name="_method" value="PUT">
    {{ csrf_field()}}

    <input type="text" value="6" name="action" id="action" hidden>
    </form>

    <form method="post" action="" id="myUnfollowTicketForm">
    <input type="hidden" name="_method" value="DELETE">
    {{ csrf_field() }}
    </form>
@endsection
@section('script')
    <script>
        function readStatusActivity(){
        document.getElementById("myStatusForm").submit();
    }
    function readFollowActivity(){
        document.getElementById("myFollowForm").submit();
    }

    $(function(){
        $('.pop').on('click', function() {
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');   
        });		
    }); 

    function assignedUserFunction(){
        var x = document.getElementById("dropdownMenuButtonUsers").textContent;
        document.getElementById("action").value=1;
        document.getElementById("info").value=x;
        document.getElementById("info").name="assigned_user";
        //document.forms[0].submit();
        document.getElementById("mySelectionForm").submit();
    }

    function changeStatusFunction(){
        var x = document.getElementById("dropdownMenuButtonStatus").textContent;
        
        document.getElementById("action").value=2;
        document.getElementById("info").value=x;
        document.getElementById("info").name="status";
        //document.forms[0].submit();
        document.getElementById("mySelectionForm").submit();
    }    
    
    function followTicketFunction(){
        document.getElementById("myFollowTicketForm").submit();
    }

    function unfollowTicketFunction(){

        document.getElementById("myUnfollowTicketForm").submit();

    }
    $("#dropDownStatus a").click(function() {
        var selText = $(this).text();
        $("#dropdownMenuButtonStatus").text(selText);
    });

    $("#dropDownUsers a").click(function(){
        var userText = $(this).text();
        $("#dropdownMenuButtonUsers").text(userText);
    })   

    //Drop Section
    dropzone.ondragover = dropzone.ondragenter = function(evt) {
        evt.preventDefault();
    };

    dropzone.ondrop = function(evt) {
        // pretty simple -- but not for IE :(
        file.files = evt.dataTransfer.files;
        evt.preventDefault();
        //document.forms[0].submit();
        document.getElementById("dropZoneForm").submit();
    };
    
    function mySearch() {
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }       
            }
    
    }
    $(".js-example-placeholder-multiple").select2({
        placeholder: "Select Code:",
        allowClear: true
    }); 

    function addCode(){
        document.getElementById("myCode").submit();
    }

    function addService(){
        document.getElementById("myService").submit();
    }
    

    </script>
@endsection