@extends('admin.layouts.base')
@section('title', 'Cost Features')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">Cost Features Management</h3>
            </div>
            <div class="card-toolbar">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_modal">
                    Add New Feature
                </button>
            </div>
        </div>

        <div class="card-body py-4">
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="features_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                        <th class="text-center min-w-50px">#</th>
                        <th class="min-w-200px">Title</th>
                        <th class="min-w-300px">Description</th>
                        <th class="text-center min-w-100px">Position</th>
                        <th class="text-center min-w-120px">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="add_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="addForm">
                @csrf
                <div class="modal-header">
                    <h2>Add Feature</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Title</label>
                        <input type="text" name="title" class="form-control" required>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Description</label>
                        <textarea name="description" class="form-control" rows="5" required></textarea>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Position</label>
                        <input type="number" name="position" class="form-control" value="0" min="0" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Feature</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="edit_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="editForm">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h2>Edit Feature</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Title</label>
                        <input type="text" name="title" id="edit_title" class="form-control" required>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Description</label>
                        <textarea name="description" id="edit_description" class="form-control" rows="5" required></textarea>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Position</label>
                        <input type="number" name="position" id="edit_position" class="form-control" min="0" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let table;
const addModalEl = document.getElementById('add_modal');
const editModalEl = document.getElementById('edit_modal');
const addModal = new bootstrap.Modal(addModalEl);
const editModal = new bootstrap.Modal(editModalEl);

$(document).ready(function () {
    table = $('#features_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.features.data") }}',
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'title' },
            { data: 'description' },
            { data: 'position', className: 'text-center' },
            { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
        ],
        language: {
            processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
            emptyTable: 'No features found',
            zeroRecords: 'No matching records found'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100]
    });

    addModalEl.addEventListener('hidden.bs.modal', () => $('#addForm')[0].reset());
    editModalEl.addEventListener('hidden.bs.modal', () => $('#editForm')[0].reset());
});

const successAlert = (message) => {
    Swal.fire({ icon: 'success', title: 'Success!', html: message, timer: 2000, showConfirmButton: false })
        .then(() => table.ajax.reload(null, false));
};

const errorAlert = (message) => Swal.fire({ icon: 'error', title: 'Oops...', html: message });

// Add Form
$('#addForm').on('submit', function (e) {
    e.preventDefault();
    const $btn = $(this).find('button[type="submit"]').prop('disabled', true);

    $.post('{{ route("admin.features.store") }}', $(this).serialize())
        .done(res => {
            addModal.hide();
            successAlert(res.message);
        })
        .fail(xhr => {
            const msg = xhr.status === 422
                ? Object.values(xhr.responseJSON.errors).flat().join('<br>')
                : 'Something went wrong.';
            errorAlert(msg);
        })
        .always(() => $btn.prop('disabled', false));
});

// Edit Button
$(document).on('click', '.edit-btn', function () {
    const btn = $(this);
    $('#edit_title').val(btn.data('title'));
    $('#edit_description').val(btn.data('description'));
    $('#edit_position').val(btn.data('position'));

    const updateUrl = '{{ route("admin.features.update", ":id") }}'.replace(':id', btn.data('id'));
    $('#editForm').attr('action', updateUrl);

    editModal.show();
});

// Edit Form
$('#editForm').on('submit', function (e) {
    e.preventDefault();
    const $btn = $(this).find('button[type="submit"]').prop('disabled', true);

    $.ajax({
        url: $(this).attr('action'),
        method: 'POST',
        data: $(this).serialize() + '&_method=PUT'
    })
    .done(res => {
        editModal.hide();
        successAlert(res.message);
    })
    .fail(xhr => {
        const msg = xhr.status === 422
            ? Object.values(xhr.responseJSON.errors).flat().join('<br>')
            : 'Update failed.';
        errorAlert(msg);
    })
    .always(() => $btn.prop('disabled', false));
});

// Delete
$(document).on('click', '.delete-btn', function () {
    const id = $(this).data('id');
    const url = '{{ route("admin.features.destroy", ":id") }}'.replace(':id', id);

    Swal.fire({
        title: 'Delete this feature?',
        text: 'This action cannot be undone!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!'
    }).then(result => {
        if (result.isConfirmed) {
            $.ajax({
                url: url,
                method: 'POST',
                data: { _token: '{{ csrf_token() }}', _method: 'DELETE' }
            })
            .done(() => {
                Swal.fire('Deleted!', '', 'success').then(() => table.ajax.reload(null, false));
            })
            .fail(() => errorAlert('Cannot delete this feature.'));
        }
    });
});
</script>
@endpush