@extends('layouts.admin')

@section('title', 'Categories Management')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card shadow-none">
            <div class="card-header bg-white">
                <h3 class="card-title font-weight-bold">Categories List</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-create">
                        <i class="fas fa-plus"></i> Add Category
                    </button>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show py-2" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
                <table id="dataTable" class="table table-bordered table-striped table-sm">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th>Created By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($categories as $category)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $category->name }}</td>
                            <td>{{ Str::limit($category->description, 50) }}</td>
                            <td>
                                <span class="badge badge-{{ $category->status === 'ENABLE' ? 'success' : 'danger' }}">
                                    {{ $category->status }}
                                </span>
                            </td>
                            <td>{{ $category->user->fullname ?? 'Unknown' }}</td>
                            <td>
                                <button type="button" class="btn btn-info btn-xs btn-edit" 
                                    data-id="{{ $category->id }}"
                                    data-name="{{ $category->name }}"
                                    data-user="{{ $category->id_user }}"
                                    data-desc="{{ $category->description }}"
                                    data-status="{{ $category->status }}"
                                    data-toggle="modal" data-target="#modal-edit">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <form action="{{ route('admin.categories.destroy', $category->id) }}" method="POST" style="display: inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure?')">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="modal-create">
    <div class="modal-dialog">
        <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header py-2 bg-white">
                    <h4 class="modal-title" style="font-size: 1.1rem;">Add Category</h4>
                    <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">
                        <label>Created By</label>
                        <select name="id_user" class="form-control select2" required style="width: 100%;">
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->fullname }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Enter category name" required>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="description" class="form-control" rows="3" placeholder="Enter category description"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Image</label>
                        <input type="file" name="image" class="form-control-file">
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control select2" style="width: 100%;">
                            <option value="ENABLE">ENABLE</option>
                            <option value="DISABLED">DISABLED</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer justify-content-between py-2">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Category</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog">
        <form id="edit-form" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header py-2 bg-white">
                    <h4 class="modal-title" style="font-size: 1.1rem;">Edit Category</h4>
                    <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">
                        <label>Created By</label>
                        <select name="id_user" id="edit-user" class="form-control select2" required style="width: 100%;">
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->fullname }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" id="edit-name" class="form-control" placeholder="Enter category name" required>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="description" id="edit-desc" class="form-control" rows="3" placeholder="Enter category description"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Image (Optional)</label>
                        <input type="file" name="image" class="form-control-file">
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" id="edit-status" class="form-control select2" style="width: 100%;">
                            <option value="ENABLE">ENABLE</option>
                            <option value="DISABLED">DISABLED</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer justify-content-between py-2">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info">Update Category</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        // Initialize Select2
        $('.select2').select2({
            theme: 'bootstrap4'
        });

        if (!$.fn.DataTable.isDataTable('#dataTable')) {
            $('#dataTable').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        }

        $(document).on('click', '.btn-edit', function() {
            const id = $(this).data('id');
            const name = $(this).data('name');
            const user = $(this).data('user');
            const desc = $(this).data('desc');
            const status = $(this).data('status');

            $('#edit-form').attr('action', `/admin/categories/${id}`);
            $('#edit-name').val(name);
            $('#edit-user').val(user).trigger('change');
            $('#edit-desc').val(desc);
            $('#edit-status').val(status).trigger('change');
        });
    });
</script>
@endpush