@extends('layouts/master')

@section('content')
<div id="wrapper">
  <div id="main" class="">
    <section class="section" id="section_5061034">
      <div class="bg section-bg fill bg-fill  bg-loaded">

      </div><!-- .section-bg -->

      <div class="section-content relative">

        <div class="row align-middle" id="row-13538362">
           <div class="col medium-3 small-12 large-3">
            <div class="col-inner">
                @if(Session::get('locale') == 'en')
                <a class="button primary" style="border-radius:5px;" href="{{ url('/lang/fr') }}">
                    <span>FR</span>
                </a>
                @else
                <a class="button primary" style="border-radius:5px;" href="{{ url('/lang/en') }}">
                    <span>EN</span>
                </a>
                @endif
              
              @can('isAdmin')
              <a class="button primary" style="border-radius:5px;" onclick="window.history.back();">
                <span>{{ __('web.back') }}</span>
              </a>
              @endcan
            </div>
          </div>
          <div class="col medium-5 small-12 large-5">
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" id="image_397860314">
                <div class="img-inner dark">
                  <img
                    src="{{ asset('assets/images/logo2.svg') }}"
                    class="attachment-original size-original" alt="" height="32.2" width="380.9">
                </div>

                <style scope="scope">
                  #image_397860314 {
                    width: 80%;
                  }
                </style>
              </div>

              <p style="color:#40B4C7;">Admin Dashboard</p>
            </div>
          </div>
          <div class="col medium-4 small-12 large-4">
            <div class="col-inner text-right">
              <a class="button primary" style="border-radius:5px;" href="#change_password">
                <span>{{ __('web.settings') }}</span>
              </a>
        
              <a href="{{ route('logout') }}" class="button primary" style="border-radius:5px;" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                <span>{{ __('auth.logout') }}</span>
              </a>
              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                @csrf
              </form>
            </div>
          </div>

          <style scope="scope">

          </style>
        </div>
        <div class="row" id="row-1243231399">
          <div class="col medium-2 small-12 large-2">
            <div class="col-inner">
            </div>
          </div>
          <div class="col medium-3 small-12 large-3">
            <div class="col-inner">
              <p><select class="sorting">
                  <option disabled="" selected="">{{ __('web.arrange_by') }}</option>
                  <option value="Alphabetical Order">Alphabetical Order</option>
                  <option value="Date">Date</option>
                  <option value="Size">Size</option>
                </select></p>
            </div>
          </div>
          <div class="col medium-2 small-12 large-2">
            <div class="col-inner">
            </div>
          </div>
          <div class="col medium-3 small-12 large-3">
            <div class="col-inner text-right">
              <form class="serachbar"><input type="text" placeholder="Search Here"><input type="submit" value=""></form>
            </div>
          </div>
        </div>
        <div class="row" id="row-1298995015">
          <div class="col medium-4 small-12 large-4">
            <div class="col-inner">
              <h4>{{ __('web.add_file') }}</h4>
              <form method="POST" action="{{ url('/patients/files') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="patient" value="{{$patient->id}}">
                <div class="form-field-hd"><label>{{ __('web.clinic_code') }}</label><input type="text" name="clinic_code" required readonly value="{{ $patient->clinic->code }}"></div>
                <div class="form-field-hd"><label>{{ __('web.date_needed') }}</label><input type="date" name="date_needed" required></div>
                <div class="form-field-hd"><label>{{ __('web.notes') }}</label><textarea name="notes"></textarea></div>
                <div class="form-field-hd"><label>{{ __('web.add_files') }}</label><input type="file" name="files" required></div>
                <div class="form-field-hd"><label>{{ __('web.address') }}</label><textarea name="address">{{ $patient->clinic->address }}</textarea></div>
                <div class="form-field-hd"><label>{{ __('web.clinic_name') }}</label><input type="text" name="clinic_name" required readonly value="{{ $patient->clinic->name }}"></div>
                <div class="form-field-hd-btn"><input type="submit" value="{{ __('web.save_and_send') }}"></div>
              </form>
            </div>
          </div>
          <div class="col historyfiles medium-8 small-12 large-8">
            <div class="col-inner">
              <h4>{{ __('web.history_of_files') }}</h4>
              @foreach ($patient->files as $i => $file)                                
              <div class="row row-collapse align-equal" id="row-430123997">
                <div class="col medium-4 small-12 large-4">
                  <div class="col-inner">
                    <h4><b>{{ __('web.file_name') }}:</b></h4>
                    <p>{{ $file->file }}</p>
                  </div>
                </div>
                <div class="col medium-4 small-12 large-4">
                  <div class="col-inner">
                    <h4><b>{{ __('web.date_of_needed') }}:</b></h4>
                    <p>{{ date('d-m-Y', strtotime($file->date_needed)) }}</p>
                  </div>
                </div>
                <div class="col medium-4 small-12 large-4">
                  <div class="col-inner">
                    <h4><b>{{ __('web.date_of_deletion') }}:</b></h4>
                    <p>{{ date('d-m-Y', strtotime($file->date_deletion)) }}</p>
                  </div>
                </div>
                <div class="col medium-8 small-12 large-8">
                  <div class="col-inner">
                    <h3><b>{{ __('web.notes') }}</b></h3>
                    <p>{{ $file->note }}</p>
                  </div>
                </div>
                <div class="col medium-4 small-12 large-4">
                  <div class="col-inner text-left">
                    <h3 style="text-align: left;"><b>{{ __('web.download_link') }}</b></h3>
                    <a class="button primary is-smaller lowercase" target="_blank" href="{{ asset('storage/patients/files/'.$file->file) }}">
                      <span>Download</span>
                    </a>
                    <a class="button primary is-smaller lowercase editLink" href="#edit_patient_file" data-id="{{ $file->id }}">
                      <span>Edit</span>
                    </a>
                    <a class="button alert is-smaller lowercase destroyLink" href="#delete_confirmation" data-id="{{ $file->id }}" data-name="{{ $file->name }}">
                      <span>Delete</span>
                    </a>

                  </div>
                </div>

                <style scope="scope">
                  #row-430123997>.col>.col-inner {
                    padding: 10px 10px 10px 10px;
                    background-color: rgb(235, 235, 235);
                  }
                </style>
              </div>
              <div class="gap-element clearfix" style="display:block; height:auto; padding-top:30px"></div>
              @endforeach
            </div>
          </div>
        </div>
      </div><!-- .section-content -->

      <style scope="scope">
        #section_5061034 {
          padding-top: 30px;
          padding-bottom: 30px;
        }
      </style>
    </section>
    <div id="edit_patient_file" class="lightbox-by-id lightbox-content lightbox-white mfp-hide"
      style="max-width:600px ;padding:0px">
      <section class="section has-block tooltipstered" style="padding-top: 20px;
            padding-bottom: 20px;">
        <div class="bg section-bg fill bg-fill   bg-loaded"
          style="background-image: url({{asset('assets/images/background.svg')}});">
        </div>
        <!-- .section-bg -->
        <div class="section-content relative">
          <div class="row row-collapse align-center" id="row-1900279732">
            <div class="col medium-11 small-11 large-11">
              <div class="col-inner">
                <h4>Edit Patient File</h4>
                <form method="POST" action="{{ route('patients.index') }}" id="patientFileEditForm" enctype="multipart/form-data">
                  @csrf
                  @method('PUT')
                  <input type="hidden" name="edit_id" id="edit_id" value="">
                  <div class="form-field-hd"><label>{{ __('web.date_needed') }}</label><input type="date" name="edit_date_needed" id="edit_date_needed" required></div>
                  <div class="form-field-hd"><label>{{ __('web.notes') }}</label><textarea name="edit_notes" id="edit_notes"></textarea></div>
                  <div class="form-field-hd"><label>{{ __('web.add_files') }}</label><input type="file" name="edit_files"></div>
                  <div class="form-field-hd-btn"><input type="submit" value="Update Patient File"></div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- .section-content -->
      </section>
    </div>
    <div id="delete_confirmation" class="lightbox-by-id lightbox-content lightbox-white mfp-hide"
      style="max-width:600px ;padding:0px">
      <section class="section has-block tooltipstered" id="section_843072587">
        <div class="bg section-bg fill bg-fill   bg-loaded">
        </div><!-- .section-bg -->
        <div class="section-content relative">
          <div class="row row-collapse align-center" id="row-1005866054">
            <div class="col medium-11 small-12 large-11">
              <div class="col-inner text-center">
                <form action="" method="post" id="deleteForm">
                  @csrf
                  @method("DELETE")
                  <input type="hidden" id="id" />
                  <h1>ALERT</h1>
                  <p>Are you sure you want to delete <strong></strong> file?</p>
                  {{-- <a class="button primary">
                        <span>YES</span>
                      </a> --}}
                  <button type="submit" class="button primary">YES</button>
                  <button id="btnNo" type="button" class="button alert">NO</button>
                  {{-- <a class="button alert">
                        <span>NO</span>
                      </a> --}}
                </form>
              </div>
            </div>
            <style scope="scope">
            </style>
          </div>
        </div><!-- .section-content -->
        <style scope="scope">
          #section_843072587 {
            padding-top: 60px;
            padding-bottom: 60px;
          }
    
          #section_843072587 .section-bg.bg-loaded {
            background-image: url(http://94l.c20.myftpupload.com/wp-content/uploads/2019/05/Group-42.svg);
          }
        </style>
      </section>
    </div>
  </div>
  <!-- #main -->
</div>
@endsection

@push('scripts')
<script src="{{asset('assets/js/axios.min.js')}}"></script>
<script>
  // Edit Patient File
  $('.editLink').on('click', function(){
    var id = $(this).data('id');
    var url = '{{route("patients.index")}}/files/'+id+'/edit';
    axios({
      method: 'get',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: url, 
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      $('#patientFileEditForm').attr('action', '{{route("patients.index")}}/files/'+id);
      $('#edit_id').val(id);
      $('#edit_date_needed').val(response.data.patientFile.formattedDate);
      $('#edit_notes').html(response.data.patientFile.note);
    });
  });
  // $('#patientFileEditForm').on('submit', function(e){
  //   e.preventDefault();
  //   // var form = $('form')[0];
  //   var formData = new FormData();
  //   // formData.append('edit_date_needed', $('#edit_date_needed'));
  //   formData.append('edit_notes', 'Bhai Allah k waste aaja');
  //   for (var [key, value] of formData.entries()) {
  //       console.log(key, value);
  //       }
  //   // formData.append('edit_files', $('#edit_files').files[0]);
  //   // formData.append('_token', $('#patientFileEditForm input[name="_token"]').val());
  //   // 'X-Requested-With': 'XMLHttpRequest', 
  //   // axios({
  //   //   method: 'put',
  //   //   headers: { 'Content-Type': 'multipart/form-data' },
  //   //   url: $('#patientFileEditForm').attr('action'),
  //   //   data: formData,
  //   //   // data: jQuery('#patientFileEditForm').serialize(),
  //   //   // responseType: 'json'
  //   // })
  //   axios.put($('#patientFileEditForm').attr('action'), formData)
  //   .then(function(response){
  //     if(response.data.status == 0)
  //     {
  //       alert(response.data.msg);
  //       return;
  //     }
  //     var id = $('#edit_id').val();
  //     // alert($('.editLink[data-id="'+id+'"]').parent().parent().parent().children().eq(1).attr('class'));
  //     var row = $('.editLink[data-id="'+id+'"]').parent().parent().parent();
  //     $(row).children().eq(0).find('p').html(response.data.patientFile.name);
  //     $(row).children().eq(1).find('p').html(response.data.patientFile.date_needed);
  //     $(row).children().eq(3).find('p').html(response.data.patientFile.note);
  //     // $('.editLink[data-id="'+id+'"]').parent().parent().parent().children('div').eq(1).find('p').html(response.data.patientFile.name);
  //     $('.mfp-close').click();        
  //   });
  // });

  $(".destroyLink").on('click', function(){
    $("#delete_confirmation form").attr('action', '{{route('patients.index')}}/files/'+$(this).data('id'));
    $("#id").val($(this).data('id'));
    $("#delete_confirmation form p strong").html($(this).data('name'));
    // $("#modal-danger").modal('show');
  });
  $('#deleteForm').on('submit', function(e){
    e.preventDefault();
    axios({
      method: 'delete',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: $('#deleteForm').attr('action'),
      data: jQuery('#deleteForm').serialize(),
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      $('.mfp-close').click();
      $('.destroyLink[data-id="'+$('#id').val()+'"]').parent().parent().parent().hide('slow');
    });
  });
</script>
@endpush