@extends('layouts/master')

@section('content')
<div id="wrapper">
  <div id="main" class="">
    <section class="section" id="section_1736602487" style="padding-top: 30px; padding-bottom: 30px;">
      <div class="bg section-bg fill bg-fill  bg-loaded">
      </div>
      <!-- .section-bg -->
      <div class="section-content relative">
        {{-- <div class="row" id="row-2111276267">
          <div class="col medium-2 small-2 large-2">
            <div class="col-inner">
              <a href="settings.html"><img class="wp-image-2738 alignright show-for-small" role="img"
                  src="{{asset('assets/images/settings.svg')}}" alt="" width="25" height="25"></a>
            </div>
          </div>
          <div class="col medium-8 small-8 large-8">
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y hide-for-small" id="image_167575854"
                style="margin:0 auto;">
                <div class="img-inner dark">
                  <img src="{{asset('assets/images/logo.svg')}}" class="attachment-original size-original" alt="" height="32.2"
                    width="380.9">
                </div>
                <style scope="scope">
                  #image_167575854 {
                    width: 65%;
                  }
                </style>
              </div>
              <div class="img has-hover x md-x lg-x y md-y lg-y show-for-small" id="image_167575856"
                style="margin:0 auto;">
                <div class="img-inner dark">
                  <img src="{{asset('assets/images/logo.svg')}}" class="attachment-original size-original" alt="" height="32.2"
                    width="380.9">
                </div>
                <style scope="scope">
                  #image_167575856 {
                    width: 100%;
                  }
                </style>
              </div>
              <p style="color:#40B4C7;">Admin Dashboard</p>
            </div>
          </div>
          <div class="col medium-2 small-2 large-2">
            <div class="col-inner text-right">
              <p style="margin:0;">
                <a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                  <img class="wp-image-2737 alignright" role="img" src="{{asset('assets/images/logout.svg')}}"
                    alt="" width="25" height="25">
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                  @csrf
                </form>
                <a href="settings.html"><img class="wp-image-2738 alignright hide-for-small" role="img"
                    src="{{asset('assets/images/settings.svg')}}" alt="" width="25" height="25"></a>
              </p>
            </div>
          </div>
        </div> --}}
        @include('includes/header')
        <div class="row row-collapse align-center" id="row-579753643">
          <div class="col medium-1 small-3 large-1">
            <div class="col-inner">
              <form class="lgview">
                <button type="button" class="active gridbtn">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15.434" height="11.802" viewBox="0 0 15.434 11.802">
                    <g id="Group_38" data-name="Group 38" transform="translate(-209 -141)">
                      <rect id="Rectangle_14" data-name="Rectangle 14" width="4.539" height="5.447"
                        transform="translate(209 141)" fill="#707070"></rect>
                      <rect id="Rectangle_19" data-name="Rectangle 19" width="4.539" height="5.447"
                        transform="translate(209 147.355)" fill="#707070"></rect>
                      <rect id="Rectangle_15" data-name="Rectangle 15" width="4.539" height="5.447"
                        transform="translate(214.447 141)" fill="#707070"></rect>
                      <rect id="Rectangle_18" data-name="Rectangle 18" width="4.539" height="5.447"
                        transform="translate(214.447 147.355)" fill="#707070"></rect>
                      <rect id="Rectangle_16" data-name="Rectangle 16" width="4.539" height="5.447"
                        transform="translate(219.894 141)" fill="#707070"></rect>
                      <rect id="Rectangle_17" data-name="Rectangle 17" width="4.539" height="5.447"
                        transform="translate(219.894 147.355)" fill="#707070"></rect>
                    </g>
                  </svg>
                </button>
                <button type="button" class="listbtn">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15.539" height="10.447" viewBox="0 0 15.539 10.447">
                    <g id="Group_14" data-name="Group 14" transform="translate(-775 -141)">
                      <g id="Group_39" data-name="Group 39">
                        <rect id="Rectangle_20" data-name="Rectangle 20" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 141)" fill="#707070"></rect>
                        <rect id="Rectangle_21" data-name="Rectangle 21" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 144)" fill="#707070"></rect>
                        <rect id="Rectangle_22" data-name="Rectangle 22" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 147)" fill="#707070"></rect>
                        <rect id="Rectangle_23" data-name="Rectangle 23" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 150)" fill="#707070"></rect>
                      </g>
                    </g>
                  </svg>
                </button>
              </form>
            </div>
          </div>
          <div class="col medium-3 small-8 large-3">
            <div class="col-inner">
              <p>
                <select class="sorting" name="sorting" id="selectSort">
                  <option disabled="" selected="">{{ __('web.arrange_by') }}</option>
                  <option value="name">Alphabetical Order</option>
                  <option value="created_at">Date</option>
                  {{-- <option value="Size">Size</option> --}}
                </select>
              </p>
            </div>
          </div>
          <div class="col medium-1 small-12 hide-for-small large-1">
            <div class="col-inner"></div>
          </div>
          <div class="col medium-3 small-11 large-3">
            <div class="col-inner">
              <form method="GET" action="" id="searchForm" class="serachbar" style="margin:0;">
                <input type="text" placeholder="{{ __('web.search_here') }}" name="search" id="txtSearch" required>
                <input type="submit" value="">
              </form>
            </div>
          </div>
          <div class="col medium-4 small-11 large-4">
            <div class="col-inner text-right">
              <a href="#add_dental_clinic" target="_self" class="hide-for-small button primary lowercase btnaddfolder"
                style="border-radius:5px;">
                <span>{{ __('web.add_dental_clinic_folder') }}</span>
                <i class="icon-plus"></i></a>
              <a href="#add_dental_clinic" target="_self" class="show-for-small button primary lowercase btnaddfolder"
                style="width:100%; border-radius:5px;">
                <span>{{ __('web.add_dental_clinic_folder') }}</span>
                <i class="icon-plus"></i></a>
            </div>
          </div>
        </div>
        <div class="row" id="row-860202790" style="margin-top:50px;">
          @forelse ($clinics as $clinic)
          <div class="col medium-2 small-6 large-2 foldercol">
            <div class="tooltiphd hide-for-small">
              <a class="editLink" href="#edit_dental_clinic" data-id="{{ $clinic->id }}">
                <img src="{{asset('assets/images/edit.svg')}}" width="20" alt="">
              </a>
              <a class="destroyLink" href="#delete_confirmation" data-id="{{ $clinic->id }}" data-name="{{ $clinic->name }}">
                <img src="{{asset('assets/images/delete.svg')}}" width="20" alt="">
              </a>
            </div>
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" style="width: 50%;">
                <a class="" href="{{ route('clinics.show', ['id'=>$clinic->id]) }}" target="_self">
                  <div class="img-inner dark">
                    <img src="{{asset('assets/images/folder.svg')}}" class="attachment-original size-original" alt="" height="51"
                      width="58">
                  </div>
                </a>
              </div>
              <p><a href="{{ route('clinics.show', ['id'=>$clinic->id]) }}">{{ $clinic->name }}</a></p>
            </div>
          </div>    
          @empty
          <h3>No Folder Found</h3>
          @endforelse
          
        </div>
      </div>
      <!-- .section-content -->
    </section>
    <div id="add_dental_clinic" 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>{{ __('web.add_dental_clinic_folder') }}</h4>
                <form method="POST" action="{{ route('clinics.store') }}" id="clinicForm">
                  @csrf
                  <div class="form-field-hd"><label>{{ __('web.dental_clinic_name') }}: </label><input name="clinic_name" type="text">
                  </div>
                  <div class="form-field-hd"><label>{{ __('web.dental_clinic_email') }}: </label><input name="clinic_email"
                      type="email"></div>
                  <div class="form-field-hd"><label>{{ __('web.dental_clinic_phone_number') }} </label><input name="clinic_phone"
                      type="tel"></div>
                  <div class="form-field-hd"><label>{{ __('web.dental_clinic_address') }}: </label><textarea
                      name="clinic_address"></textarea></div>
                  <div class="form-field-hd-btn"><input type="submit" value="{{ __('web.add_dental_clinic_folder') }}"></div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- .section-content -->
      </section>
    </div>
    <div id="edit_dental_clinic" 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 Dental Clinic Folder</h4>
                <form method="POST" action="" id="clinicEditForm">
                  @csrf
                  @method('PUT')
                  <input type="hidden" name="edit_id" id="edit_id" value="">
                  <div class="form-field-hd"><label>{{ __('web.dental_Clinic_name') }}: </label><input id="edit_clinic_name" name="clinic_name" type="text">
                  </div>
                  <div class="form-field-hd"><label>{{ __('web.dental_clinic_email') }}: </label><input id="edit_clinic_email" name="clinic_email"
                      type="email" readonly></div>
                  <div class="form-field-hd"><label>{{ __('web.dental clinic_phone_number') }}: </label><input id="edit_clinic_phone" name="clinic_phone"
                      type="tel"></div>
                  <div class="form-field-hd"><label>{{ __('web.dental_clinic_address') }}: </label><textarea
                    id="edit_clinic_address" name="clinic_address"></textarea></div>
                  <div class="form-field-hd-btn"><input type="submit" value="Update Clinic Folder"></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> clinic?</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 id="change_password" class="lightbox-by-id lightbox-content lightbox-white mfp-hide"
      style="max-width:600px ;padding:20px">
      <section class="section has-block tooltipstered" id="section_501259736">
        <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-1004061135">
    
            <div class="col medium-11 small-12 large-11">
              <div class="col-inner">
    
                <h4>Change Password</h4>
                <form method="POST" action="{{ route('users.update', ['id'=>Auth::user()->id]) }}">
                  @csrf
                  @method('PUT')                  
                  <div class="form-field-hd"><label>Current Password: </label><input name="current_password"
                      type="password"></div>
                  <div class="form-field-hd"><label>New Password: </label><input name="new_password" type="password"></div>
                  <div class="form-field-hd"><label>Retype New Password: </label><input name="new_password_confirmation"
                      type="password"></div>
                  <div class="form-field-hd-btn"><input type="submit" value="Update"></div>
                </form>
    
              </div>
            </div>
    
    
            <style scope="scope">
    
            </style>
          </div>
    
        </div><!-- .section-content -->
    
    
        <style scope="scope">
          #section_501259736 {
            padding-top: 60px;
            padding-bottom: 60px;
          }
    
          #section_501259736 .section-bg.bg-loaded {
            background-image: url(http://labbellomo.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>
  function populateClinics(clinics) {
    var html = '';
    for (var key in clinics) {
      console.log(key, clinics[key]);
      html += `<div class="col medium-2 small-6 large-2 foldercol">
            <div class="tooltiphd hide-for-small">
              <a class="editLink" href="#edit_dental_clinic" data-id="`+clinics[key].id +`">
                <img src="{{asset('assets/images/edit.svg')}}" width="20" alt="">
              </a>
              <a class="destroyLink" href="#delete_confirmation" data-id="`+clinics[key].id +`" data-name="`+clinics[key].name +`">
                <img src="{{asset('assets/images/delete.svg')}}" width="20" alt="">
              </a>
            </div>
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" style="width: 50%;">
                <a class="" href="{{route('clinics.index')}}/`+clinics[key].id+`" target="_self">
                  <div class="img-inner dark">
                    <img src="{{asset('assets/images/folder.svg')}}" class="attachment-original size-original" alt="" height="51"
                      width="58">
                  </div>
                </a>
              </div>
              <p><a href="{{route('clinics.index')}}/`+clinics[key].id+`">`+clinics[key].name +`</a></p>
            </div>
          </div>`;
    }
    $('#row-860202790').html('');
    $(html).hide().prependTo("#row-860202790").fadeIn();
  }
  jQuery('#clinicForm').on('submit', function(e){
    
    e.preventDefault();
    // Send a POST request
    axios({
      method: 'post',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: '{{route("clinics.store")}}',
      data: jQuery('#clinicForm').serialize(),
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      
      var html = `<div class="col medium-2 small-6 large-2 foldercol">
            <div class="tooltiphd hide-for-small">
              <a class="editLink" href="#edit_dental_clinic" data-id="{{ $clinic->id }}">
                <img src="{{asset('assets/images/edit.svg')}}" width="20" alt="">
              </a>              
              <a class="editLink" href="#edit_dental_clinic" data-id="`+response.data.clinic.id+`"><img src="{{asset('assets/images/edit.svg')}}" width="20" alt=""></a>
              <a class="destroyLink" href="#delete_confirmation" data-id="`+response.data.clinic.id+`" data-name="`+response.data.clinic.name+`"><img src="{{asset('assets/images/delete.svg')}}" width="20" alt=""></a>
            </div>
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" style="width: 50%;">
                <a class="" href="{{route('clinics.index')}}/`+response.data.clinic.id+`" target="_self">
                  <div class="img-inner dark">
                    <img src="{{asset('assets/images/folder.svg')}}" class="attachment-original size-original" alt="" height="51"
                      width="58">
                  </div>
                </a>
              </div>
              <p><a href="{{route('clinics.index')}}/`+response.data.clinic.id+`">`+response.data.clinic.name+`</a></p>
            </div>
          </div>`;
      jQuery('.mfp-close').click();
      jQuery(html).hide().prependTo("#row-860202790").fadeIn();
    });
  });
  $(".destroyLink").on('click', function(){
    $("#delete_confirmation form").attr('action', '{{route('clinics.index')}}/'+$(this).data('id'));
    $("#id").val($(this).data('id'));
    $("#delete_confirmation form p strong").html($(this).data('name'));
    // $("#modal-danger").modal('show');
  });
  $('#btnNo').on('click', function(){
    jQuery('.mfp-close').click();
  });
  $('#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().hide('slow');
    });
  });
  $('.editLink').on('click', function(){
    var id = $(this).data('id');
    var url = '{{route("clinics.index")}}/'+id;
    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;
      }
      $('#clinicEditForm').attr('action', url);
      $('#edit_id').val(id);
      $('#edit_clinic_name').val(response.data.clinic.name);
      $('#edit_clinic_email').val(response.data.clinic.email);
      $('#edit_clinic_phone').val(response.data.clinic.phone);
      $('#edit_clinic_address').val(response.data.clinic.address);
    });
  });
  $('#clinicEditForm').on('submit', function(e){
    e.preventDefault();
    axios({
      method: 'put',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: $('#clinicEditForm').attr('action'),
      data: jQuery('#clinicEditForm').serialize(),
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      $('.editLink[data-id="'+id+'"]').parent().parent().find('p a').html(response.data.clinic.name);
      $('.mfp-close').click();        
    });
  });
  $('#searchForm').on('submit', function(e){
    e.preventDefault();
    axios.get('{{route("clinics.index")}}', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      params: {
        search: $('#txtSearch').val()
      },
      responseType: 'json'
    })
    // axios({
    //   method: 'get',
    //   headers: { 'X-Requested-With': 'XMLHttpRequest' },
    //   url: '{{route("clinics.index")}}',
    //   data: $('#searchForm').serialize(),
    //   responseType: 'json'
    // })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      if(response.data.clinics.length == 0)
      {
        alert('No record found');
        return;
      }
      populateClinics(response.data.clinics);
    });
  });
  $('#selectSort').on('change', function(){
    if($(this).val() == '')
      return;
    axios.get('{{route("clinics.index")}}', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      params: {
        sort: $('#selectSort').val()
      },
      responseType: 'json'
    })
    // axios({
    //   method: 'get',
    //   headers: { 'X-Requested-With': 'XMLHttpRequest' },
    //   url: '{{route("clinics.index")}}',
    //   data: $('#searchForm').serialize(),
    //   responseType: 'json'
    // })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }      
      populateClinics(response.data.clinics);
    });
  })
</script>
@endpush