@extends('backend.layouts.app')
@section('title', 'Services')

@section('content')
<div class="content container-fluid">
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" onclick="showModal()">Add Service</button>
        </div>

        <div class="card-body table-responsive">
            <table id="datatable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Category Modal -->
<div class="modal fade" id="serviceModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="serviceForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Service Form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="service_id">
                    <div class="form-group mb-3">
                        <label>Title</label>
                        <input name="title" type="text" id="title" class="form-control" required>
                    </div>
                   <div class="mb-3">
                        <label>Description</label>
                        <textarea class="form-control editor" name="description" id="description" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="submitBtn" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        function showModal() {
            $('#serviceForm')[0].reset();
            $('#description').summernote('code', '');
            $('#service_id').val('');
            $('#serviceModal').modal('show');
        }

        $(document).ready(function () {
            function loadDataTable() {
                if ($.fn.DataTable.isDataTable('#datatable')) {
                    $('#datatable').DataTable().destroy();
                }

                $('#datatable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route("services.index") }}',
                    columns: [
                        { data: 'id' },
                        { data: 'title' },
                        { data: 'action' }
                    ]
                });
            }

            loadDataTable();

            // Save (Create/Update) Category
            $('#serviceForm').on('submit', function (e) {
                e.preventDefault();
                let formData = {
                    title: $('#title').val(),
                    description: $('#description').val(),
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                let serviceId = $('#service_id').val();
                let url = serviceId ? `/admin/services/update/${servceiId}` : '/admin/services/store';
                $('#submitBtn').attr('disabled', true).text('Saving...');

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        iziToast.success({ title: 'Success', message: response.success, position: 'topRight' });
                        $('#serviceModal').modal('hide');
                        $('#serviceForm')[0].reset();
                        $('#submitBtn').attr('disabled', false).text('Save');
                        loadDataTable();
                    },
                    error: function (xhr) {
                        let errors = xhr.responseJSON.errors;
                        if (errors) {
                            $.each(errors, function (key, value) {
                                iziToast.error({
                                    title: 'Error',
                                    message: value,
                                    position: 'topRight',
                                    theme: 'light', // dark
                                });
                            });
                        }
                        $('#submitBtn').attr('disabled', false).text('Save');
                    }
                });
            });

            // Edit Category
            $('body').on('click', '.edit', function () {
                let id = $(this).data('id');

                $.get(`/admin/services/edit/${id}`, function (data) {
                    console.log(data);

                    $('#service_id').val(data.id);
                    $('#title').val(data.title);
                    // Set content for Summernote
                    $('#description').summernote('code', data.description);
                    $('#serviceModal').modal('show');
                });
            });

            // Delete Category
            $('body').on('click', '.delete', function () {
                let id = $(this).data('id');
                if (!confirm("Are you sure you want to delete this Service?")) {
                    return;
                }

                $.ajax({
                    url: `/admin/services/delete/${id}`,
                    type: 'DELETE',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') },
                    success: function (response) {
                        iziToast.success({ title: 'Deleted', message: response.success, position: 'topRight' });
                        loadDataTable();
                    },
                    error: function () {
                        iziToast.error({ title: 'Error', message: 'Failed to delete the category' });
                    }
                });
            });
        });
    </script>
@endpush