@extends('admin.layouts.base')
@section('title', 'Equipment Types')

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

    <div class="card-body py-4">
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="equipment_types_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">Name</th>
                    <th class="text-center min-w-150px">Default Rate/Hour</th>
                    <th class="text-center min-w-150px">Warehouses Using</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 Equipment Type</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">Name</label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. Forklift">
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Default Rate per Hour ($)</label>
                        <input type="number" step="0.01" name="default_rate_per_hour" class="form-control" required min="0">
                        <div class="form-text">Suggested rate when adding to warehouses</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 Equipment Type</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 Equipment Type</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">Name</label>
                        <input type="text" name="name" id="edit_name" class="form-control" required>
                    </div>
                    <div class="mb-5">
                        <label class="form-label required">Default Rate per Hour ($)</label>
                        <input type="number" step="0.01" name="default_rate_per_hour" id="edit_rate" class="form-control" required min="0">
                    </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 = $('#equipment_types_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.equipment-types.data") }}',
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'name' },
            { data: 'rate', className: 'text-center' },
            { data: 'used_in', 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 equipment types found',
            zeroRecords: 'No matching records found'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100]
    });

    // Reset forms when modals close
    addModalEl.addEventListener('hidden.bs.modal', () => {
        $('#addForm')[0].reset();
        clearFieldErrors($('#addForm'));
    });

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

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

    const showFieldErrors = (form, errors) => {
        Object.keys(errors).forEach(key => {
            const input = form.find(`[name="${key}"]`);
            input.addClass('is-invalid');
            
            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 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
        });
    };

    // Open Add Modal → clean form
    $('[data-bs-target="#add_modal"]').on('click', () => {
        $('#addForm')[0].reset();
        clearFieldErrors($('#addForm'));
    });

    // 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.equipment-types.store") }}', $form.serialize())
            .done(res => {
                addModal.hide();
                successAlert(res.message || 'Equipment type 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_rate').val(btn.data('rate'));

        // Set form action dynamically
        const updateUrl = '{{ route("admin.equipment-types.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 || 'Equipment type 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.equipment-types.destroy", ":id") }}'.replace(':id', id);
        const $btn = $(this);

        Swal.fire({
            title: 'Delete Equipment Type?',
            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: 'Equipment type 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 equipment type. It may be in use.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                });
            }
        });
    });
});
</script>
@endpush