@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;">Baseline</h3>
@endsection

{{-- ✅ Audit meta: page identity for JS click logging --}}
<meta name="audit-section" content="Baseline">
<meta name="audit-page" content="Baseline List">

@section('content')
<div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
    id="navbar">
    <div class="rounded-t-xl border border-input border-b-input bg-background filter-container flex items-stretch grow">
        <div class="kt-container-fluid flex justify-center items-stretch gap-5 nav-color">
            <div class="grid items-stretch">
                <div class="kt-scrollable-x-auto flex items-stretch">
                    <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true">
                        @include('includes.admin-forms-navbar')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mx-auto px-4 py-6">


    <div style="display: flex;justify-content:space-between">
        <div id="customSearch" class="flex items-center gap-2">
            <input type="text" id="search" placeholder="Search Baseline"
                class="form-search px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:bg-primary">
        </div>

        @can('baseline create')
        <div class="mt-2 mb-2 flex justify-end">

            {{-- ✅ data-audit-action tells JS what click event this is --}}
            <button
                id="addBaselineBtn"
                class="text-white px-4 py-2 rounded"
                style="background-color: #205C2E;"
                data-audit-action="click_add_btn">
                Add Baseline
            </button>
        </div>
        @endcan
    </div>

    <table id="baselineTable" class="min-w-full table-auto border border-gray-300">
        <thead class="bg-gray-100" style="background-color: #205C2E;">
            <tr>
                <th class="px-4 py-2 text-left" style="color: white;">ID</th>
                <th class="px-4 py-2 text-left" style="color: white;">Baseline</th>
                <th class="px-4 py-2 text-left" style="color: white;">Status</th>
                <th class="px-4 py-2 text-left" style="color: white;">Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($baselines as $baseline)
            <tr>
                <td class="px-4 py-2 border">{{ $baseline->id }}</td>
                <td class="px-4 py-2 border">{{ $baseline->name }}</td>
                <td class="px-4 py-2 border">{{ ucfirst($baseline->status) }}</td>
                <td class="px-4 py-2 border" style="text-align: center;">
                    @can('baseline edit')
                    {{-- ✅ audit attributes on edit button --}}
                    <button
                        class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded"
                        data-id="{{ $baseline->id }}"
                        data-name="{{ $baseline->name }}"
                        data-status="{{ $baseline->status }}"
                        data-audit-action="click_edit_btn"
                        data-audit-target-id="{{ $baseline->id }}">
                        Edit
                    </button>
                    @endcan
                    @can('baseline delete')
                    {{-- ✅ audit attributes on delete button --}}
                    <button
                        style="background-color: #b71c1c;"
                        class="delete-btn px-2 py-1 bg-red-500 text-white rounded"
                        data-id="{{ $baseline->id }}"
                        data-audit-action="click_delete_btn"
                        data-audit-target-id="{{ $baseline->id }}">
                        Delete
                    </button>
                    @endcan
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="text-center py-4">No Baseline Data Found</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Modal -->
<div id="modal" class="model hidden management">
    <div class="modal-content watercourse-form-model bg-white rounded-lg w-full max-w-md max-h-[90vh] flex flex-col">
        <div class="modal-header p-4 border-b flex justify-between items-center">
            <h2 id="modalTitle">Baseline</h2>
            <button id="closeModal">✕</button>
        </div>
        <div class="modal-body flex-1 overflow-y-auto p-4">
            <input type="hidden" id="baselineId">
            <div class="form-group mb-3">
                <label for="baselineName" class="block font-semibold mb-1">Name</label>
                <input type="text" id="baselineName" class="form-input w-full border rounded p-2" placeholder="Enter Baseline Name">
            </div>
            <div class="form-group mb-3">
                <label for="baselineStatus" class="block font-semibold mb-1">Status</label>
                <select id="baselineStatus" class="form-input w-full border rounded p-2">
                    <option value="completed">Completed</option>
                    <option value="ongoing">Ongoing</option>
                </select>
            </div>
        </div>
        <div class="modal-footer p-4 border-t flex justify-end gap-2">
            <button id="cancel" class="px-3 py-1 bg-gray-400 rounded">Cancel</button>
            <button id="saveBtn" class="px-3 py-1 bg-blue-600 text-white rounded">Save</button>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {

        const table = $('#baselineTable').DataTable({
            pageLength: 10,
            ordering: true,
            searching: true,
            responsive: true,

            columnDefs: [{
                    orderable: false,
                    targets: 3
                } // disable sorting on Action column
            ],

            language: {
                search: "Search Baseline:",

            }
        });

        $('#search').on('keyup', function() {
            const keyword = $(this).val();
            table.search(keyword).draw();
        });
        // ═══════════════════════════════════════════════════════════
        //  AUDIT CONFIG — module identity for this page
        // ═══════════════════════════════════════════════════════════
        const AUDIT_MODULE = 'Baseline';
        const AUDIT_SECTION = 'Baseline';
        const AUDIT_PAGE = 'Baseline List';
        const csrfToken = $('meta[name="csrf-token"]').attr('content');

        // ═══════════════════════════════════════════════════════════
        //  PAGE LOAD — log data view (user landed on this page)
        // ═══════════════════════════════════════════════════════════
        // AuditTracker.dataView(AUDIT_MODULE, AUDIT_SECTION, AUDIT_PAGE);

        // ═══════════════════════════════════════════════════════════
        //  MODAL CONTROLS
        // ═══════════════════════════════════════════════════════════
        const $modal = $('#modal');
        const $modalTitle = $('#modalTitle');
        const $baselineId = $('#baselineId');

        function openModal() {
            $modal.removeClass('hidden').addClass('show');
            $('body').addClass('overflow-hidden');
        }

        function closeModal() {
            $modal.removeClass('show').addClass('hidden');
            $('body').removeClass('overflow-hidden');
        }

        // ═══════════════════════════════════════════════════════════
        //  ADD BASELINE BUTTON
        // ═══════════════════════════════════════════════════════════
        $('#addBaselineBtn').click(function() {
            $baselineId.val('');
            $('#baselineName').val('');
            $('#baselineStatus').val('completed');
            $modalTitle.text('Add Baseline');
            openModal();

            // ✅ Log: user clicked the Add button
            AuditTracker.buttonClick(
                AUDIT_MODULE,
                AUDIT_SECTION,
                AUDIT_PAGE,
                'Click Add Button'
            );
        });

        // ═══════════════════════════════════════════════════════════
        //  CLOSE MODAL
        // ═══════════════════════════════════════════════════════════
        $('#closeModal, #cancel').click(closeModal);

        $modal.click(function(e) {
            if (e.target === this) closeModal();
        });

        $(document).on('keydown', function(e) {
            if (e.key === 'Escape' && $modal.hasClass('show')) closeModal();
        });

        // ═══════════════════════════════════════════════════════════
        //  EDIT BUTTON — open modal
        // ═══════════════════════════════════════════════════════════
        $(document).on('click', '.edit-btn', function() {
            const id = $(this).data('id');
            const name = $(this).data('name');
            const status = $(this).data('status');

            $baselineId.val(id);
            $('#baselineName').val(name);
            $('#baselineStatus').val(status);
            $modalTitle.text('Edit Baseline');
            openModal();

            // ✅ Log: user clicked Edit on a specific row
            AuditTracker.rowAction(
                AUDIT_MODULE,
                AUDIT_SECTION,
                AUDIT_PAGE,
                'Click Edit Button', // action
                'Baseline', // target_type
                id // target_id
            );
        });

        // ═══════════════════════════════════════════════════════════
        //  SAVE — Add or Update
        // ═══════════════════════════════════════════════════════════
        $('#saveBtn').click(function() {
            const id = $baselineId.val();
            const url = id ? `/api/baseline/${id}` : '/api/baseline/store';
            const method = id ? 'PUT' : 'POST';

            $.ajax({
                url: url,
                type: method,
                data: {
                    _token: csrfToken,
                    name: $('#baselineName').val(),
                    status: $('#baselineStatus').val(),
                },
                success: function() {
                    // ✅ Controller logs CREATE/UPDATE with before/after diff
                    location.reload();
                },
                error: function(xhr) {
                    let errMsg = 'Something went wrong!';
                    if (xhr.responseJSON?.errors) {
                        errMsg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                    }
                    alert(errMsg);

                    // ✅ Log failed save attempt from client side
                    AuditTracker.buttonClick(
                        AUDIT_MODULE,
                        AUDIT_SECTION,
                        AUDIT_PAGE,
                        id ? 'Update Failed' : 'Create Failed', {
                            status: 0, // STATUS_FAILED
                            severity: 2, // SEVERITY_WARNING
                            meta: {
                                error: errMsg,
                                target_id: id || null
                            }
                        }
                    );
                }
            });
        });

        // ═══════════════════════════════════════════════════════════
        //  DELETE — full confirm dialog audit tracking
        // ═══════════════════════════════════════════════════════════
        $(document).on('click', '.delete-btn', function() {
            const id = $(this).data('id');
            const name = $(this).data('name') ?? `ID: ${id}`;

            // ✅ Step 1 — Log the delete button click (before confirm dialog appears)
            AuditTracker.rowAction(
                AUDIT_MODULE,
                AUDIT_SECTION,
                AUDIT_PAGE,
                'Click Delete Button', // action
                'Baseline', // target_type
                id, // target_id
                {
                    meta: {
                        baseline_name: name
                    }
                }
            );

            // ✅ Step 2 — Show confirm dialog, capture user choice
            const confirmed = confirm('Are you sure you want to delete this baseline?');

            if (!confirmed) {
                // ✅ Step 3a — User cancelled OR closed dialog (Escape / ✕ / outside click)
                // Native confirm() collapses all dismiss methods into false — browser limitation
                AuditTracker.rowAction(
                    AUDIT_MODULE,
                    AUDIT_SECTION,
                    AUDIT_PAGE,
                    'Click Delete Cancel', // action
                    'Baseline', // target_type
                    id, // target_id
                    {
                        meta: {
                            baseline_name: name
                        }
                    }
                );
                return; // ← stop here, do NOT proceed with delete
            }

            // ✅ Step 3b — User confirmed deletion via dialog
            AuditTracker.rowAction(
                AUDIT_MODULE,
                AUDIT_SECTION,
                AUDIT_PAGE,
                'Click Delete Confirm', // action
                'Baseline', // target_type
                id, // target_id
                {
                    meta: {
                        baseline_name: name
                    }
                }
            );

            // ─── Fire DELETE request ──────────────────────────────────
            $.ajax({
                url: `/api/baseline/${id}`,
                type: 'DELETE',
                data: {
                    _token: csrfToken
                },
                success: function() {
                    // ✅ Controller logs DELETE with full before-snapshot
                    location.reload();
                },
                error: function(xhr) {
                    alert('Failed to delete baseline');

                    // ✅ Step 4 — Log server-side failure
                    AuditTracker.rowAction(
                        AUDIT_MODULE,
                        AUDIT_SECTION,
                        AUDIT_PAGE,
                        'Delete Failed', // action
                        'Baseline', // target_type
                        id, // target_id
                        {
                            status: 0, // STATUS_FAILED
                            severity: 2, // SEVERITY_WARNING
                            meta: {
                                baseline_name: name,
                                error: `${xhr.status} ${xhr.statusText}`
                            }
                        }
                    );
                }
            });
        });

    });
</script>
@endsection