@extends('admin.layout.main')
@section('content')
<div class="row">
    <div class="col-lg-12" style="padding-left: 4px;padding-right: 4px;">
        <div class="card m-b-30" style="border-radius: 5px;">
            <div class="card-header">
                <h5 class="card-title" style="font-weight: bold; padding-top: 15px; font-size: 20px;">Add Category</h5>
            </div>

            <div class="card-body" style="padding-bottom: 50px;">
                <form action="{{url('admin/addcat')}}" method="post" enctype="multipart/form-data">@csrf

                    @if (Session::has('success_msg'))
                      <div class="alert alert-success alert-dismissible" role="alert" style="margin-top: 2px; width: 100%;">
                        {{ Session::get('success_msg') }}
                        <button style="float: right;" type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                    @endif

                    @if (Session::has('wrong_msg'))
                      <div class="alert alert-danger alert-dismissible" role="alert" style="margin-top: 2px; width: 100%;">
                        {{ Session::get('wrong_msg') }}
                        <button style="float: right;" type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                    @endif

                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                
                    <div class="row">
                        <div class="col-md-6">
                            <input style="margin-bottom: 10px;height: 38px;" class="form-control" type="text" name="cat_name" placeholder="Category Name" required>
                        </div>

                        <div class="col-md-6">
                            <input style="margin-bottom: 10px;height: 38px;" class="file-upload" type="file" name="icon" required>
                            <a href="">[image Size: 512x512 px]</a>
                        </div> 

                        <div class="col-md-6">
                            <button style="height: 38px;background: #ec1666;color: #fff;" type="submit" class="btn">Confirm Now</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div> 

    <div class="col-lg-12" style="padding-left: 4px;padding-right: 4px;">
        <div class="card m-b-30" style="border-radius: 5px;">
            <div class="card-header">
                <h5 class="card-title" style="font-weight: bold; padding-top: 15px; font-size: 20px;">Categories</h5>
            </div>
            <div class="card-body">
            <div class="table-responsive">
                <table id="datatable" class="display table table-striped table-bordered" style="width: 100%;">
                        <thead style="background: #1f3740;">
                            <tr>
                                <th style="text-align: center; color: #fff;padding-top: 3px;padding-bottom: 3px;font-size: 13px;">No.</th>
                                <th style="color: #fff;padding-top: 3px;padding-bottom: 3px;font-size: 13px;">Name</th>
                                <th style="text-align: center; color: #fff;padding-top: 3px;padding-bottom: 3px;font-size: 13px;">Icon</th>
                                <th style="text-align: center; color: #fff;padding-top: 3px;padding-bottom: 3px;font-size: 13px;min-width: 90px;">Item</th>
                                <th style="text-align: center; color: #fff;padding-top: 3px;padding-bottom: 3px;font-size: 13px;">Status</th>
                                <th style="text-align: center; color: #fff;padding-top: 3px;padding-bottom: 3px;font-size: 13px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $no=1; ?>
                            @foreach($categories as $cat)
                            <tr>
                                <td style="padding-top: 3px;padding-bottom: 3px;font-size: 13px;text-align: center; color: #fff;">{{$no++}}</td>
                                <td style="padding-top: 3px;padding-bottom: 3px;font-size: 13px; color: #fff;">{{$cat->cat_name}}</td>
                                
                                <td style="padding-top: 3px;padding-bottom: 3px;font-size: 13px;text-align: center; color: #fff;">
                                    <img style="width: 30px;height:auto" src="{{URL::to($cat->icon)}}">
                                </td>
                                
                                <td style="padding-top: 3px;padding-bottom: 3px;font-size: 13px;text-align: center; color: #fff;">{{$cat->items}}</td>

                                @if($cat->status == 0)
                                <td style="padding-top: 3px;padding-bottom: 3px;font-size: 13px;text-align: center; color: #73fff3;">Public</td>
                                @else
                                <td style="padding-top: 3px;padding-bottom: 3px;font-size: 13px;text-align: center; color: red;">Unpublic</td>
                                @endif

                                <td style="padding-top: 3px;padding-bottom: 3px;font-size: 13px;text-align: center; color: #fff !important;">
                                    <a href="{{url('admin/catedit/'.$cat->id)}}"><button class="btn btn-sm btn-danger" style="height: 20px; font-size:10px;border-radius: 20px;line-height: 12px;background: #2d3235;border: 1px solid #1e0429;">Edit</button></a> 
                                </td>
                            </tr>
                            @endforeach
                        </tbody>                      
                        <tfoot>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- End col -->
   
</div>
@endsection