@extends('admin.layouts.app')
@section('title',Request()->settings->settings_website.' | Category')
@section('contents')
<div class="content container-fluid">
    <div class="page-header">
        <div class="row align-items-center ">
            <div class="col-md-4">
                <h3 class="page-title">Category</h3>
            </div>
            <div class="col-md-8 float-end ms-auto">
                <div class="d-flex title-head">
                    <div class="daterange-picker d-flex align-items-center justify-content-center">
                        <div class="head-icons mb-0">
                            <a href="{{ route('admin.category') }}" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Refresh"><i class="ti ti-refresh-dot"></i></a>
                            <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Collapse" id="collapse-header"><i class="ti ti-chevrons-up"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="statistic-header">
                        <h4><i class="ti ti-grip-vertical me-1"></i>Manage Category</h4>
                        <div class="dropdown statistic-dropdown">
                            <div class="card-select">
                                <ul>
                                    <li>
                                        <a class="btn btn-primary" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add_category"><i class="ti ti-square-rounded-plus me-1"></i>Add Category</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="category_table" class="table  datanew">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Category</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal custom-modal fade" id="add_category" category="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Category</h5>
                <button  class="btn-close" data-bs-dismiss="modal" aria-label="Close">	
                    <i class="ti ti-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="category_form" action="{{ route('admin.add_category') }}" method="post">
                    @csrf
                    <div class="form-wrap">
                        <label class="col-form-label">Category <span class="text-danger">*</span></label>
                        <input type="text" name="category_name" class="form-control" value="{{ old('category_name') }}" autocomplete="off">
                        @if($errors->has('category_name'))
                        <div>{{ $errors->first('category_name') }}</div>
                        @endif
                    </div>
                    <div class="modal-btn text-end">
                        <a href="#" class="btn btn-light" data-bs-dismiss="modal">Cancel</a>
                        <button type="submit" name="submit" class="btn btn-primary" value="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal custom-modal fade" id="edit_category" category="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Category</h5>
                <button  class="btn-close" data-bs-dismiss="modal" aria-label="Close">	
                    <i class="ti ti-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="edit_category_form" action="{{ route('admin.edit_category') }}" method="post">
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('custom_script')
<script>
var dataTable =	$('#category_table').DataTable({
    processing: true,
    serverSide: true,
    'ajax': {
            type : 'POST',
            url : "{{ route('admin.get_category') }}",
            'data': function(data){

                var token = "{{ csrf_token() }}";
                data._token = token;
            }
    },
    columns: [
        {data: 'DT_RowIndex'},
        {data: 'category_name'},
        {data: 'action',orderable: false, searchable: false}
    ]
});

function edit_category(category_id)
{
	var csrf = "{{ csrf_token() }}";

	$.ajax({
	    url: "{{ route('admin.get_category_details') }}",
	    type: "post",
	    data: "category_id="+category_id+'&_token='+csrf,
	    success: function (data) {

            $('#edit_category').modal('show');
	        $("#edit_category_form").html(data);
	    }
	});
}

function confirm_msg(ev)
{
    ev.preventDefault(); 

    var urlToRedirect = ev.currentTarget.getAttribute('href'); 
    
    Swal.fire({
        title: "Are you sure?",
        text: "You want to change status!",
        type: "warning",
        showCancelButton: !0,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, change it!",
        confirmButtonClass: "btn btn-success",
        cancelButtonClass: "btn btn-danger ml-1",
        buttonsStyling: !1,
        icon: "warning",
    }).then(function (t) {
            
        if(t.value)
        {
            window.location.href = urlToRedirect;
        }
    });
}
</script>
@endsection