@extends('admin.layouts.base')
@section('title', 'Additional Services')

@section('content')
<div class="card">
    <div class="card-header border-0 pt-6">
        <div class="card-title">
            <h3 class="fw-bold">Additional Services Management</h3>
        </div>
        <div class="card-toolbar">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_modal">
                Add Service
            </button>
        </div>
    </div>

    <div class="card-body py-4">
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="services_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-150px">Name</th>
                    <th class="min-w-200px">Description</th>
                    <th class="min-w-100px">Price</th>
                    <th class="text-center min-w-100px">Status</th>
                    <th class="text-center min-w-120px">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </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 Additional Service</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">Service Name</label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. Shrink Wrap">
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6">
                            <label class="form-label required">Price Type</label>
                            <select name="price_type" class="form-select" required>
                                <option value="per_unit">Per Unit</option>
                                <option value="per_hour">Per Hour</option>
                                <option value="fixed_fee">Fixed Fee</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required">Base Price ($)</label>
                            <input type="number" step="0.01" name="base_price" class="form-control" required min="0">
                        </div>
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Unit Label</label>
                        <input type="text" name="unit_label" class="form-control" placeholder="e.g. pallet, hour, order">
                        <div class="form-text">Optional label for display (e.g., $5.00 / pallet)</div>
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="mb-5">
                        <div class="form-check form-switch form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="add_is_active" checked />
                            <label class="form-check-label" for="add_is_active">
                                Active Status
                            </label>
                        </div>
                    </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 Service</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 Additional Service</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">Service Name</label>
                        <input type="text" name="name" id="edit_name" class="form-control" required>
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6">
                            <label class="form-label required">Price Type</label>
                            <select name="price_type" id="edit_price_type" class="form-select" required>
                                <option value="per_unit">Per Unit</option>
                                <option value="per_hour">Per Hour</option>
                                <option value="fixed_fee">Fixed Fee</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required">Base Price ($)</label>
                            <input type="number" step="0.01" name="base_price" id="edit_base_price" class="form-control" required min="0">
                        </div>
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Unit Label</label>
                        <input type="text" name="unit_label" id="edit_unit_label" class="form-control">
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="edit_description" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="mb-5">
                        <div class="form-check form-switch form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="edit_is_active" />
                            <label class="form-check-label" for="edit_is_active">
                                Active Status
                            </label>
                        </div>
                    </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>
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 = $('#services_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.additional-services.data") }}',
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'name' },
            { data: 'description' },
            { data: 'price' },
            { data: 'status', 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 services found',
            zeroRecords: 'No matching records found'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100]
    });

    // Reset form + remove validation errors when modal is hidden
    addModalEl.addEventListener('hidden.bs.modal', function () {
        $('#addForm')[0].reset();
        clearFieldErrors($('#addForm'));
    });

    editModalEl.addEventListener('hidden.bs.modal', function () {
        $('#editForm')[0].reset();
        clearFieldErrors($('#editForm'));
    });

    // Helper: Show feedback on inputs
    const showFieldErrors = (form, errors) => {
        Object.keys(errors).forEach(key => {
            const input = form.find(`[name="${key}"]`);
            input.addClass('is-invalid');

            // Append error message
            let feedback = input.next('.invalid-feedback');
            if (feedback.length === 0) {
                feedback = $('<div class="invalid-feedback"></div>');
                input.after(feedback);
            }
            feedback.text(errors[key][0]);
        });
    };

    const clearFieldErrors = (form) => {
        form.find('.is-invalid').removeClass('is-invalid');
        form.find('.invalid-feedback').remove();
    };

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

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

    // ADD FORM SUBMIT
    $('#addForm').on('submit', function (e) {
        e.preventDefault();
        clearFieldErrors($(this));

        const $form = $(this);
        const $btn = $form.find('button[type="submit"]').prop('disabled', true);

        $.post('{{ route("admin.additional-services.store") }}', $form.serialize())
            .done(res => {
                addModal.hide();
                successAlert(res.message || 'Service created successfully!');
            })
            .fail(xhr => {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    showFieldErrors($form, errors);
                    errorAlert(Object.values(errors).flat().join('<br>'));
                } else {
                    errorAlert('Something went wrong. Please try again.');
                }
            })
            .always(() => $btn.prop('disabled', false));
    });

    // EDIT BUTTON CLICK
    $(document).on('click', '.edit-btn', function () {
        const btn = $(this);
        $('#edit_name').val(btn.data('name'));
        $('#edit_description').val(btn.data('description'));
        $('#edit_price_type').val(btn.data('price-type'));
        $('#edit_base_price').val(btn.data('base-price'));
        $('#edit_unit_label').val(btn.data('unit-label'));
        $('#edit_is_active').prop('checked', btn.data('is-active') == 1);

        // Set form action dynamically
        const updateUrl = '{{ route("admin.additional-services.update", ":id") }}'.replace(':id', btn.data('id'));
        $('#editForm').attr('action', updateUrl);

        editModal.show();
    });

    // EDIT FORM SUBMIT
    $('#editForm').on('submit', function (e) {
        e.preventDefault();
        clearFieldErrors($(this));

        const $form = $(this);
        const $btn = $form.find('button[type="submit"]').prop('disabled', true);

        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize() + '&_method=PUT'
        })
        .done(res => {
            editModal.hide();
            successAlert(res.message || 'Service updated successfully!');
        })
        .fail(xhr => {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors;
                showFieldErrors($form, errors);
                errorAlert(Object.values(errors).flat().join('<br>'));
            } else {
                errorAlert('Update failed: ' + (xhr.responseJSON?.message || 'Please try again.'));
            }
        })
        .always(() => $btn.prop('disabled', false));
    });

    // DELETE FUNCTIONALITY
    $(document).on('click', '.delete-btn', function () {
        const id = $(this).data('id');
        const deleteUrl = '{{ route("admin.additional-services.destroy", ":id") }}'.replace(':id', id);
        const $btn = $(this);

        Swal.fire({
            title: 'Delete Service?',
            text: 'This action cannot be undone!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Delete!',
            cancelButtonText: 'Cancel',
            buttonsStyling: true,
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                const originalText = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status"></span>');

                $.ajax({
                    url: deleteUrl,
                    method: 'POST',
                    data: { 
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    }
                })
                .done(() => {
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Service has been deleted successfully.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        table.ajax.reload(null, false);
                    });
                })
                .fail((xhr) => {
                    $btn.prop('disabled', false).html(originalText);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Cannot delete service. It may be in use.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                });
            }
        });
    });

    // Reset add form when "Add Service" button is clicked
    $('[data-bs-target="#add_modal"]').on('click', function () {
        $('#addForm')[0].reset();
        clearFieldErrors($('#addForm'));
    });
});
</script>
@endpush