@extends('outlets.layout')

@section('content')

@include('outlets.header', ['title'=>'Package Categories'])  

		
		 <section class="orderPage">
          <div class="row no-gutters">

            <div class="col-md-12 col-sm-12">

              <div class=" marTableNew">

                <div class="">


						<div class="container">
						  <div class="row">
							  <div class="col-12 text-right">
								<div class="tableButtns">
								  <a class="btn-blue"  href="javascript:void();"  data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i> Add Package Category</a>
								</div>
							  </div>
						  </div>
						</div>

					  <div class="tableCountiner">
						<div class="tpRightTable">
						<div class="table-responsive-md">
						<table id="example1" class="table">

						  <thead>

							<tr>

							  <th>{{ trans('labels.Name') }}</th>

							  <th>{{ trans('labels.Action') }}</th>

							</tr>

						  </thead>

						  <tbody>

						  @if(count($listingCategories)>0)

							@foreach ($listingCategories as $key=>$categories)

								<tr>
									<td>{{ $categories->category_name }}</td>
									<td>
									<div class="dropdown dropdown-action">
										<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="la la-ellipsis-v"></i></a>
										<div class="dropdown-menu dropdown-menu-right">
											<a class="dropdown-item" href="editPackageCategory/{{ $categories->categories_id }}"><i class="fa fa-pencil m-r-5"></i> Edit</a>
											<a class="dropdown-item" href="deletePackageCategory/{{ $categories->categories_id }}" onclick="return confirm('Are you sure?')"><i class="fa fa-trash-o m-r-5"></i> Delete</a>
										</div>
									</div>
								  </td>
								</tr>
							@endforeach
							@else
							   <tr>
									<td colspan="6">{{ trans('labels.NoRecordFound') }}</td>
							   </tr>
							@endif
						  </tbody>
						</table>
						</div>
					  </div>
					  </div>

                </div>
                  <!-- oRproDetail -->
                  </div>
            </div>
            <!-- col -->





          </div>
        <!-- row -->
        </section>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content custom-popup">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add New Package Category</h4>
      </div>
      <div class="modal-body">

        <form class="modal-form" method="post" action="{{ url('outlets/addPackageNewCategory') }}" enctype="multipart/form-data">
            <div class="form-group">
                <label>Name (English)</label>
                <input type="text" name="categories_name" class="form-control field-validate">
            </div>
            <center>  <button type="submit" class="ecom-btn">Add</button></center>
        </form>

      </div>
    </div>

  </div>
</div>
<style type="text/css">
.table tr td {
    padding: 12px 20px!important;
}

.table tr {
    border-bottom: 1px solid #dee2e6;
}

.btn-blue {
    background: #33077c;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    color: #fff;
}
.tpRightTable thead th {
    background-color: #33077c;
}

.btn-blue:hover {
    color: #fff;
}

.btn-red {
    background: #da4439;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    color: #fff;
}

.btn-red:hover {
    color: #fff;
}

.btn-blue i {
    color: #fff;
}

.btn-red i {
    color: #fff;
}

.tableButtns a {
    display: inline-block;
    font-size: 16px;
    background-color: #33077c;
    color: #fff;
    padding: 10px 30px;
    border-radius: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.tableButtns i {
    margin-right: 2px;
    font-size: 15px;
    vertical-align: middle;
}

</style>


@endsection