@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">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
					New Category
				</button>
				<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<form method="POST" action="{{ url('admin/categories') }}">
								@csrf
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">New Items Category</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<label>Name<span class="required">*</span></label>
	            					<input name="name" type="text" class="form-control" value="{{ old('name') }}">
	            					<label>Category Type</label>
	            					<select class="form-control" name="type" required>
	            						<option></option>
	            						<option value="Product">Product</option>
	            						<option value="Service">Service</option>
	            					</select>
	            					<label>Parent Category</label>
	            					<select class="form-control" name="category_id">
	            						<option></option>
	            						@foreach($main_categories as $category)
	            						<option value="{{ $category->id }}">{{ $category->name }}</option>
	            						@endforeach
	            					</select>
								</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 Category</button>
								</div>
							</form>
							
						</div>
					</div>
				</div>
				<div class="recent-orders">
                <div class="title-buttons"><strong>Recent Orders</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>Categories</th>
                        <th><span class="nobr">Items</span></th>
                        <th>Actions</th>
                        <th>&nbsp;</th>
                      </tr>
                    </thead>
                    <tbody>
	                    @foreach($categories as $category)
	                    	<tr class="first odd">
                        <td>#{{ $category->id }}</td>
                        <td>{{ $category->name }}</td>
                        <td>{{ $category->children->count() }}</td>
                        <td><span class="price">{{ $category->items->count() }}</span></td>
                        <td><a href="{{ url('admin/categories/'.$category->id) }}"><em>View</em></a></td>
                        <td class="a-center last"><span class="nobr"> <a href="{{ url('admin/categories/'.$category->id.'/edit') }}">Edit</a> <span class="separator">|</span> <a href="#" data-toggle="modal" onclick="selectId({{ $category->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 Category?

          <form method="POST" id="form-delete" action="{{ url('admin/categories') }}">
              @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/categories') }}/"+selected_item_id);
        $("#form-delete").submit()
    });
	});
	function selectId(id)
    {
      selected_item_id = id;
    }
</script>
@endsection