@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>
        <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">
                  <option disabled="" selected="">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-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 class="serachbar" style="margin:0;"><input type="text" placeholder="Search Here"><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>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>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 href="#"><img src="{{asset('assets/images/edit.svg')}}" width="20" alt=""></a>
              <a href="#"><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="#" 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="#">{{ $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>Add Dental Clinic Folder</h4>
                <form method="POST" action="{{ route('clinics.store') }}" id="clinicForm">
                  @csrf
                  <div class="form-field-hd"><label>Dental Clinic Name: </label><input name="clinic_name" type="text">
                  </div>
                  <div class="form-field-hd"><label>Dental Clinic Email: </label><input name="clinic_email"
                      type="email"></div>
                  <div class="form-field-hd"><label>Dental Clinic Phone Number: </label><input name="clinic_phone"
                      type="tel"></div>
                  <div class="form-field-hd"><label>Dental Clinic Address: </label><textarea
                      name="clinic_address"></textarea></div>
                  <div class="form-field-hd-btn"><input type="submit" value="Add Clinic Folder"></div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- .section-content -->
      </section>
    </div>
  </div>
  <!-- #main -->
</div>    
@endsection

@push('scripts')
<script src="{{asset('assets/js/axios.min.js')}}"></script>
<script>
  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 href="#"><img src="{{asset('assets/images/edit.svg')}}" width="20" alt=""></a>
              <a href="#"><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="#" 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="#">`+response.data.clinic.name+`</a></p>
            </div>
          </div>`;
      jQuery('.mfp-wrap').remove();
      jQuery('.mfp-bg').remove();
      jQuery(html).hide().prependTo("#row-860202790").fadeIn();
    });
  });
</script>
@endpush