@extends('admin.layouts.contentLayoutMaster')

@section('title','Package Edit')
@section('pagelevelcss')
@stop
@section('content')
<div class="section">
    <div class="card">
        <div class="card-content">
            <div class="row">
              <!-- Form Advance -->
              <div class="col s12 m12 l12">
                  <div class="card-content">
                    <form action="{{route('booking.update', ['id' => \App\Helpers\Helper::encrypt($editdata->id)])}}" method="post" id="edit_booking_form" name="edit_booking_form"  enctype="multipart/form-data">
                      {{ csrf_field() }}
                      <label for="name">Select Package<span class="red-text">*</span></label>
                      <div class="row">
                        <div class="input-field col s12">
                            <select id="package_id" name="package_id" value="{{old('package_id')}}">
                              <option value="">---Select Package---</option>
                              @if(count($package) > 0)
                                @foreach($package as $value)
                                  <option value="{{$value->id}}" @if($editdata->package_id == $value->id) selected @endif>{{$value->name}}</option>
                                @endforeach
                              @endif
                            </select>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="name" type="text" name="name" value="{{$editdata->name}}">
                            <label for="name">Name<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="email" type="text" name="email" value="{{$editdata->email}}">
                            <label for="email">Email<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="phone" type="text" name="phone" value="{{$editdata->phone}}">
                            <label for="phone">Phone<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row" style="display:none;">
                        <div class="input-field col s12">
                          <textarea class="materialize-textarea" name="description">{{$editdata->description}}</textarea>
                          <label for="description">Description<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="appointment_date" type="text" name="appointment_date" value="{{Carbon\Carbon::parse($editdata->appointment_date)->format('m-d-Y')}}" class="datetimepicker1 valid">
                            <label for="appointment_date">Appointment Date<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <select class="form-control browser-default" name="appointment_time" id="appointment_time">
                              <option value="">Select time</option>
                            </select>
                            <!-- <input id="appointment_time" type="text" name="appointment_time" value="{{$editdata->appointment_time}}" class="datetimepicker valid">
                            <label for="appointment_date">Appointment Time<span class="red-text">*</span></label> -->
                        </div>
                      </div>
                      <div class="file-field input-field">
                        <div class="btn">
                          <span>Result Document</span>
                          <input type="file" name="result_file" id="result_file">
                        </div>
                        <div class="file-path-wrapper">
                          <input class="file-path validate" type="text">
                        </div>
                        <span class="booking-result-error" style="color: #FF4081;"></span>
                      </div>
                      @if($editdata->result_file_type == 'doc')
                        <a href="{{ asset('uploads/'.$editdata->result_file) }}" download><i class="material-icons">file_download</i></a>
                      @elseif($editdata->result_file_type == 'pdf')
                        <a href="{{ asset('uploads/'.$editdata->result_file) }}" download><i class="material-icons">file_download</i></a>
                      @elseif($editdata->result_file_type == 'image')
                        <img src="{{ asset('uploads/'.$editdata->result_file) }}" title="{{$editdata->name}}" width="400" height="300">
                      @endif
                      <div class="row">
                        <div class="row">
                          <div class="input-field col s12">
                            <button class="btn waves-effect waves-light left" type="submit">Submit
                            </button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
              </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('pageleveljs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
$(function(){
  let id = '{{ \App\Helpers\Helper::encrypt($editdata->id) }}';
  let type = 'booking';
  $.ajax({
      type: "get",
      url: "{{ route('covid.appointment.time') }}",
      dataType: "json",
      data: {id:id,type:type,app_date:$("#appointment_date").val()},
      async: false,
      success: function (response){
        if (response.success == true) {
          $('#appointment_time').html(response.html);
          $("#appointment_time").val('{{ $editdata->appointment_time }}');
        }
      }
    });
  $('.datetimepicker1').datepicker({
      format: 'mm-dd-yyyy',
      autoclose: true,
      todayHighlight: true,
      startDate: "today",
  }).on('changeDate', function(ev){
      $.ajax({
        type: "get",
        url: "{{ route('covid.appointment.time') }}",
        dataType: "json",
        data: {id:id,type:type,app_date:$(this).val()},
        async: false,
        success: function (response){
          if (response.success == true) {
            $('#appointment_time').html(response.html);
          }
        }
      });
  });
  $('.datetimepicker').datetimepicker({
      format: 'hh:mm A',
      stepping: 15
  });
  $.validator.addMethod('filesize', function (value, element, param) {
      return this.optional(element) || (element.files[0].size <= param)
  }, 'Maximum file size to upload is 2MB.');
  $("#edit_booking_form").validate({
      ignore: '',
      rules: {   
          package_id:{
            required:true,
          },
          name:"required",
          email: {
            required: true,
            email: true,
          },
          phone: {
            required: true,
            phoneUS: true
          },
          // description:"required",
          appointment_date: {
            required: true,
          },
          appointment_time: {
            required: true,
          },
          // document: {
          //   required: false,
          //   extension: "jpg,jpeg,png,pdf,doc,docm,docx",
          //   filesize: 2097152,
          // },
          result_file: {
            required: false,
            extension: "jpg,jpeg,png,pdf,doc,docm,docx",
            filesize: 2097152,
          },
      },
      messages:{
          package_id : {
            required: "Please select package.",
          },
          name: {
              required: "Please enter name.",
          },
          email: {
              required: "Please enter email.",
              email: "Please enter a valid email.",
          },
          phone: {
              required: "Please enter phone.",
              phoneUS: "Please enter a valid phone.",
          },
          // description: {
          //     required: "Please enter description.",
          // },
          appointment_date: {
              required: "Please enter appointment date.",
          },
          appointment_time: {
              required: "Please enter appointment time.",
          },
          // document: {
          //     required: "Please upload document.",
          //     extension: "Only document type jpg/png/jpeg/pdf/doc/docm/docx is allowed.",
          //     filesize: "Maximum file size to upload is 2MB.",
          // },
          result_file: {
              required: "Please upload document.",
              extension: "Only document type jpg/png/jpeg/pdf/doc/docm/docx is allowed.",
              filesize: "Maximum file size to upload is 2MB.",
          },
      },
      errorPlacement: function(error, element) {
        // if (element.attr("name") == "document" ) {
        //     $(".booking-document-error").text(error[0].innerText);
        // }else 
        if(element.attr("name") == "result_file"){
          $(".booking-result-error").text(error[0].innerText);
        } else {
            error.insertAfter(element);
        }
      },
      errorElement: 'span',
  });
});
</script>
@stop