@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Deduction Sequence</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ '/'.$alias.'/home' }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ '/'.$alias.'/payroll/components' }}">Payroll Components</a></li>
                    <li class="breadcrumb-item active">Deduction Sequence</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="alert alert-info" role="alert">
            <div class="alert-body">
                This order applies to every payroll template in this organization that contains these
                deductions - it is not specific to one template. Use the arrows to move a deduction up or
                down, then click Save. A component's numbers only actually update the next time its
                template's sequence is regenerated (adding/deleting a component, the sequence button, or a
                sample download) - saving here does not change anything immediately.
            </div>
        </div>
    </div>
</div>

<div class="row mt-1">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom p-1 d-flex justify-content-between align-items-center gap-2">
                <div>
                    @if($hasManualOrder)
                        <span class="badge bg-success">
                            <i data-feather="check-circle" class="font-small-4"></i> Manual order is set
                        </span>
                    @else
                        <span class="badge bg-secondary">
                            <i data-feather="info" class="font-small-4"></i> No manual order set - showing automatic order
                        </span>
                    @endif
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-danger" id="resetOrderBtn" @if(!$hasManualOrder) disabled @endif>
                        <i data-feather="rotate-ccw"></i> Reset to Automatic Order
                    </button>
                    <button type="button" class="btn btn-primary" id="saveOrderBtn">
                        <i data-feather="save"></i> Save Order
                    </button>
                </div>
            </div>
            <div class="card-body">
                @if($deductions->isEmpty())
                    <p class="text-center mb-0">No active deduction components found.</p>
                @else
                    <table class="table table-striped" id="deductionOrderTable">
                        <thead>
                            <tr>
                                <th style="width: 60px;">#</th>
                                <th>Deduction</th>
                                <th style="width: 120px;">Move</th>
                            </tr>
                        </thead>
                        <tbody id="deductionOrderBody">
                            @foreach($deductions as $deduction)
                                <tr data-type-id="{{ $deduction->id }}">
                                    <td class="row-number">{{ $loop->iteration }}</td>
                                    <td>{{ $deduction->name }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-icon move-up" title="Move up">
                                            <i data-feather="arrow-up"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-icon move-down" title="Move down">
                                            <i data-feather="arrow-down"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('footer-script')
<script>
function renumberRows() {
    $('#deductionOrderBody tr').each(function(index) {
        $(this).find('.row-number').text(index + 1);
    });
    $('#deductionOrderBody tr:first .move-up').prop('disabled', true);
    $('#deductionOrderBody tr:last .move-down').prop('disabled', true);
    $('#deductionOrderBody tr:not(:first) .move-up').prop('disabled', false);
    $('#deductionOrderBody tr:not(:last) .move-down').prop('disabled', false);
}

$(document).ready(function() {
    renumberRows();

    $('#deductionOrderBody').on('click', '.move-up', function() {
        var row = $(this).closest('tr');
        var prev = row.prev();
        if (prev.length) {
            row.insertBefore(prev);
            renumberRows();
        }
    });

    $('#deductionOrderBody').on('click', '.move-down', function() {
        var row = $(this).closest('tr');
        var next = row.next();
        if (next.length) {
            row.insertAfter(next);
            renumberRows();
        }
    });

    $('#saveOrderBtn').on('click', function() {
        var typeIds = $('#deductionOrderBody tr').map(function() {
            return $(this).data('type-id');
        }).get();

        $.ajax({
            url: '/{{ $alias }}/payroll/deduction-sequence',
            type: 'POST',
            data: {
                type_ids: typeIds
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Saved',
                        text: response.message,
                        confirmButtonColor: '#3085d6'
                    }).then(function() {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error saving deduction sequence',
                        confirmButtonColor: '#3085d6'
                    });
                }
            },
            error: function(xhr) {
                var message = (xhr.responseJSON && xhr.responseJSON.message) || 'Error saving deduction sequence';
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: message,
                    confirmButtonColor: '#3085d6'
                });
            }
        });
    });

    $('#resetOrderBtn').on('click', function() {
        Swal.fire({
            icon: 'warning',
            title: 'Reset deduction sequence?',
            text: 'This removes the manually saved order for every deduction in this organization.',
            showCancelButton: true,
            confirmButtonText: 'Reset',
            confirmButtonColor: '#d33'
        }).then(function(result) {
            if (!result.isConfirmed) {
                return;
            }
            $.ajax({
                url: '/{{ $alias }}/payroll/deduction-sequence/reset',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Reset',
                            text: response.message,
                            confirmButtonColor: '#3085d6'
                        }).then(function() {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Error resetting deduction sequence',
                            confirmButtonColor: '#3085d6'
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error resetting deduction sequence',
                        confirmButtonColor: '#3085d6'
                    });
                }
            });
        });
    });
});
</script>
@endpush