@extends('layouts.app')
@section('customcss')
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
@endsection
@section('content')
<div class="breadcrumbs">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<ul>
					<li class="home"> <a title="Go to Home Page" href="index-2.html">Home</a><span>&raquo;</span></li>
					<li><strong>My Dashboard</strong></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- Breadcrumbs End --> 
<!-- Main Container -->
<section class="main-container col2-right-layout">
	<div class="main container">
		<div class="row">
			@include('layouts.navigation')
			<div class="col-main col-sm-9 col-xs-12">
				<a href="{{ url('admin/items/create') }}" class="btn btn-primary">
					New Item
				</a>
				<div class="recent-orders">
                <div class="title-buttons"><strong>Items</strong> <a href="#">View All </a> </div>
                <div class="table-responsive">
                  <table class="table table-bordered cart_summary table-striped">
                    <colgroup>
                    <col>
                    <col>
                    <col>
                    <col width="1">
                    <col width="1">
                    <col width="1">
                    </colgroup>
                    <thead>
                      <tr class="first last">
                        <th># ID</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th><span class="nobr">Rate</span></th>
                        <th>Actions</th>
                        <th>&nbsp;</th>
                      </tr>
                    </thead>
                    <tbody>
	                    @foreach($items as $item)
	                    	<tr class="first odd">
                        <td>#{{ $item->id }}</td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->category->name }}</td>
                        <td><span class="price">{{ number_format($item->rate) }}</span></td>
                        <td><a href="{{ url('admin/items/'.$item->id) }}"><em>View</em></a></td>
                        <td class="a-center last"><span class="nobr"> <a href="{{ url('admin/items/'.$item->id.'/edit') }}">Edit</a> <span class="separator">|</span> <a href="#" data-toggle="modal" onclick="selectId({{ $item->id }})" data-target="#delete-record">Delete</a> </span></td>
                      </tr>
	                    @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
			</div>
		</div>
	</div>
</section>
<div class="modal fade text-start modal-danger" id="delete-record" tabindex="-1" aria-labelledby="myModalLabel19"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel19">Confirm Action</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          Are you sure u want to delete this Item?

          <form method="POST" id="form-delete" action="{{ url('admin/items') }}">
              @csrf
              <input type="hidden" name="_method" value="delete">
          </form>
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>  
          <button type="button" class="btn btn-danger" id="btn_confirm_delete" data-bs-dismiss="modal">Delete</button>
      </div>
  </div>
</div>
</div>
@endsection
@section('customjs')
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
	var selected_item_id;
	$(document).ready(function () {
		$('#example').DataTable();
		$("#btn_confirm_delete").click(function(){
        $("#form-delete").attr('action',"{{ url('admin/items') }}/"+selected_item_id);
        $("#form-delete").submit()
    });
	});
	function selectId(id)
    {
      selected_item_id = id;
    }
</script>
@endsection