@extends('layouts.panel')
@section('page_title')
  <div class="col-md-5 align-self-center">
      <h3 class="text-primary">داشبورد</h3> </div>
  <div class="col-md-7 align-self-center">
      <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="javascript:void(0)">خانه</a></li>
          <li class="breadcrumb-item active">بخش کارگاه‌ها</li>
          <li class="breadcrumb-item active">کارگاه‌ها</li>
          <li class="breadcrumb-item active">نمایش</li>
      </ol>
  </div>
@endsection
@section('custom_css')
@endsection
@section('content')
<div class="row">
  <div class="col-md-12 col-lg-12 col-sm-12 col-m-12">
    <div class="card simti_responsive_table_no_padding">
      <div class="card-body p-b-0">
        <form method="POST" action="{{route('panel.workshops.instances.store')}}" enctype="multipart/form-data">
          @csrf
          <div class="form-body">
            <div class="row">
              <div class="col-md-4 col-sm-12" >
                <div class="form-group">
                  <label class="form-label">عنوان</label>
                  <input type="text" disabled name="title" id="title" class="form-control" value="{{$instance->title}}" >
                </div>
              </div>
              <div class="col-md-4 col-sm-12" >
                <div class="form-group">
                  <label class="control-label">نوع</label>
                  <select class="selectpicker form-control" data-style="simti_o" disabled name="type" data-live-search="false">
                    @foreach(__('workshops.instance_type_str') as $key => $value)
                      <option {{ $key == $instance->type? 'selected': '' }} value="{{$key}}">{{$value}}</option>
                    @endforeach
                  </select>
                  @if($errors->has('type'))
                    <small class="form-control-feedback text-danger">{{$errors->first('type')}}</small>
                  @endif
                </div>
              </div>
              <div class="col-md-4 col-sm-12" >
                <div class="form-group">
                  <label class="control-label">وضعیت</label>
                  <select class="selectpicker form-control" data-style="simti_o" disabled name="status" data-live-search="false">
                    @foreach(__('workshops.instance_status_str') as $key => $value)
                      <option {{ $key == $instance->status? 'selected': '' }} value="{{$key}}">{{$value}}</option>
                    @endforeach
                  </select>
                  @if($errors->has('status'))
                    <small class="form-control-feedback text-danger">{{$errors->first('status')}}</small>
                  @endif
                </div>
              </div>
              <div class="col-md-8 col-sm-8" >
                <div class="form-group">
                  <label class="form-label">توضیحات</label>
                  <input type="text" disabled name="description" id="description" class="form-control" value="{{$instance->description}}" >
                  @if($errors->has('description'))
                    <small class="form-control-feedback text-danger">{{$errors->first('description')}}</small>
                  @endif
                </div>
              </div>
              <div class="col-md-4 col-sm-4" >
                <div class="form-group">
                  <label class="form-label">کد کالا در نور</label>
                  <input type="number" disabled class="form-control" value="{{$instance->noor_id}}" >
                </div>
              </div>
              <div class="col-md-4 col-sm-4" >
                <div class="form-group">
                  <label class="form-label">هزینه ثبت‌نام (تومان)</label>
                  <input type="number" disabled class="form-control" value="{{$instance->fee}}" >
                </div>
              </div>
              <div class="col-md-4 col-sm-4" >
                <div class="form-group">
                  <label class="form-label">هزینه ثبت‌نام با تخفیف (تومان)</label>
                  <input type="number" disabled class="form-control" value="{{$instance->offered_fee}}" >
                </div>
              </div>
              <div class="col-md-4 col-sm-4" >
                <div class="form-group">
                  <label class="form-label">ظرفیت</label>
                  <input type="number" disabled class="form-control" value="{{$instance->capacity}}" >
                </div>
              </div>
              <div class="col-md-12 col-lg-12 col-sm-12 col-m-12">
                <div class="table-responsive">
                  <table class="table">
                    <thead>
                      <tr>
                        <th class=" text-center"> ردیف</th>
                        <th class=" text-center"> ساعت شروع </th>
                        <th class=" text-center"> ساعت پایان </th>
                        <th class=" text-center"></th>
                      </tr>
                    </thead>
                    <tbody id="meetings">
                      <tr>
                        <td data-title="ردیف" class="simti_td_center">1</td>
                        <td data-title="ساعت شروع" class="simti_td_center">
                          <div class="col-md-12">
                            <div class="form-group">
                              <input data-required="true" autocomplete="off" type="text" value="" autocomplete="off" id="start_date" class="form-control datepicker">
                            </div>
                          </div>
                        </td>
                        <td data-title="ساعت پایان" class="simti_td_center">
                          <div class="col-md-12">
                            <div class="form-group">
                              <input data-required="true" autocomplete="off" type="text" value="" autocomplete="off" id="finish_date" class="form-control datepicker">
                            </div>
                          </div>
                        </td>
                        <td data-title="" class="td_btn_custom_width">
                          <button type="button" class="btn btn-danger">حذف</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div> 
              </div>
            </div>
          </div>
          <div class="form-actions text-left" style="margin-top:20px">
            <a onClick="if(confirm('آیا مطمئن هستید؟')) window.location='{{route('panel.workshops.instances.remove', ['instance' => $instance])}}'" class="btn btn-danger text-white"> حذف <i class="fa fa-times"></i> </a>
            @if($instance->status === \App\Models\Workshop::RESERVE)
              <a onClick="if(confirm('آیا مطمئن هستید؟')) window.location='{{route('panel.workshops.instances.publish', ['instance' => $instance])}}'" class="btn btn-success text-white"> انتشار <i class="fa fa-play"></i > </a>
            @endif
            <a href="{{route('panel.workshops.instances.edit', ['instance' => $instance])}}" class="btn btn-info text-white"> ویرایش <i class="fa fa-pencil"></i> </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('custom_js')
<script>
  let meetings = [
    @foreach($instance->meetings as $meeting)
      {
        start_date: "{{$meeting->start_date_date_time_str}}",
        finish_date: "{{$meeting->finish_date_date_time_str}}",
      },
    @endforeach
  ];
  function render(){
    $('#meetings').html('');
    meetings.forEach((meeting, index) => {
      $('#meetings').append(`
      <tr style="background: #d3d6d8;">
        <td data-title="ردیف" class="simti_td_center">${index+1}</td>
        <td data-title="ساعت شروع" class="simti_td_center">
          <div class="col-md-12">
            <div class="form-group">
              <input data-required="true" autocomplete="off" type="text" value="${meeting.start_date}" autocomplete="off" disabled name="meetings[${index}][start_date]"id="start_date_${index}" class="form-control datepicker">
            </div>
          </div>
        </td>
        <td data-title="ساعت پایان" class="simti_td_center">
          <div class="col-md-12">
            <div class="form-group">
              <input data-required="true" autocomplete="off" type="text" value="${meeting.finish_date}" autocomplete="off" disabled name="meetings[${index}][finish_date]"id="finish_date_${index}" class="form-control datepicker">
            </div>
          </div>
        </td>
        <td data-title="" class="td_btn_custom_width">
        </td>
      </tr>
      `)
    });
  }
  function addMeeting(){
    meetings.push({
      start_date: '',
      finish_date: '',
    });
    render();
    $(".datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange:"1300:1400"
    });
  }
  function removeMeeting(index){
    meetings = meetings.filter((m,i) => (index === i? null: m));
    render();
    $(".datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange:"1300:1400"
    });
  }
  $(document).ready(function(){
    render();
  });
</script>
@endsection