@extends('layouts.app', ['navbar_dashboard' => ' class="active"'])

@include('common.breadcrumbs.breadcrumbs_render', ['args' => []])

@section('content')

    <div class="card">
        <div class="card-header text-white bigger-140">
                <div class="row">
                    <div class="col-8">
                        <span class="far fa-gem light-blue"></span> Add a Customer schedule
                    </div>
                    <div class="col-4 align-right smaller-70">
                        <a href="{{ route('dashboard.customers') }}" class="white">
                            <span class="fas fa-list light-blue"></span> Show overview
                        </a>
                    </div>
                </div>
            </div>
        <div class="card-body">
                {!! form_start($form) !!}
                <div class="box-rounded-white">
                    The title is now generic if you make a choice from the business dropdown list. You can give it your own title,
                    then your input is <u>not</u> overwritten.
                </div>
                {!! form_until($form, 'period') !!}
                <div class="box-rounded-grey">
                    <div class="box-top align-center bigger-120 bg-info">Customer information</div>
                    {!! form_until($form, 'city_id') !!}
                    <div id="barangay_wrapper">
                        <div class="row">
                            <div class="offset-lg-1 col-6">
                                {!! form_until($form, 'barangay_id') !!}
                            </div>
                        </div>
                    </div>
                    <div id="barangay_error" class="box-rounded-danger"></div>
                    <span id="barangay_spinner" class="fas fa-sync fa-spin fa-2x fa-fw offset-lg-1"></span>

                    {!! form_until($form, 'email') !!}
                </div>
                <br/>
                <div class="box-rounded-grey">
                    <div class="box-top align-center bigger-120 bg-info">
                        Promo information <span class="smaller-90 grey">(leave empty if it's a payed ad)</span>
                    </div>
                    {!! form_until($form, 'promo_end') !!}
                </div>
                <br/>
                <div class="bigger-140 grey">- OR -</div>
                <br/>
                <div class="box-rounded-grey">
                    <div class="box-top align-center bigger-120 bg-info">
                        Payed campaign information <span class="smaller-90 grey">(leave empty if it's a promo ad)</span>
                    </div>
                    {!! form_until($form, 'campaign_end') !!}
                    <hr/>
                    {!! form_until($form, 'amount') !!}
                </div>
                <br/>
                <div class="box-rounded-grey">
                    <div class="box-top align-center bigger-120 bg-info">Visits, past and future</div>
                    {!! form_until($form, 'next_visit') !!}
                </div>
                <br/>
                {!! form_end($form) !!}
            </div>
        </div>

@endsection

@include('common.push.autocomplete_city', ['field' => 'city_id'])
@include('common.push.autocomplete_barangay')
@include('common.push.datepicker')
@include('common.push.summernote',['summernote_id' => 'comments', 'summernote_url' => 'upload/sites/image'])
@include('common.push.bootstrap_switch', ['switches' => ['agoda' => 0, 'booking' => 0, 'paid' => 0]])

@push('js')
    <script>
      $(function () {
        $("input#site_id").autocomplete({
          minLength: 2,
          dropdownWidth: 'auto',
          valueKey: 'name',
          getValue: function (item) {
            return item['name'] + ' (' + item.id + ')';
          },
          getTitle: function (item) {
            return item['name'] + ' - ' + item.city.name;
          },
          source: [
            {
              url: "{{ route('dashboard.customer.sites') }}?q=%QUERY%",
              type: 'remote'
            }
          ]
        }).change(function () {
          const regex = /([1-9]\d*)/;
          let m;
          if ((m = regex.exec(this.value)) !== null) {
            let val = m[m.length - 1];
            $.ajax({
              url: "{{ route('dashboard.customer.sites') }}?id=" + val,
              dataType: 'json',
              success: function (v) {
                const name = $('input#name');
                name.val() === '' ? name.val(v.name) : name.val();
                $('#email').val(v.email);
                $('#barangay_id').val(v.barangay_id);
                $('#city_id').val(v.city_id).callBarangays(v.barangay_id);
                $('#website').val(v.url);
                $('#phone_number').val(v.phone_number);
                $('#site_category_id').val(v.category_id);
                $('#agoda').attr('checked', !!v.agoda).attr('value', !!v.agoda ? '1' : '0').change();
                $('#booking').attr('checked', !!v.booking).attr('value', !!v.booking ? '1' : '0').change();
              }
            });
          }
        });
      });
    </script>
@endpush
