@extends('adminlte::page')

@section('title', __('global.Patient').' '.__('global.Pass'))

@section('content_header')
    <h1>@lang('global.Patient') @lang('global.Pass')</h1>
@endsection

@section('content')
    <div class="container my-5">
        <div class="row">
            <div class="col-md-6 offset-md-3 text-center" id="form_wrapper">
                <div class="alert alert-info overflow-hidden mx-auto" style="overflow-wrap: break-word;max-width: 350px;">
                    <img src="{{ !$patient->qrcode ?: url($patient->qrcode) }}" class="img-thumbnail" />
                </div> 
                <div id="form-space"></div>
                <div class="col-md-12 form-group">
                    @if($checkup->dcc_type_id === 1)
                        <small>@lang('global.Pass Sanitaire Interoperable')</small>
                    @elseif ($checkup->dcc_type_id === 2)
                        <small>@lang('global.Pass Vaccinal Interoperable')</small>
                    @elseif ($checkup->dcc_type_id === 3)
                        <small>@lang('global.Pass Recovery interoperable')</small>
                    @endif
                    <small class="mx-auto" > - {{ $patient->registreid}}</small>
                </div>
                @if($patient->qrcode)
                    <div class='row'> 
                        <div class='offset-md-1 col-md-5'>
                            <a class='btn btn-secondary mb-4 w-100' target="_blank" href='{{ route('patients.show-qrcode', ['patient' => $patient->string_id, 'checkup' => $checkup->string_id, 'print' => 1]) }}'>
                                @lang('global.Print')
                            </a>
                        </div>
                        <div class='col-md-5'>
                            <button data-toggle='modal' data-target='#notify-user-modal' class='btn btn-info w-100' href='/api-test'>@lang('global.Communication')</button>
                        </div>
                    </div>
                @else
                    <div class="alert alert-danger">
                        @lang('global.Qrcode is not generated for some reasons')
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="modal fade" id="notify-user-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@lang('global.E-mail Sender')</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                  <form name="notify_form" action="{{ route('notify-user') }}" class="row text-left" method="POST">
                      @csrf
                      <input type="hidden" name="image" value="{{ $patient->qrcode }}">
                      <input type="hidden" name="send_link" value="{{ route('public.checkup-details', $checkup->string_id) }}">

                      <input type="hidden" name="image">
                      <div class="col-md-12 form-group">
                          <label for="email">@lang('global.Email')</label> 
                          <input type="email" name="email" id="email" class="form-control" placeholder="@lang('global.Email')" value="{{ $patient->email }}" /> 
                      </div> 

                      <div class="col-md-12 form-group">
                          <label for="phone">@lang('global.Phone') <small>@lang('global.phone_formatted')</small></label> 
                          <input type="text" name="phone" id="phone" class="form-control" placeholder="@lang('global.Phone')" value="{{ $patient->mobile }}" /> 
                      </div> 
                  </form>
                </div>

                <div class="modal-footer">
                  <button onclick="document.notify_form.submit();" class="btn btn-primary btn-block add-spinner">@lang('global.Submit')</button>
                </div>
            </div>
        </div>
    </div>
@endsection