@extends('template.main-site')

@section('content')
<section class="pos-r o-hidden">
    <div class="container">
      <div class="row">
        @if(Request::segment(3))
        <div class="col-md-6 col-sm-12 mb-4">
          <div class="item">
            <div class="post">
              <div class="">
                <img class="img-fluid h-100 w-100" src="{{ asset('media/' . $template->image) }}" alt="{{ \app\Http\Controllers\TemplateController::checkAltMedia($template->image) }}">
              </div>
            </div>
          </div>
          <div style="width: 100%; margin-top:5%; text-align:center;">
            <a class="btn btn-theme btn-sm" href="{{ $template->link_demo }}" target="_blank">Demo</a>
          </div>
        </div>
        <div class="col-md-6 col-sm-12 mb-4">
          <div class="featured-item style-3">
            <div class="featured-title">
              <h5>{{ $template->name }}</h5>
            </div>
            <div class="featured-desc">
              <p>{{ $template->description }}</p>
            </div>
          </div>
        </div>
        @else
        @if(!empty($templates))
        <div class="col-12 list-category">
          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item mx-auto">
                <a class="nav-link active nav-menu-theme menu-theme-active font-weight-bold select-category" category="all" data-toggle="pill" href="#" role="tab" aria-controls="pills-home" aria-selected="true">ALL</a>
            </li>
            @foreach($template_category as $t)
            <li class="nav-item mx-auto">
              <a class="nav-link nav-menu-theme font-weight-bold select-category text-dark" category="{{ $t->category }}" data-toggle="pill" href="#" role="tab" aria-controls="pills-profile" aria-selected="false">{{ strtoupper($t->category) }}</a>
            </li>
            @endforeach
          </ul>
        </div>
        @foreach($templates as $t)
        <div class="col-md-4 mb-4 list-template" template-id="{{ $t->id }}">
            <div class="item">
              <div class="post style-2">
                <div class="post-image">
                  <img class="img-fluid h-100 w-100" loading="lazy" src="{{ asset('media/' . $t->image) }}" alt="{{ \app\Http\Controllers\TemplateController::checkAltMedia($t->image) }}">
                </div>
                <div class="post-desc"> <a class="post-categories" href="{{ $t->link_demo }}" target="_blank">Demo</a>
                  <div class="post-title">
                    <h4><a href="{{ route('template.site.template-detail', ['slug' => $t->slug]) }}">{{ $t->name }}</a></h4>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-12 text-center mt-3">
                    <button class="btn btn-sm btn-theme btn-order-web" theme="{{ \Crypt::encrypt($t->id) }}">Beli</button>
                </div>
            </div>
        </div>
        @endforeach
        @if($template_count > 9)
        <div class="col-12 text-center">
          <button class="btn btn-theme btn-circle btn-load-more" category="all" type="button" data-text="Load More">
            <span>L</span>
            <span>o</span>
            <span>a</span>
            <span>d</span>
            <span> </span>
            <span>M</span>
            <span>o</span>
            <span>r</span>
            <span>e</span>
          </button>
        </div>
        @endif
        @endif
        @endif
      </div>
    </div>
</section>
 <!-- Modal -->
 <div class="modal fade modal-domain" style="z-index: 10000;" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function() {
  $('body').on('click', '.btn-order-web', function() {
      let theme_id = $(this).attr('theme')
      $('body').find('.modal-body').html(`
      <div class="input-group mb-3">
      <input type="text" class="form-control" name="search_domain" placeholder="Isi Nama Domain Anda">
      <div class="input-group-append">
          <button class="btn btn-theme btn-search-domain" theme="${theme_id}" type="button">Check</button>
      </div>
      </div>
      <span class="domain-response d-none">loading...</span>
      <div class="row row-domain-result">
      <div class="col-12 col-domain-result">
          <div class="row body-domain-result">
          </div>
      </div>
      </div>
      `)
      $('body').find('.modal-domain').modal('show')
  })

  $('body').on('click', '.btn-search-domain', function() {
      let domain = $(this).parent().parent().find('[name="search_domain"]').val()
      let theme_id = $(this).attr('theme')

      if(domain) {
      $.ajax({
          type: 'GET',
          url: "{{ route('check-domain') }}",
          data: {
          _token: "{{ csrf_token() }}",
          domain
          },
          beforeSend() {
          $('body').find('.domain-response').removeClass('d-none')
          $('body').find('.domain-response').removeClass('d-block')
          $('body').find('.domain-response').removeClass('text-danger')
          $('body').find('.domain-response').removeClass('text-success')
          $('body').find('.domain-response').removeClass('text-dark')
          $('body').find('.domain-response').addClass('d-block')
          $('body').find('.domain-response').addClass('text-dark')
          $('body').find('.domain-response').html('loading...')
          },
          success(response) {
          // console.log(response)

          $('body').find('.domain-response').removeClass('d-none')
          $('body').find('.domain-response').removeClass('d-block')
          $('body').find('.domain-response').removeClass('text-danger')
          $('body').find('.domain-response').removeClass('text-success')
          $('body').find('.domain-response').removeClass('text-dark')
          $('body').find('.domain-response').addClass('d-block')
          
          if (response.res == 'success') {
              $('body').find('.domain-response').html('')
              if (response.status == 'available') {
              $('body').find('.body-domain-result').html(`
                  <div class="col-md-6 col-sm-12 mt-3">
                  <div class="card shadow border-0">
                      <div class="card-body text-center">
                      <p class="text-center">${response.domain}</p>
                      <a href="{{ route('template.site.order-pricing') }}?domain=${response.domain}&theme=${theme_id}" class="btn btn-sm btn-theme mx-auto">Pesan Website</a>
                      </div>
                  </div>
                  </div>
              `)
              } else {
              $('body').find('.body-domain-result').html(`
              <div class="col-md-6 col-sm-12 mt-3">
                  <div class="card shadow border-0">
                  <div class="card-body text-center">
                      <p class="text-center">${response.domain}</p>
                      <button class="btn btn-sm btn-danger mx-auto" disabled>Domain Tidak Tersedia</button>
                  </div>
                  </div>
              </div>
              `)
              }
              for (const domain in response.pricing) {
              if (domain != response.extension) {
                  // console.log(domain, response.pricing[domain].register[1])
                  let new_domain  = response.domain.replace(`.${response.extension}`, `.${domain}`)
                  getAvailableDomain(new_domain, domain, theme_id)

              }
              }

          } else {
              $('body').find('.domain-response').addClass('text-danger')
              $('body').find('.domain-response').html(response.message)
          }
          
          }
      })
      } else {
      $('body').find('.domain-response').removeClass('d-none')
      $('body').find('.domain-response').removeClass('d-block')
      $('body').find('.domain-response').removeClass('text-danger')
      $('body').find('.domain-response').removeClass('text-success')
      $('body').find('.domain-response').removeClass('text-dark')
      $('body').find('.domain-response').addClass('d-block')
      $('body').find('.domain-response').addClass('text-danger')
      $('body').find('.domain-response').html('Domain tidak boleh kosong')
      }
  })

  $('body').on('keyup', '[name="search_domain"]', function(e) {
    if(e.keyCode == 13) {
    $('body').find('.btn-search-domain').click()
    }
  })

  $('body').on('click', '.btn-load-more', function() {
    let last_id = $('body').find('.list-template').last().attr('template-id')
    let category = $(this).attr('category')
    $.ajax({
      type: 'GET',
      url: "{{ route('template.site.load-more-template') }}",
      data: {
        _token: "{{ csrf_token() }}",
        last_id,
        category
      },
      beforeSend() {
        $('body').find('.btn-load-more').attr('data-text', 'Loading..')
        $('body').find('.btn-load-more').html(`
          <span>L</span>
          <span>o</span>
          <span>a</span>
          <span>d</span>
          <span>i</span>
          <span>n</span>
          <span>g</span>
          <span>.</span>
          <span>.</span>
        `)
      },
      success(response) {
        if(response) {
          $('body').find('.btn-load-more').attr('data-text', 'Load More')
          $('body').find('.btn-load-more').html(`
            <span>L</span>
            <span>o</span>
            <span>a</span>
            <span>d</span>
            <span> </span>
            <span>M</span>
            <span>o</span>
            <span>r</span>
            <span>e</span>
          `)

          $(response).insertAfter('.list-template[template-id="' + last_id + '"]')

        } else {
          $('body').find('.btn-load-more').remove()
        }
      }
    })
  })

  $('body').on('click', '.select-category', function() {
    let category = $(this).attr('category')
    $('body').find('.select-category').remove('text-dark')
    $('body').find('.select-category').each(function(e) {
      $(this).addClass('text-dark')
    })
    $(this).removeClass('text-dark')
    $.ajax({
      type: 'GET',
      url: "{{ route('template.site.template-by-category') }}",
      data: {
        _token: "{{ csrf_token() }}",
        category
      },
      success(response) {
        $('body').find('.list-template').remove()
        $('body').find('.btn-load-more').parent().remove()
        $(response).insertAfter('.list-category')
      }
    })
  })
})

function getAvailableDomain(domain_name, domain_extension, theme_id) {
  // console.log(domain_name)
  $.ajax({
    type: 'get',
    url: "{{ route('check-available-domain') }}",
    data: {
      _token: "{{ csrf_token() }}",
      domain: domain_name
    },
    beforeSend() {
      $('body').find('.body-domain-result').append(`
        <div class="col-md-6 col-sm-12 mt-3">
          <div class="card shadow border-0">
            <div class="card-body text-center">
              <div class="spinner-border text-primary spinner-${domain_extension}"></div>
            </div>
          </div>
        </div>
      `)
    },
    success(res_domain) {
      if(res_domain == 'success') {
        $('body').find('.spinner-' + domain_extension).replaceWith(`
          <p class="text-center">${domain_name}</p>
          <a href="{{ route('template.site.order-pricing') }}?domain=${domain_name}&theme=${theme_id}" class="btn btn-sm btn-theme mx-auto">Pesan Website</a>
        `)
      } else if(res_domain == 'failed') {
        $('body').find(`.spinner-${domain_extension}`).replaceWith(`
            <p class="text-center">${domain_name}</p>
            <button class="btn btn-sm btn-danger mx-auto" disabled>Domain Tidak Tersedia</button>
        `)
      } else {
        $('body').find(`.spinner-${domain_extension}`).replaceWith(`
              <p class="text-center">${domain_name}</p>
              <button class="btn btn-sm btn-danger mx-auto" disabled>Proses Gagal</button>
        `)
      }
    }
  })
}
</script>
@endsection