@extends('admin.layouts.master')

@section('title', 'Manage Daily News Category')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header  justify-content-between align-items-center">
                    <h3 class="mb-0 float-left">Daily News Categories</h3>
                    <button class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#categoryModal"
                        onclick="openCreateCategoryModal()">
                        <i class="fa fa-plus"></i> Add Category
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive" style="overflow-x: auto;">
                        <table class="table table-hover" style="min-width: 1000px; width: 100%;">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Name</th>
                                    <th>Status</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($categories as $category)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $category->name }}</td>
                                        <td>
                                            @if ($category->status)
                                                <button class="btn btn-success btn-sm">Active</button>
                                            @else
                                                <button class="btn btn-danger btn-sm">Inactive</button>
                                            @endif
                                        </td>

                                        <td>{{ $category->description }}</td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"
                                                    id="actionMenu{{ $category->id }}" data-toggle="dropdown">
                                                    Actions
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="actionMenu{{ $category->id }}">
                                                    <button class="dropdown-item edit-category-btn"
                                                        data-id="{{ $category->id }}" data-name="{{ $category->name }}"
                                                        data-status="{{ $category->status }}"
                                                        data-description="{{ $category->description }}" data-toggle="modal"
                                                        data-target="#categoryModal">
                                                        <i class="fa fa-edit"></i> Edit
                                                    </button>
                                                    <div class="dropdown-divider"></div>
                                                    @include('admin.partial.delete-form', [
                                                        'route' => route('video.category.destroy', $category->id),
                                                        'btn_class' => 'dropdown-item text-danger',
                                                    ])
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-danger">No Categories Found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ======================================================= --}}
    {{--                DAILY NEWS CATEGORY MODAL               --}}
    {{-- ======================================================= --}}
    <div class="modal fade" id="categoryModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <form id="categoryForm" method="POST">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">Add Category</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Category Name</label>
                                <input type="text" name="name" id="modalName" class="form-control">
                                <span class="text-danger" id="nameError"></span>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Status</label>
                                <select name="status" id="modalStatus" class="form-control">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                                <span class="text-danger" id="statusError"></span>
                            </div>

                            <div class="col-md-12 form-group">
                                <label>Description</label>
                                <textarea name="description" id="modalDescription" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-success" type="submit">Save</button>
                        <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
                    </div>
                </div>

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

@endsection

@section('js')
    <script>
        // Open Create Modal
        function openCreateCategoryModal() {
            $("#modalTitle").text("Add Category");
            $("#categoryForm").attr("action", "{{ route('video.category.store') }}");
            $("#formMethod").val("POST");

            $("#modalName").val('');
            $("#modalStatus").val('1');
            $("#modalDescription").val('');
        }

        // Edit Modal using data attributes
        $(document).on('click', '.edit-category-btn', function() {
            var id = $(this).data('id');
            $("#modalTitle").text("Edit Category");
            $("#categoryForm").attr("action", "/video/category/" + id);
            $("#formMethod").val("PUT");

            $("#modalName").val($(this).data('name'));
            $("#modalStatus").val($(this).data('status'));
            $("#modalDescription").val($(this).data('description'));

            $("#categoryModal").modal('show');
        });
    </script>
@endsection