@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border-0 shadow-sm overflow-hidden p-3">
                    <div
                        class="card-header border-bottom py-3 px-5 d-flex align-items-center flex-wrap justify-content-end gap-1">
                        <x-table-controls action="{{ route('rules.index') }}"/>
                        <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                data-bs-toggle="modal" data-bs-target="#createRuleModal">
                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                            Add Rule
                        </button>


                    </div>

                    <div style="overflow: auto">
                        <table class="table table-bordered table-sm table bordered-table sm-table mb-0">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Type</th>
                                <th>Value</th>
                                <th>Units</th>
                                <th>Status</th>
                                <th>Insert Type</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody id="rulesTableBody">
                            @forelse($rules as $rule)
                                <tr id="rule-row-{{ $rule->id }}">
                                    <td>{{ $rule->id }}</td>
                                    <td class="rule-name">{{ $rule->name }}</td>
                                    <td class="rule-description">{{ $rule->description }}</td>
                                    <td class="rule-type"><span
                                            class="badge {{ $rule->type === 'bonus' ? 'bg-success' : 'bg-danger' }}">{{ ucfirst($rule->type) }}</span>
                                    </td>
                                    <td class="rule-value">{{ $rule->value }}</td>
                                    <td class="rule-units">{{ $rule->units ?? '-' }}</td>
                                    <td class="rule-status"><span
                                            class="badge {{ $rule->status === 'active' ? 'bg-primary' : 'bg-secondary' }}">{{ ucfirst($rule->status) }}</span>
                                    </td>
                                    <td class="rule-insert-type"><span
                                            class="badge {{ $rule->insert_type === 'auto' ? 'bg-info' : 'bg-warning' }}">{{ ucfirst($rule->insert_type) }}</span>
                                    </td>
                                    <td>
                                        <button type="button"
                                                class="btn btn-outline-primary btn-sm radius-8 btn-edit-rule"
                                                data-id="{{ $rule->id }}">
                                            <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>
                                        </button>
                                        <button type="button"
                                                class="btn btn-outline-danger btn-sm radius-8 btn-delete-rule"
                                                data-id="{{ $rule->id }}" data-name="{{ $rule->name }}">
                                            <iconify-icon icon="fluent:delete-24-regular"
                                                          class="text-lg"></iconify-icon>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center text-muted">No rules found.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>


                </div>
            </div>
        </div>
    </div>



    <!-- Create Modal -->
    <div class="modal fade" id="createRuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="createRuleForm">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control" required maxlength="255">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" required maxlength="1000"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Type</label>
                            <select name="type" class="form-select" required>
                                <option value="bonus">Bonus</option>
                                <option value="penalty">Penalty</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Value</label>
                            <input type="number" name="value" class="form-control" id="value_input" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Units</label>
                            <select name="units" id="unit_select" class="form-select" required>
                                <option value="fixed">Fixed</option>
                                <option value="hour">hour</option>
                                <option value="day">Day</option>
                                <option value="percentage">Percentage</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        {{-- <div class="mb-3">
                            <label class="form-label">Insert Type</label>
                            <select name="insert_type" class="form-select" required>
                                <option value="auto">Auto</option>
                                <option value="manual">Manual</option>
                            </select>
                        </div> --}}
                    </form>
                    <div class="alert alert-danger d-none" id="createRuleErrors"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btnSaveRule">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editRuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editRuleForm">
                        @csrf
                        <input type="hidden" name="id" id="edit_rule_id">
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            
                            <input type="text" name="name" id="edit_rule_name" class="form-control" required
                                   maxlength="255" >
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" id="edit_rule_description" class="form-control" required
                                      maxlength="1000" ></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Type</label>
                            <select name="type" id="edit_rule_type" class="form-select" required>
                                <option value="bonus" >Bonus</option>
                                <option value="penalty" >Penalty</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Value</label>
                            <input type="number" name="value" id="edit_rule_value" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Units</label>
                            <select name="units" id="edit_rule_units" class="form-select" required>
                                <option value="fixed">Fixed</option>
                                <option value="day">Day</option>
                                <option value="hour">Hour</option>
                                <option value="percentage">Percentage</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select name="status" id="edit_rule_status" class="form-select" required >
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        {{-- <div class="mb-3">
                            <label class="form-label">Insert Type</label>
                            <select name="insert_type" id="edit_rule_insert_type" class="form-select" required>
                                <option value="auto">Auto</option>
                                <option value="manual">Manual</option>
                            </select>
                        </div> --}}
                    </form>
                    <div class="alert alert-danger d-none" id="editRuleErrors"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btnUpdateRule">Update</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteRuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <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">
                    <p>Are you sure you want to delete <strong id="delete_rule_name"></strong>?</p>
                    <div class="alert alert-danger d-none" id="deleteRuleErrors"></div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="delete_rule_id">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="btnConfirmDeleteRule">Delete</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            const token = $('meta[name="csrf-token"]').attr('content');

            // Create Rule
            $('#btnSaveRule').on('click', function (e) {
                e.preventDefault();
                const formData = $('#createRuleForm');

                $.ajax({
                    url: "{{ route('rules.store') }}",
                    type: "GET",
                    data: formData.serialize(),
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        const r = response.data;
                        addOrUpdateRow(r);

                        $('#createRuleErrors').empty();

                        formData.find('input, select, textarea').each(function () {
                            const type = $(this).attr('type');
                            if (type === 'checkbox' || type === 'radio') {
                                $(this).prop('checked', false);
                            } else if (type === 'file') {
                                $(this).val(null);
                            } else {
                                $(this).val('');
                            }
                        });

                        const modalEl = document.getElementById('createRuleModal');
                        const modalInstance = bootstrap.Modal.getInstance(modalEl);
                        modalInstance.hide();
                    },
                    error: function (xhr) {
                        const body = xhr.responseJSON;
                        showErrors('createRuleErrors', body);
                    }
                });
            });
        });


        // Function to toggle field states based on insert_type
        function toggleEditFormFields(insertType) {
            const isAuto = insertType === 'auto';
            
            // Disable/enable fields except value
            document.getElementById('edit_rule_name').disabled = isAuto;
            document.getElementById('edit_rule_description').disabled = isAuto;
            document.getElementById('edit_rule_type').disabled = isAuto;
            document.getElementById('edit_rule_units').disabled = isAuto;
            document.getElementById('edit_rule_status').disabled = isAuto;
            // document.getElementById('edit_rule_insert_type').disabled = isAuto;
            
            // Value field is always enabled
            document.getElementById('edit_rule_value').disabled = false;
        }

        document.querySelectorAll('.btn-edit-rule').forEach(btn => {
            btn.addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                fetch(`{{ url('rules') }}/${id}`)
                    .then(r => r.json())
                    .then(rule => {
                        document.getElementById('edit_rule_id').value = rule.id;
                        document.getElementById('edit_rule_name').value = rule.name;
                        document.getElementById('edit_rule_description').value = rule.description;
                        document.getElementById('edit_rule_type').value = rule.type;
                        document.getElementById('edit_rule_value').value = rule.value;
                        document.getElementById('edit_rule_status').value = rule.status;
                        document.getElementById('edit_rule_units').value = rule.units || 'fixed';
                        // document.getElementById('edit_rule_insert_type').value = rule.insert_type || 'auto';
                        
                        // Toggle field states based on insert_type
                        toggleEditFormFields(rule.insert_type || 'auto');
                        
                        new bootstrap.Modal(document.getElementById('editRuleModal')).show();
                    });
            });
        });


        $('#btnUpdateRule').on('click', function (e) {
            e.preventDefault();
            const id = $('#edit_rule_id').val();
            const form = $('#editRuleForm');

            $.ajax({
                url: `{{ url('rules/edit/') }}/${id}`,
                type: 'GET',
                data: form.serialize(),
                success: function (response) {
                    const r = response.data;

                    addOrUpdateRow(r);
                    const modalEl = document.getElementById('editRuleModal');
                    const modalInstance = bootstrap.Modal.getInstance(modalEl);
                    modalInstance.hide();
                },
                error: function (xhr) {
                    const body = xhr.responseJSON;
                    showErrors('editRuleErrors', body);
                }
            });
        });

        // Open Delete Modal
        document.querySelectorAll('.btn-delete-rule').forEach(btn => {
            btn.addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                const name = this.getAttribute('data-name');
                document.getElementById('delete_rule_id').value = id;
                document.getElementById('delete_rule_name').innerText = name;
                new bootstrap.Modal(document.getElementById('deleteRuleModal')).show();
            });
        });


        $(document).ready(function () {
            $('#btnConfirmDeleteRule').on('click', function () {
                const id = $('#delete_rule_id').val();

                $.ajax({
                    url: `{{ url('rules/delete') }}/${id}`,
                    type: 'GET', // (better use DELETE or POST in real apps)
                    dataType: 'json',
                    success: function (response) {
                        // remove the deleted row
                        $(`#rule-row-${id}`).remove();

                        // hide modal
                        const modalEl = document.getElementById('deleteRuleModal');
                        const modalInstance = bootstrap.Modal.getInstance(modalEl);
                        modalInstance.hide();
                    },
                    error: function (xhr) {
                        const body = xhr.responseJSON;
                        showErrors('deleteRuleErrors', body);
                    }
                });
            });
        });


        function addOrUpdateRow(r) {
            const tbody = document.getElementById('rulesTableBody');
            let row = document.getElementById(`rule-row-${r.id}`);
            const typeBadge = r.type === 'bonus' ? 'bg-success' : 'bg-danger';
            const statusBadge = r.status === 'active' ? 'bg-primary' : 'bg-secondary';
            const insertTypeBadge = r.insert_type === 'auto' ? 'bg-info' : 'bg-warning';
            const actions = `
      <button type="button" class="btn btn-outline-primary btn-sm radius-8 btn-edit-rule" data-id="${r.id}">
        <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>
      </button>
      <button type="button" class="btn btn-outline-danger btn-sm radius-8 btn-delete-rule" data-id="${r.id}" data-name="${r.name}">
        <iconify-icon icon="fluent:delete-24-regular" class="text-lg"></iconify-icon>
      </button>`;

            const html = `
      <td>${r.id}</td>
      <td class="rule-name">${(r.name)}</td>
      <td class="rule-description">${(r.description)}</td>
      <td class="rule-type"><span class="badge ${typeBadge}">${capitalize(r.type)}</span></td>
      <td class="rule-value">${(r.value)}</td>
      <td class="rule-units">${(r.units ?? '-')}</td>
      <td class="rule-status"><span class="badge ${statusBadge}">${capitalize(r.status)}</span></td>
      <td class="rule-insert-type"><span class="badge ${insertTypeBadge}">${capitalize(r.insert_type ?? 'auto')}</span></td>
      <td>${actions}</td>`;

            if (!row) {
                row = document.createElement('tr');
                row.id = `rule-row-${r.id}`;
                row.innerHTML = html;
                tbody.prepend(row);
            } else {
                row.innerHTML = html;
            }

            // re-bind buttons
            row.querySelector('.btn-edit-rule').addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                fetch(`{{ url('rules') }}/${id}`)
                    .then(r => r.json())
                    .then(rule => {
                        document.getElementById('edit_rule_id').value = rule.id;
                        document.getElementById('edit_rule_name').value = rule.name;
                        document.getElementById('edit_rule_description').value = rule.description;
                        document.getElementById('edit_rule_type').value = rule.type;
                        document.getElementById('edit_rule_value').value = rule.value;
                        document.getElementById('edit_rule_status').value = rule.status;
                        document.getElementById('edit_rule_units').value = rule.units || 'fixed';
                        document.getElementById('edit_rule_insert_type').value = rule.insert_type || 'auto';
                        
                        // Toggle field states based on insert_type
                        toggleEditFormFields(rule.insert_type || 'auto');
                        
                        new bootstrap.Modal(document.getElementById('editRuleModal')).show();
                    });
            });

            row.querySelector('.btn-delete-rule').addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                const name = this.getAttribute('data-name');
                document.getElementById('delete_rule_id').value = id;
                document.getElementById('delete_rule_name').innerText = name;
                new bootstrap.Modal(document.getElementById('deleteRuleModal')).show();
            });
        }

        function showErrors(containerId, body) {
            const el = document.getElementById(containerId);
            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;
            }
            el.classList.remove('d-none');
            el.textContent = message;
        }


        function capitalize(s) {
            return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
        }

    </script>
@endpush