@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Penalty & Bonus Rules"
                    description="Manage all configured rules and their levels from one place.">

                    <a href="{{ route('rules.create') }}" class="asset-btn asset-btn--primary">
                        + Add New Rule
                    </a>

                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        {{-- Top controls --}}
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 font-semibold text-gray-800 mb-0 whitespace-nowrap" style="margin-right:auto; ">
                                Filters</h6>
                            <x-table-controls :action="route('rules.index')" searchName="search" searchPlaceholder="search ..."
                                :export="true" :exportRoute="route('rules.export')" :saveRoute="route('rules.saveFilteredTable')" :filters="[
                                    'status' => [
                                        'active' => 'Active',
                                        'inactive' => 'Inactive',
                                    ],

                                ]" :filterLabels="[
                                    'status' => 'Status',
                                    'recurring' => 'Recurring',
                                ]" />
                        </div>

                    </div>


                    <x-table :headers="[
                        'ID',
                        'Name',
                        'Description',
                        'Type',
                        'Value',
                        'Units',
                        'Levels',
                        'Status',
                        'Insert Type',
                        'Actions',
                    ]" :paginator="$rules" emptyMessage="No rules found matching the criteria."
                        emptyActionText="+ Add First Rule" :emptyActionUrl="route('rules.create')">
                        @foreach ($rules as $rule)
                            <tr class="ui-row-click" onclick="window.location='{{ route('rules.edit', $rule) }}'"
                                id="rule-row-{{ $rule->id }}">
                                <td class="ui-muted text-center">{{ $rule->id }}</td>

                                <td class="ui-title text-center">
                                    {{ $rule->name }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $rule->description ?: '—' }}
                                </td>

                                <td class="text-center">
                                    @php
                                        $typeVariant = $rule->type === 'bonus' ? 'success' : 'danger';
                                    @endphp
                                    <span class="ui-pill ui-pill--{{ $typeVariant }}">
                                        {{ ucfirst($rule->type) }}
                                    </span>
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $rule->value }}
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $rule->units ?? '—' }}
                                </td>

                                <td class="ui-muted text-center">
                                    <span class="ui-pill ui-pill--info">
                                        {{ $rule->ruleLevels->unique('level_number')->count() }} Level(s)
                                    </span>

                                    @if ($rule->ruleLevels->unique('level_number')->count() > 0)
                                        <small class="d-block mt-1 text-muted">
                                            @foreach ($rule->ruleLevels->take(3) as $level)
                                                L{{ $level->level_number }}: {{ $level->penalty_value }}
                                                {{ $level->penalty_type }}@if (!$loop->last)
                                                    ,
                                                @endif
                                            @endforeach
                                            @if ($rule->ruleLevels->unique('level_number')->count() > 3)
                                                ...
                                            @endif
                                        </small>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @php
                                        $statusVariant = $rule->status === 'active' ? 'success' : 'neutral';
                                    @endphp
                                    <span class="ui-pill ui-pill--{{ $statusVariant }}">
                                        {{ ucfirst($rule->status) }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @php
                                        $insertTypeVariant = $rule->insert_type === 'auto' ? 'info' : 'warn';
                                    @endphp
                                    <span class="ui-pill ui-pill--{{ $insertTypeVariant }}">
                                        {{ ucfirst($rule->insert_type) }}
                                    </span>
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions">
                                        <x-table-action type="edit" :url="route('rules.edit', $rule)" />

                                        <button type="button" class="btn-delete-rule" data-id="{{ $rule->id }}"
                                            data-name="{{ $rule->name }}" title="Delete Rule"
                                            style="border:none; background:transparent; padding:0;">
                                            <span class="table-action table-action--danger">
                                                <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                            </span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteRuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title">Delete Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body pt-3">
                    <p class="mb-2">
                        Are you sure you want to delete
                        <strong id="delete_rule_name"></strong>?
                    </p>

                    <div class="alert alert-danger d-none mb-0" id="deleteRuleErrors"></div>
                </div>

                <div class="modal-footer border-top-0 pt-0">
                    <input type="hidden" id="delete_rule_id">
                    <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-outline-danger" id="btnConfirmDeleteRule">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('styles')
    <style>
        .ui-actions {
            display: block !important;
            align-items: center !important;
            gap: 0.5rem !important;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.btn-delete-rule').on('click', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');

                $('#delete_rule_id').val(id);
                $('#delete_rule_name').text(name);
                $('#deleteRuleErrors').addClass('d-none').text('');
                $('#deleteRuleModal').modal('show');
            });

            $('#btnConfirmDeleteRule').on('click', function() {
                const id = $('#delete_rule_id').val();
                const token = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    url: `{{ url('rules') }}/${id}`,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    dataType: 'json',
                    success: function(response) {
                        $(`#rule-row-${id}`).remove();
                        $('#deleteRuleModal').modal('hide');

                        if (typeof showAlert !== 'undefined') {
                            showAlert('success', response.message ||
                                'Rule deleted successfully');
                        }

                        if ($('#rulesTableBody tr:visible').length === 0) {
                            location.reload();
                        }
                    },
                    error: function(xhr) {
                        const body = xhr.responseJSON;
                        let message = 'An error occurred';

                        if (body && body.errors) {
                            message = Object.values(body.errors).flat().join("\n");
                        } else if (body && body.message) {
                            message = body.message;
                        }

                        $('#deleteRuleErrors').removeClass('d-none').text(message);
                    }
                });
            });
        });
    </script>
@endpush