@extends('admin.layouts.master')
@section('headerFiles')
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/custom_dt_zero_config.css') }}">

@endsection

@section('content')

<div class="container">
    <div class="page-header">
        <div class="page-title">
            <h3>Categories List</h3>
        </div>
        <a href="{{ route('admin.category.add')}}" class="mt-4 btn btn-button-7" style="float: right;">+ Add New</a>
    </div>

    <div class="row layout-spacing ">

        <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
        @if ( session('message'))
            <div class="alert alert-success alert-dismissable custom-success-box" style="margin: 15px;">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong> {{ session('message') }} </strong>
            </div>
        @endif
            <div class="statbox widget box box-shadow">
                <div class="widget-content widget-content-area">
                    <div class="table-responsive mb-4">
                        <table id="zero-config" class="table table-striped table-hover table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Sort Order</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($categories as $category)
                                    <tr>
                                        <td>                                            
                                            @if ($category->banner_image != null)
                                                <img id="image-preview" style="width:100px; height:90px;" class="img-responsive mb-2"  data-image="{{public_url()}}{{ $category->banner_image }}" src="{{public_url()}}{{ $category->banner_image }}">
                                            @endif
                                        </td>
                                        <td>{{ $category->name_en }}</td>
                                        <td>{{ $category->sort_order }}</td>
                                        <td>{{ $category->status == 1 ? "Active" : "In Active" }}</td>
                                        <td>{{ date('d-m-Y ',strtotime($category->created_at)) }}</td>
                                        <td>
                                            <ul class="table-controls">
                                                <li><a href="{{ route('admin.category.edit', $category->id)}}"><i class="flaticon-edit-fill-2"></i></a></li>
                                                <li><a href="javascript:;" onclick="showDeleteModal('{{ $category->id }}')"><i class="flaticon-delete"></i></a></li>
                                            </ul>
                                        </td>
                                    </tr>                                    
                                @endforeach                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="post" class="form-validate form-delete" method="post">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            <div class="modal-body">
                Are you sure you want to delete this record?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger deleteRecord">Delete</button>
            </div>
            <input type="hidden" name="id" id="id" value="">
        </form>
      </div>
    </div>
  </div>

@endsection

@section('footerJs')
    <script src="{{ admin_asset('admin-assets/plugins/table/datatable/datatables.js') }}"></script>
    <script>
        // $('#zero-config').DataTable({
        //     "language": {
        //         "paginate": { "previous": "<i class='flaticon-arrow-left-1'></i>", "next": "<i class='flaticon-arrow-right'></i>" },
        //         "info": "Showing page _PAGE_ of _PAGES_"
        //     }
        // });

        function showDeleteModal(id){
            $("#id").val(id);
            $("#deleteModal").modal("show");
        }

        $(".deleteRecord").click(function(){
            $.ajax({
                type:'POST',
                url: "{{ route("admin.category.delete") }}",
                data: $('.form-delete').serialize(),
                success: function(response){
                    if(response.success){
                        toastr["success"](response.message);
                        setTimeout(function(){ 
                            window.location.href = "{{ route("admin.category")}}";
                        }, 1000);                        
                    } else {
                        toastr["error"](response.message);
                    }
                },
                error: function(){
                    toastr["error"]("Something went wrong");
                }
            });
        });
    </script>

@endsection