@extends('layouts.master')

@section('pagetitle')
Category
@endsection
@section('title')
Category
@endsection

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="card">
            <div class="card-body"> 
            @include('layouts.alert')  
                <a href="{{ url('category/create') }}"
                    class="btn btn-success btn-flat"> 
                    <i class="icon-plus" aria-hidden="true"> Add Category</i>
                </a>
                    <hr>
                <h4 class="card-title"> Category List </h4>
                  <div class="table-responsive">
                    <table class="table table-hover color-table ">
                        <thead>
                            <tr>
                                <th>S.no</th>
                                <!-- <th>Merchant Site Name</th> -->
                                <th>Name</th>
                                <!-- <th>Slug</th> -->
                                <th>Image</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = ($categories->perPage() * ($categories->currentPage() - 1)) + 1  @endphp
                            @forelse($categories as $category)
                            <tr>
                            <td>{{ $i++ }}</td>
                            <!-- <td>{{ @$category->merchantSite->name }}</td> -->
                            <td>{{ $category->name }}</td>
                            <!-- <td>{{ $category->slug }}</td> -->
                            <td> 
                                <img src="{{ env('UPLOAD_URL').'/'.$category->image }}" 
                                data-toggle="modal" data-target="#exampleModal" data-image-url="{{ env('UPLOAD_URL').'/'.$category->image }}" 
                                class="image-preview" style="width: 120px; height: 100px; object-fit: cover;"> 
                            </td>
                            <td>
                                <a href="{{ url('category/'.$category->id.'/edit') }}" data-toggle="tooltip" title="" data-original-title="Edit"
                                    class="btn btn-dropbox"><i class="icon-pencil" aria-hidden="true"></i>
                                </a>

                                <!-- <a href="{{ url('category/'.$category->id.'/delete') }}" data-toggle="tooltip" title="" data-original-title="Delete"
                                    class="btn btn-danger btn-flat btn-sm">
                                    <i class="icon-close" aria-hidden="true"></i>
                                </a>  -->

                                <a href="{{ url('category/'.$category->id.'/delete') }}" data-toggle="tooltip" title="" data-original-title="Delete"
                                    class="btn btn-danger"><i class="icon-close" aria-hidden="true"></i>
                                </a>
                                 
                            </td>
                           
                            </tr>
                            @empty
                                <td>No Category Found!</td>
                            @endforelse
                        </tbody>
                    </table>
                    {{ $categories->links() }}  
                </div>
            </div>
            <!-- image preview modal-->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <img src="" id="modaltitlee" class="img-responsive" width="500" />
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end image preview modal-->
    </div>

@endsection

@push('script')
<script type="text/javascript">
    
  $('.image-preview').click(function() {
        $("#modaltitlee").attr('src', $(this).data('image-url'));
    })

</script>

@endpush