@extends('outlets.layout')

@section('content')

@include('outlets.header', ['title'=>'Service 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 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.ID') }}</th> -->
                      <!---th>{{ trans('labels.Image') }}</th-->

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

                      

                      <!--th>{{ trans('labels.Icon') }}</th-->

                     <!--  <th>{{ trans('labels.AddedLastModifiedDate') }}</th> -->

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

                    </tr>

                  </thead>

                  <tbody>

                  @if(count($listingCategories)>0)

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

                        <tr>
                            <!--td><img src="{{asset('').'/'.$categories->categories_image}}" alt="" width=" 100px"></td--->
                            <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="{{ url('outlets/editServiceCategory/'.$categories->categories_id) }}"><i class="fa fa-pencil m-r-5"></i> Edit</a>
								<a class="dropdown-item" href="{{ url('outlets/deleteServiceCategory/'.$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 Category</h4>
      </div>
      <div class="modal-body">

        <form class="modal-form" method="post" action="{{ url('outlets/addServiceNewCategory') }}" enctype="multipart/form-data">
            <div class="form-group">
                <label>Name (English)</label>
                <input type="text" name="categories_name" class="form-control field-validate">
            </div>
             <!---div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
			  <label for="name">{{ trans('labels.Image') }}</label>
				{!! Form::file('newImage', array('id'=>'newImage' , 'class'=>'form-control')) !!}
			</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