@php
$configData = Helper::applClasses();
@endphp
@extends('layouts/fullLayoutMaster')

@section('title', __('locale.Schedule date'))

@section('vendor-style')
  {{-- Vendor Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
@endsection

@section('page-style')
  <link rel="stylesheet" href="{{ asset(mix('css/base/pages/page-misc.css')) }}">
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/pickers/form-flat-pickr.css')) }}">
@endsection

@section('content')
<!-- Coming soon page-->
<ul class="nav navbar-nav align-items-center ms-auto">
    <li class="nav-item dropdown dropdown-language">
        <a class="nav-link dropdown-toggle" id="dropdown-flag" href="#" data-bs-toggle="dropdown" aria-haspopup="true">
            <i class="flag-icon flag-icon-us"></i>
            <span class="selected-language">English</span>
        </a>
        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-flag">
            <a class="dropdown-item" href="{{ url('lang/en') }}" data-language="en">
            <i class="flag-icon flag-icon-us"></i> English
            </a>
            <a class="dropdown-item" href="{{ url('lang/es') }}" data-language="es">
            <i class="flag-icon flag-icon-es"></i> Español
            </a>
        </div>
    </li>
</ul>
<div class="misc-wrapper mt-2">
    <div class="row text-center">
        <div class="col-3"> 
            <a href="{{ route('availables-dates', ['drurl' => $drurl]) }}?from_date={{ \Carbon\Carbon::createFromTimestampUTC($first_date)->addDays(-1)->timestamp }}" type="button" class="btn btn-icon rounded-circle btn-outline-primary waves-effect btn-week-back">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            </a> 
        </div> 
        <div class="col-6"> <h3 class="fw-bolder">{{ __('locale.Available Dates') }}</h3> </div>
        <div class="col-3"> 
            <a href="{{ route('availables-dates', ['drurl' => $drurl]) }}?from_date={{ \Carbon\Carbon::createFromTimestampUTC($first_date)->addDays(1)->timestamp }}" type="button" class="btn btn-icon rounded-circle btn-outline-primary waves-effect">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </a> 
        </div> 
        
        <div class="row dates">
            @foreach ($dates as $key => $date)
                <div class="col-md col-4">
                    <table class="mt-2">
                        <tr>
                            <td>
                                @php
                                    $dateFormated = \Carbon\Carbon::createFromTimestampUTC($key)->format('l d')   
                                @endphp
                                <h5 class="fw-normal text-primary">{{ __('locale.'.explode(" ", $dateFormated)[0]) . " " . explode(" ", $dateFormated)[1] }}</h5>
                            </td>
                        </tr>
                        @foreach ($date as $d)
                            <tr>
                                <td>
                                    <button 
                                        type="button" 
                                        class="btn btn-outline-secondary round waves-effect appointmentdate"
                                        data-bs-toggle="modal" 
                                        data-bs-target="#addNewAddressModal"
                                        timestamp="{{$d}}"
                                        formatdate="{{\Carbon\Carbon::createFromTimestampUTC($d)->format('Y-m-d H:i:s')}}"
                                        year="{{\Carbon\Carbon::createFromTimestampUTC($d)->format('Y')}}"
                                        month="{{ __('locale.'.\Carbon\Carbon::createFromTimestampUTC($d)->format('F')) }}"
                                        day="{{ __('locale.'.\Carbon\Carbon::createFromTimestampUTC($d)->format('l')) }}"
                                        daynumber="{{\Carbon\Carbon::createFromTimestampUTC($d)->format('d')}}"
                                        hour="{{\Carbon\Carbon::createFromTimestampUTC($d)->format('h a')}}">
                                            {{ \Carbon\Carbon::createFromTimestampUTC($d)->format('h:i a') }}
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>
            @endforeach
        </div>
    </div>
</div>
<!-- / Coming soon page-->

<div class="modal fade show" id="addNewAddressModal" tabindex="-1" aria-labelledby="addNewAddressTitle" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg">
       <div class="modal-content">
          <div class="modal-header bg-transparent">
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body pb-5 px-sm-4 mx-50">
             <h1 class="address-title text-center mb-1" id="addNewAddressTitle">{{ __('locale.New appointment') }}</h1>
             <p class="address-subtitle text-center mb-2 pb-75">{{ __('locale.Create new appointment') }}</p>
             <form id="appointment-form" method="post" novalidate>
                 @csrf
                 <input type="hidden" name="timestamp" id="timestamp" value="" />
                <div class="col-12">
                   <div class="row custom-options-checkable">
                      <div class="col-md-12 mb-md-0 mb-2">
                         <input class="custom-option-item-check" id="homeAddressRadio" type="radio" name="appointment" value="HomeAddress" checked="">
                         <label for="homeAddressRadio" class="custom-option-item px-2 py-1">
                            <span class="d-flex align-items-center mb-50">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                </svg>
                               <span class="custom-option-item-title h4 fw-bolder mb-0 ml-1"> {{ __('locale.Appointment') }}</span>
                            </span>
                            <span class="d-block showdate"></span>
                         </label>
                      </div>
                   </div>
                </div>
                <div class="col-12 col-md-12">
                   <label class="form-label" for="name">{{ __('locale.Name') }}</label>
                   <input type="text" id="name" name="name" class="form-control" placeholder="{{ __('locale.Name') }}" required />
                   <div class="invalid-feedback">{{ __('locale.This field can not be empty') }}.</div>
                </div>
                <div class="col-12 col-md-12">
                    <label class="form-label" for="phone">{{ __('locale.Phone') }}</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text">CR (+506)</span>
                        <input type="text" class="form-control phone-number-mask" placeholder="8888 8888" id="phone" name="phone" required />
                        <div class="invalid-feedback">{{ __('locale.This field can not be empty') }}.</div>
                    </div>
                </div>
                <div class="mb-1">
                    <label class="form-label" for="email">{{ __('locale.Email') }}</label>
                    <input type="email" id="email" name="email" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe@email.com" required />
                    <div class="invalid-feedback">{{ __('locale.Please enter a valid email') }}.</div>
                </div>
                <div class="col-12 text-center">
                   <button type="submit" class="btn btn-primary me-1 mt-2 waves-effect waves-float waves-light">{{ __('locale.Accept') }}</button>
                   <button type="reset" class="btn btn-outline-secondary mt-2 waves-effect" data-bs-dismiss="modal" aria-label="Close">
                    {{ __('locale.Cancel') }}
                   </button>
                </div>
             </form>
          </div>
       </div>
    </div>
 </div>
@endsection

@section('vendor-script')
  <!-- vendor files -->
  <script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js'))}}"></script>
  <script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js'))}}"></script>
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
@endsection
@section('page-script')
    <!-- Page js files -->
    <script src="{{ asset(mix('js/scripts/extensions/ext-component-blockui.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-input-mask.js')) }}"></script>

    <script>
        var messagefield = "{{ __('locale.This field can not be empty') }}";
        var messageemail = "{{ __('locale.Please enter a valid email') }}";
    </script>
    <script src="{{ asset(mix('js/scripts/forms/form-validation.js')) }}"></script>
@endsection

@section('script')
    <script>
        var currentLocale = "{{ Session::get('locale') ?? 'es' }}";

        $('.appointmentdate').on('click', function(){
            var showdate = '';
            if (currentLocale == 'es'){
                showdate = $(this).attr("day") + ' ' + $(this).attr("daynumber") + ' de ' + $(this).attr("month") + ' del ' + $(this).attr("year") + ' a las ' + $(this).attr("hour");
            }else{
                showdate = $(this).attr("day") + ', ' + $(this).attr("month") + ' ' + $(this).attr("daynumber") + ' ' + $(this).attr("year") + ' at ' + $(this).attr("hour");
            }

            $('.showdate').html(showdate);
            $('#timestamp').val($(this).attr("timestamp"));
        });

        @if (false)
        $('.btn-week-back').on('click', function () {
            $('.dates').block({
                message: '<div class="spinner-border text-primary" role="status"></div>',
                css: { backgroundColor: 'transparent', border: '0' },
                overlayCSS: { backgroundColor: '#fff', opacity: 0.8 }
            });

            $.ajax({
                type: "GET",
                url: "{{ route('availables-dates', ['drurl'=> $drurl]) }}?from_date=1646380800&back=true",
                success: (function(data) {
                    var htmlDates = "";
                    var weekday = ["{{__('locale.Sunday')}}","{{__('locale.Monday')}}","{{__('locale.Tuesday')}}","{{__('locale.Wednesday')}}","{{__('locale.Thursday')}}","{{__('locale.Friday')}}","{{__('locale.Saturday')}}"];
                    $.each(data, function( key, dates ) {
                        var dt = eval(key*1000);
                        var title_date = new Date(dt);
                        htmlDates += `
                        <div class="col-md col-4">
                            <table class="mt-2">
                                <tr>
                                    <td>
                                        <h5 class="fw-normal text-primary">${weekday[title_date.getDay()] + " " +title_date.toLocaleDateString(currentLocale, {day: 'numeric'})}</h5>
                                    </td>
                                </tr>
                        `;

                        $.each(dates, function( kdate, date ) {
                            var ddt = eval(date*1000);
                            var data_date = new Date(ddt);

                            htmlDates += `
                            <tr>
                                <td>
                                    <button 
                                        type="button" 
                                        class="btn btn-outline-secondary round waves-effect appointmentdate"
                                        data-bs-toggle="modal" 
                                        data-bs-target="#addNewAddressModal"
                                        timestamp="${date}"
                                        formatdate="${data_date.toLocaleDateString(currentLocale, { year: 'numeric' }) + "-" + data_date.toLocaleDateString(currentLocale, { month: 'numeric' }) + "-" + data_date.toLocaleDateString(currentLocale, { day: 'numeric' }) + " " + data_date.toLocaleTimeString(currentLocale, { hour: '2-digit' }) + ":" + data_date.toLocaleTimeString(currentLocale, { minute: '2-digit' }) + ":" + data_date.toLocaleTimeString(currentLocale, { second: '2-digit' }) }"
                                        year="${data_date.toLocaleDateString(currentLocale, { year: 'numeric' })}"
                                        month="${data_date.toLocaleDateString(currentLocale, { month: 'numeric' })}"
                                        day="${data_date.toLocaleDateString(currentLocale, { day: 'numeric' })}"
                                        daynumber="${data_date.toLocaleDateString(currentLocale, { day: 'numeric' })}"
                                        hour="${data_date.toLocaleTimeString(currentLocale, { hour: '2-digit' })}">
                                            ${data_date.toLocaleTimeString(currentLocale, { hour12: true }).replace(":00:00", ":00")}
                                    </button>
                                </td>
                            </tr>
                            `
                        });

                        htmlDates += `
                            </table>
                        </div>
                        `;
                    });

                    $('.dates').unblock();
                    $('.dates').html(htmlDates);
                }),
                error: (function(error) {
                    console.log(error);
                })
            });
        });
        @endif
    </script>
@endsection