@extends('layouts.head')
@section('content')
<!-- Scripts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar_details->script() !!}
<h2>{{ __('messages.agenda.agenda') }}</h2>
<form method="POST" action="{{ url('agenda') }}">
  {{ csrf_field() }}
  <input type="hidden" name="user_id" id="user_id">
  <input type="hidden" name="header_value_id" id="header_value_id">
  <div class="form-group">
    <div class="row">

      <div class="col-xs-6">
        <div class="form-group">
        <label for="exampleFormControlInput1">{{ __('messages.agenda.specialty') }}</label>
         <select class="form-control" name="specialty_id" id="specialty_id" onchange="loadMedicsFromSpecialty()">
         <option value="" selected>{{ __('messages.agenda.select') }}</option>
         @foreach($specialties as $s)
            <option value="{{$s->id}}">{{$s->name}}</option>
          @endforeach
          </select>
          <label for="exampleFormControlInput1">{{ __('messages.agenda.medic') }}</label>
          @if($is_medic)
            <select class="form-control" name="medic_id" id="select-medic" readonly>
          @else
            <select class="form-control" name="medic_id" id="select-medic">
          @endif
            </select>
        </div>
      </div>
      {{-- <div class="col-xs-6">
        <div class="form-group">
          <label for="">{{ __('messages.agenda.type_consultation') }}</label>
          <select class="form-control" name="agenda_type_id" id="select-agenda-type">
            @foreach($agenda_types as $a)
            <option value="{{ $a->id }}">{{ $a->description }}</option>
            @endforeach
          </select> --}}
          {{-- <label for="">{{ __('messages.agenda.rate') }}</label>
          <input class="form-control" name="rate" id="rate" /> --}}
        {{-- </div>
        
      </div> --}}
    </div>
    {{-- <div class="form-group">
      <div class="row">
        <div class="col-xs-4">
          <label for="exampleFormControlInput1">{{ __('messages.agenda.patient') }}</label>
          <input type="text" class="form-control" name="" id="user_document" />
        </div>

        <div class="col-xs-4">
          <label for="exampleFormControlInput1">{{ __('messages.agenda.name') }}</label>
          <input type="text" class="form-control" name="" id="name" readonly />
        </div>

        <div class="col-xs-4">
          <label for="exampleFormControlInput1">{{ __('messages.agenda.document') }}</label>
          <input type="text" class="form-control" name="" id="document" readonly />
        </div>
      </div>
    </div> --}}

    {{-- <label for="exampleFormControlInput1">{{ __('messages.agenda.date') }}</label>
    <input type="date" class="form-control" name="event_date" value="{{ date("Y-m-d") }}" /> --}}

    {{-- <div class="row">
      <div class="col-xs-3">
        <div class="form-group">
          <label for="exampleFormControlInput1">{{ __('messages.agenda.start_time') }}</label>
          <input id="start_time" type="time" class="form-control" name="start_time" required />      
        </div>
      </div>
      <div class="col-xs-3">
        <label for="exampleFormControlInput1">{{ __('messages.agenda.end_time') }}</label>
        <input id="end_time" type="time" class="form-control" name="end_time" required readonly />
      </div>
      <div class="col-xs-3">
        <label for="exampleFormControlInput1">{{ __('messages.agenda.send_consent') }}</label>
        <div class="checkbox checbox-switch switch-success">
          <label>
            {{ __('messages.no') }}
            <input type="checkbox" class="chkInsurances" id="send_consent" name="send_consent">
            <span></span>
            {{ __('messages.yes') }}
          </label>
        </div>
      </div>

      <div class="col-xs-3">
        <label for="exampleFormControlInput1">{{ __('messages.agenda.send_payment') }}</label>
        <div class="checkbox checbox-switch switch-success">
          <label>
            {{ __('messages.no') }}
            <input type="checkbox" class="chkInsurances" id="send_payment" name="send_payment">
            <span></span>
            {{ __('messages.yes') }}
          </label>
        </div>
      </div>
    </div> --}}

    @if($medic)
      <div id="medic-info" style="margin-top: 20px">
        <h4>{{ __('messages.agenda.medic') }}: {{$medic->name}} {{$medic->last_name}}</h4>
        <h4>{{ __('messages.agenda.specialty') }}: {{$medic->specialty->name}} </h4>
        <input type="hidden" name="speciality_id" id="speciality_id" value="{{$medic->specialty->id}}">
      </div>
    @endif

  </div>
  <div class="box-header">
    <button type="submit" class="btn btn-success pull-right"
      style="margin-right:5px; background-color:#f79708; border-color:#f79708;">
      {{ __('messages.agenda.update_schedule') }}
    </button>
  </div>
  <br />
</form>

<div class="panel panel-primary">
  <div class="panel-heading">{{ __('messages.agenda.agenda') }}</div>
  <div class="panel-body">
    {!! $calendar_details->calendar() !!}
  </div>
</div>

@include('agenda.modal_cancel')
@include('agenda.modal_cita')
@include('agenda.modal_appoinment')
@include('requests_old.covid19.modal_loading')

<script>
  $(document).ready(function() { 
    @if(isset($header_id))
    loadProposal({{ $header_id }});
    @endif
  });

  $("#user_document").autocomplete({
      source: "/pacientes/autocomplete",
      minLength: 3,
      select: function (event, ui) {
        $('#user_id').val(ui.item.id);
        $('#name').val(ui.item.nombre1 + " " + ui.item.apellido1);
        $('#document').val(ui.item.value);
        $('#rate').val(parseFloat(ui.item.rate));
      }
    });

  $("#start_time").change(function() {
    var start = "1971/01/01 " + $("#start_time").val();
    var end = addMinutes(new Date(start), $('#select-medic').find(":selected").data('dating'));

    $("#end_time").val(
      (end.getHours() < 10 ? "0" + end.getHours() : end.getHours()) + ":" + (end.getMinutes() < 10 ? "0" + end.getMinutes() : end.getMinutes())
    );
  });

  function addMinutes(date, minutes) {
    return new Date(date.setMinutes(date.getMinutes() + minutes));
  }

  function showDateDecisionModal(event_id){
    $.ajax({
      url: "/agenda/date/info/" + event_id,
      method: "GET",
      contentType: "application/json",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        "Content-Type": "application/json"
      },
      success: function (res){
        console.log(res.event);
        if(res.event.event_state_option.id == 1){
          $("#modal-cita").modal("show"); 
          $('#btn-create-date').attr('data-event-id',res.event.id);
        }else if(res.event.event_state_option.id == 3){
          $("#modal-cancel").modal("show"); 
          $('#btn-create-invoice').attr('data-event-id',res.event.id);
          $('#btn-modal-cancel').attr('data-event-id',res.event.id);
          $('#consent_received').prop('checked', res.consent_received);
          $('#payment_received').prop('checked', res.payment_received);
          if(res.event_file_id){
              $('#consent_file_download').show();
              $('#consent_file_download').html('Ver consentimiento');
              $('#consent_file_download').attr('href', '/consent/event/' + res.event_file_id );
            } else {
              $('#consent_file_download').hide();
              $('#consent_file_download').html('');
              $('#consent_file_download').attr('href', '#');
            }
        }else if(res.event.event_state_option.id == 4){
          $("#modal-begin-appoinment").modal("show");
          $('#btn-create-consultation').data('event_id', res.header_value_id);
          $('#btn-create-consultation').data('user_id', res.event.user_id);
          $('#btn-create-consultation').data('speciality_id', res.event.specialty_id);
          $('#btn-create-consultation').data('event_data_id', res.event.id);
          $('#btn-create-consultation').data('document_id', res.event.document_id);
        }else if(res.event.event_state_option.id == 5){
          swal("{{ __('messages.agenda.end_appointment') }}", "", "success").then(function() {
              // window.location.reload();
          });
        }
      },
      error: function(err){

      }
    });
  }

  function commitCancelDate() {
    if($("#text_cancel").val().length == 0 && $("#template_response_id").val()==0){
      swal("{{ __('messages.agenda.cancel_warning') }}", "", "warning").then(function() {
              // window.location.reload();
      });
    }else{
      $("#modalLoader").modal("show");
      var data = {
        event_id: parseInt($('#btn-modal-cancel').attr('data-event-id')),
        title_cancel: $("#template_response_id").val(),
        text_cancel: $("#text_cancel").val()
      };
      $.ajax({
        url: "/agenda/cancel",
        type: "PUT",
        contentType: "application/json",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
          "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function(response){
          if(response.r){
            console.log(response.data);
            $("#modal-cancel").modal("hide");
            $("#modalLoader").modal("hide");
            swal("{{ __('messages.agenda.cancel_appointment') }}", "", "success").then(function() {
              //window.location.reload();
              window.location = '/agenda';
            });
          }else{
            $("#modalLoader").modal("hide");
            $("#modal-cancel").modal("hide");
            swal(response.data, "", "warning").then(function() {
              // window.location.reload();
            });
          }
        },
        error: function(err) {
          $("#modalLoader").modal("hide");
          swal("Error", err.responseJSON.message, "error");
        }
      });
    }
  }

  function loadMedicsFromSpecialty(){
    let specialty_id = $('#specialty_id').val();
    $.ajax({
      method: 'GET',
      url: '/agenda/medics/' + specialty_id,
      success: function(d){
        if(d){
          $("#select-medic").empty();
          let sel = '<option value="">-- Seleccione</option>';
          $("#select-medic").append(sel);
          for(let i = 0; i < d.length; i++){
            // Delete options and add again for Medic.
            let newopt = `<option data-dating="${d[i].dating_duration}" value="${d[i].id}">${d[i].name} ${d[i].last_name} (${d[i].dating_duration} min)</option>`;
            $("#select-medic").append(newopt);
          }
        }
      }
    });
  }

  function createProposalDocument(){
    let proposal_id = $('#btn-create-consultation').data('event_id');
    let event_id = $('#btn-create-consultation').data('event_data_id');
    let document_id = $('#btn-create-consultation').data('document_id');
    if(document_id){
      console.log(document_id); 
      swal("{{ __('messages.agenda.document_created') }}", "", "success").then(function() {
          window.location = 'request/edit/document/' + document_id;       
        });    
    }else{
      if(proposal_id){
        // Crear documento con header_value con solicitud móvil
        console.log(proposal_id);
        window.location = '/request/proposal/' + proposal_id + '/' + event_id;
      }else{
        // Crear documento con event_id con solicitud del portal
        let user_id = $('#btn-create-consultation').data('user_id');
        let speciality_id = $('#btn-create-consultation').data('speciality_id');
        console.log(event_id);
        window.location = '/request/proposal/portal/' + user_id + '/' + speciality_id + '/' + event_id;
      }
    }
  }

  function loadProposal(header_id){
    $('#header_value_id').val(header_id);
    $.ajax({
      url: "/agenda/proposal/" + header_id,
      method: "GET",
      success: function(response){
        if(response){
          $('#user_id').val(response.user.id);
          $('#user_document').val(response.user.document);
          $('#document').val(response.user.document);
          $('#name').val(response.user.name + " " + response.user.last_name);
          $('#specialty_id').val(response.specialty_id);
          $('#rate').val(parseFloat(response.rate));
          $('#specialty_id').trigger('change');
          
          setTimeout(function(){
            $('#select-medic').val(response.medic_id);
          }, 1500);
        }
      }
    });
  }

  function createAppointment(){
    $("#modalLoader").modal("show");
    var data = {
      event_id: parseInt($('#btn-create-date').attr('data-event-id')),
      user_id: parseInt($('#user_id').val()),
      date_type_id: parseInt($('#date_type').val()),
      speciality_id: parseInt($('#speciality_id').val()),
      request_type: $('#request_type').val()
    };
    $.ajax({
      url: "/agenda/portal",
      type: "PUT",
      contentType: "application/json",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        "Content-Type": "application/json"
      },
      data: JSON.stringify(data),
      success: function(response){
        console.log(response);
        if(response.r){
          $("#modalLoader").modal("hide");
          $("#modal-cita").modal("hide");
          swal("{{ __('messages.agenda.confirmed_medical_appointment') }}", "", "success").then(function() {
            window.location.reload();
          });
        }else{
          $("#modalLoader").modal("hide");
          $("#modal-cita").modal("hide");
          swal(response.data, "", "warning").then(function() {
            window.location.reload();
          });
        }  
      },
      error: function(err) {
        $("#modalLoader").modal("hide");
        swal("Error", err.responseJSON.message, "error");
      }
    });
  }

  function invoiceConfirmed(){
    $("#modalLoader").modal("show");
    var data = {
      event_id: parseInt($('#btn-create-invoice').attr('data-event-id'))
    };
    $.ajax({
      url: "/agenda/invoiceConfirmed",
      type: "PUT",
      contentType: "application/json",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        "Content-Type": "application/json"
      },
      data: JSON.stringify(data),
      success: function(response){
        if(response.r){
          $("#modalLoader").modal("hide");
          console.log(response.data);
          $("#modal-cancel").modal("hide");
          swal("{{ __('messages.agenda.invoiced_appointment') }}", "", "success").then(function() {
            window.location.reload();
          });
        }else{
          $("#modalLoader").modal("hide");
          $("#modal-cancel").modal("hide");
          swal(response.data, "", "warning").then(function() {
            // window.location.reload();
          });
        }
      },
      error: function(err) {
        $("#modalLoader").modal("hide");
        swal("Error", err.responseJSON.message, "error");
      }
    });
  }

</script>
@endsection