@extends('backend.layout.master')

@section('title')
    Category
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mt-1">
                @session('status')
                    <div class="alert alert-{{ session('bg') }} alert-dismissible fade show" role="alert">
                        {{ session('status') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endsession
            </div>
            <div class="col-md-7 mt-3">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">Categories</h2>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped table-hover table-bordered table-dark text-center">
                            <thead>
                                <tr>
                                    <th style="width: 50px">Id</th>
                                    <th>Category Name</th>
                                    <th>Count Items</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($categories as $category)
                                    <tr>
                                        <td> {{ $category->id }} </td>
                                        <td> {{ $category->name }} </td>
                                        <td> {{ $category->id }} </td>
                                        <td>
                                            <button class="btn btn-sm btn-success editBtn" data-toggle="modal"
                                                data-target="#updateModal" data-id="{{ $category->id }}"
                                                data-name="{{ $category->name }}"><i class="fas fa-edit"></i></button>
                                            <button class="btn btn-sm btn-danger delBtn" data-toggle="modal"
                                                data-target="#deleteModal" data-id="{{ $category->id }}"><i
                                                    class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @empty
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-5 mt-3">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">Add Category</h2>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('category.store') }}" method="POST" class="m-0">
                            @csrf
                            <div class="form-group">
                                <label for="name">Category Name</label>
                                <input type="text" placeholder="Category Name" id="name" name="name"
                                    class="form-control @error('name') is-invalid @enderror">
                                @error('name')
                                    <span class="text-danger mt-1"> {{ $message }} </span>
                                @enderror
                            </div>
                            <div class="form-group mt-2 mb-0">
                                <input type="submit" value="Add" class="btn btn-primary">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>



    {{-- UPDATE MODAL --}}
    <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST" id="updateForm">
                    @method('PUT')
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="updateModalLabel">Update Category</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="hidden" id="hidden_id">
                            <label for="name">Category Name</label>
                            <input type="text" id="edit_name" name="name" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- DELETE MODAL --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete Category</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 Confirm Delete this Record Permanently?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <form id="delForm" method="POST">
                        @method('DELETE')
                        @csrf
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $(".editBtn").click(function() {
                var id = $(this).data("id");
                var name = $(this).data("name");
                var url = "{{ route('category.update', ':id') }}";
                url = url.replace(":id", id);

                $("#hidden_id").val(id);
                $("#edit_name").val(name);
                $("#updateForm").attr("action", url);
            });

            $(".delBtn").click(function() {
                var id = $(this).data("id");
                var url = "{{ route('category.destroy', ':id') }}";
                url = url.replace(":id", id);

                $("#delForm").attr("action", url);
            })
        });
    </script>
@endpush