@extends('layout.master')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0)">Jadwal</a></li>
    <li class="breadcrumb-item active" aria-current="page">Jadwal</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Jadwal Mengajar</h6>
        <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Senin</th>
                  <th>selasa</th>
                  <th>rabu</th>
                  <th>kamis</th>
                  <th>jumat</th>
                  <th>sabtu</th>
                  <th>minggu</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($scheduleHour as $item) 
                <tr>
                  <th>{{$item->name}}</th>
                  @foreach ($item->scheduleDayUser as $scheduleDay)   
                  <td>
                    <div class="form-check form-switch">
                      <input class="schedule form-check-input" role="switch" type="checkbox" @checked($scheduleDay->pivot->boked) data-id="{{$scheduleDay->pivot->id}}">
                    </div>
                  </td>
                  @endforeach
                </tr>
                @endforeach
              </tbody>
            </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
    <script>
        $('.schedule').on('change', function () {
            let schedule = $(this);
            const fromData = new FormData();
            var id = schedule.attr('data-id');
            var url = "{{route('schedule.update', ':id')}}";
            url = url.replace(":id", id)
            fromData.append('boked', schedule.is(":checked"));
            fromData.append('_method', "PUT");
            $.ajax({
              type: "POST",
              url: url,
              data: fromData,
              processData: false,
              contentType: false,
              cache: false,
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
              },
              success: function (response) {
                const Toast = Swal.mixin({
                  toast: true,
                  position: 'top-end',
                  showConfirmButton: false,
                  timer: 3000
                });
                Toast.fire({
                  icon: 'success',
                  title: response.data
                })
              }
            });
        });
    </script>
@endpush