@extends('admin.admin-template')
@section('title', $title)
@section('css')
@endsection

@section('content')

  <div class="content-wrapper">

    <div class="dashboard-header d-flex flex-column grid-margin">
      <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom pb-3 mb-3">
        <div class="d-flex align-items-center">
          <h4 class="mb-0 font-weight-bold">Admin</h4>
          <div class="d-none ml-3 mt-2 d-md-flex">
            <p class="text-muted mb-0 tx-13 cursor-pointer">Home</p>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <p class="text-muted mb-0 tx-13 cursor-pointer">Image Page</p>
          </div>
        </div>
        <div class="button-wrapper d-flex align-items-center mt-md-3 mt-xl-0">
        </div>
      </div>
    </div>

    <div class="modal fade" id="modal-kategori" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form method="post" id="formAction" enctype="multipart/form-data"> @csrf
            <div id="inputHidden"></div>
            <div class="modal-body">
              <div class="form-group row">
                <label class="col-sm-3 col-form-label">Image</label>
                <div class="col-sm-9">
                  <input type="file" name="image" id="" class="form-control">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
            </form>
        </div>
      </div>
    </div>


    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">

                <div class="card-columns">
                  @foreach ($imagePages as $no => $imagePage)
                    <div class="card">
                    <img class="card-img-top" src="{{app('App\Helpers\Images')->urlImage($imagePage->image, 'Image Null')}}" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title mt-3">Image Page</h4>
                      <p class="card-text">
                        path page route : {{$imagePage->page}} <br><br>
                        <button class="btn btn-outline-info btn-sm btn-icon-text"  data-toggle="modal" data-target="#modal-kategori"  data-name="Edit Image Page" data-ket="edit" data-id="{{$imagePage->page}}" data-ket="Edit">
                          <i class="mdi mdi-pencil btn-icon-prepend"></i>Edit
                        </button>
                      </p>
                    </div>
                    </div>
                  @endforeach
                </div>
               
              </div>
            </div>
        </div>
    </div>
  </div>
@endsection

@section('script')
<script src="{{asset('js/hapus.js')}}"></script>
<script>
$('#modal-kategori').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var name = button.data('name') 
  var ket = button.data('ket')

  var modal = $(this)
  modal.find('.modal-title').text(name)

  if (ket == 'tambah') {
    modal.find('#formAction').attr('action', "{{route('admin.imagePage.store')}}")
    modal.find('#inputHidden').html('')
  }else{
    var id = button.data('id') 

    modal.find('#inputHidden').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
    modal.find('#formAction').attr('action', "{{route('admin.imagePage.update')}}")

  }
})
</script>
@endsection