@extends('Admin.layout')

<link
    rel="stylesheet"
    href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css"
>

<link
    rel="stylesheet"
    href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.bootstrap5.min.css"
>

<style>
    .dt-search {
        display: none !important;
    }

    .policy-text-button {
        white-space: normal;
        text-align: left;
        text-decoration: none;
        color: inherit;
        max-width: 500px;
    }

    .policy-text-button:hover {
        color: #7367f0;
    }
</style>

@section('content')

{{-- Page-level toast: no layout changes required --}}
<div
    class="position-fixed top-0 end-0 p-3"
    style="z-index: 99999; max-width: 100%;"
>
    <div
        id="pageToast"
        class="toast align-items-center text-white border-0"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-bs-delay="3000"
        data-bs-autohide="true"
        style="min-width: 250px; max-width: 90vw;"
    >
        <div class="d-flex">
            <div
                class="toast-body"
                id="pageToastMessage"
            ></div>

            <button
                type="button"
                class="btn-close btn-close-white me-2 m-auto"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
    </div>
</div>

<div class="row d-flex justify-content-between">
    <div class="col-auto">
        <h5>Company Policies</h5>
    </div>

    <div class="col-auto">
        <a
            href="{{ route('add_company_policy') }}"
            class="btn btn-primary mb-2"
        >
            <i class="ti tabler-plus"></i>
            &nbsp;Add Company Policy
        </a>
    </div>
</div>

<div class="card p-0 mt-3">

    <div class="row mb-3 g-1 align-items-center p-3">

        <div class="col-md-1 mt-auto mb-2">
            <select
                id="pageLength"
                class="form-select"
            >
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="All">All</option>
            </select>
        </div>

        <div class="col d-flex justify-content-end align-items-center gap-3 mt-auto">

            <div class="position-relative mb-2">
                <input
                    type="text"
                    id="searchBox"
                    class="form-control"
                    placeholder="Search policy or status..."
                >
            </div>
   <button
        type="button"
        class="btn btn-label-secondary mb-2"
        id="resetSearch"
    >
        <i class="ti tabler-refresh"></i>
        &nbsp;Reset
    </button>
            <button
                type="button"
                class="btn btn-label-secondary mb-2"
                id="exportExcel"
            >
                <i class="ti tabler-download"></i>
                &nbsp;Export
            </button>

        </div>
    </div>

    <div class="card-datatable table-responsive pt-0">

        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">

            <div class="justify-content-between dt-layout-table">

                <div class="justify-content-between align-items-center dt-layout-full table-responsive">

                    <table
                        id="companyPolicyTable"
                        class="table"
                    >
                        <thead>
                            <tr>
                                <th class="text-nowrap">
                                    S.No
                                </th>

                                <th class="text-nowrap">
                                    Date & Time
                                </th>

                                <th>
                                    Company Policy
                                </th>

                                <th style="display:none;">
                                    Company Policy Export
                                </th>

                                <th class="text-nowrap">
                                    Status
                                </th>
                            </tr>
                        </thead>

                        <tbody></tbody>
                    </table>

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

{{-- Status confirmation modal --}}
<div
    class="modal fade"
    id="statusModal"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered modal-sm">

        <div class="modal-content border-0 shadow-lg">

            <div class="modal-header border-0">

                <h5 class="modal-title">
                    Change Status
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                ></button>
            </div>

            <div class="modal-body text-center">

                <div class="mb-3">
                    <i
                        class="fa-solid fa-circle-exclamation text-warning"
                        style="font-size: 55px;"
                    ></i>
                </div>

                <h4 class="fw-bold mb-2">
                    Confirm Action
                </h4>

                <p
                    class="text-muted mb-0"
                    id="statusMessage"
                >
                    Do you want to change this status?
                </p>

            </div>

            <div class="text-center mb-5">

                <button
                    type="button"
                    class="btn btn-label-secondary me-2"
                    data-bs-dismiss="modal"
                >
                    Cancel
                </button>

                <button
                    type="button"
                    class="btn btn-danger"
                    id="confirmStatusBtn"
                >
                    Yes, Continue
                </button>

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

{{-- Policy view modal --}}
<div
    class="modal fade"
    id="policyModal"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered modal-lg">

        <div class="modal-content border-0 shadow-lg">

            <div class="modal-header">

                <h5 class="modal-title">
                    Company Policy
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                ></button>
            </div>

            <div class="modal-body">

                <div
                    id="fullPolicy"
                    style="white-space: pre-wrap; line-height: 1.7;"
                ></div>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

<script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.min.js"></script>

<script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.bootstrap5.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.html5.min.js"></script>

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

    let table = $('#companyPolicyTable').DataTable({
        processing: true,
        serverSide: true,

        ajax: "{{ route('get_company_policies') }}",

        dom: 'Brtip',

        buttons: [
            {
                extend: 'excelHtml5',

                title: 'Company Policies',

                text: 'Export Excel',

                className: 'd-none',

                exportOptions: {
                    columns: [0, 1, 3, 4]
                }
            }
        ],

        pageLength: 10,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: true,

        order: [
            [1, 'desc']
        ],

        columnDefs: [
            {
                targets: '_all',
                className: 'align-middle'
            },
            {
                targets: [0, 1, 4],
                className: 'text-nowrap text-center align-middle'
            }
        ],

        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false
            },

            {
                data: 'datetime',
                name: 'created_at'
            },

            {
                data: 'policy',
                name: 'policies',
                orderable: false
            },

            {
                data: 'policy_export',
                name: 'policies',
                visible: false
            },

            {
                data: 'status',
                name: 'is_active',

                render: function (data, type, row) {

                    let isActive = data === 'active';

                    let label = isActive
                        ? 'Active'
                        : 'Inactive';

                    let badgeClass = isActive
                        ? 'bg-label-success'
                        : 'bg-label-danger';

                    return `
                        <span
                            class="badge ${badgeClass} policy-status-btn"
                            role="button"
                            data-id="${row.id}"
                            data-status="${data}"
                        >
                            ${label}
                        </span>
                    `;
                }
            }
        ]
    });

    $('#searchBox').on('keyup', function () {
        table.search(
            $(this).val()
        ).draw();
    });
    // Reset
$('#resetSearch').on('click', function () {
    $('#searchBox').val('');
    location.reload();
});

    $('#pageLength').on('change', function () {

        let value = $(this).val();

        if (value === 'All') {
            table.page.len(-1).draw();
        } else {
            table.page.len(
                parseInt(value)
            ).draw();
        }
    });

    $('#exportExcel').on('click', function () {
        table
            .button('.buttons-excel')
            .trigger();
    });
});
</script>

<script>
$(document).on('click', '.view-policy', function () {

    let policy = $(this).data('policy');

    $('#fullPolicy').text(policy);

    let modal = new bootstrap.Modal(
        document.getElementById('policyModal')
    );

    modal.show();
});
</script>

<script>
function showPageToast(message, type = 'success') {
    const toastElement = document.getElementById('pageToast');
    const toastMessage = document.getElementById('pageToastMessage');

    if (!toastElement || !toastMessage) {
        return;
    }

    toastMessage.textContent = message || 'Something went wrong.';

    toastElement.classList.remove(
        'bg-success',
        'bg-danger',
        'bg-warning',
        'bg-info'
    );

    if (type === 'success') {
        toastElement.classList.add('bg-success');
    } else if (type === 'warning') {
        toastElement.classList.add('bg-warning');
    } else if (type === 'info') {
        toastElement.classList.add('bg-info');
    } else {
        toastElement.classList.add('bg-danger');
    }

    const oldToast = bootstrap.Toast.getInstance(toastElement);

    if (oldToast) {
        oldToast.dispose();
    }

    const toast = new bootstrap.Toast(toastElement, {
        delay: 3000,
        autohide: true
    });

    toast.show();
}

$(document).ready(function () {
    @if(session('success') || session('error') || $errors->any())
        const sessionMessage = @json(
            session('success')
            ?? session('error')
            ?? $errors->first()
        );

        const sessionType = @json(
            session('success') ? 'success' : 'error'
        );

        showPageToast(sessionMessage, sessionType);
    @endif
});

let selectedPolicyId = null;

$(document).on('click', '.policy-status-btn', function () {
    const status = $(this).data('status');

    selectedPolicyId = $(this).data('id');

    if (status === 'active') {
        $('#statusMessage').text(
            'Do you want to make this company policy inactive?'
        );
    } else {
        $('#statusMessage').text(
            'Do you want to make this company policy active?'
        );
    }

    const modalElement = document.getElementById('statusModal');
    const modal = bootstrap.Modal.getOrCreateInstance(modalElement);

    modal.show();
});

$('#confirmStatusBtn').on('click', function () {
    if (!selectedPolicyId) {
        showPageToast('Company policy ID is missing.', 'error');
        return;
    }

    const button = $(this);

    button
        .prop('disabled', true)
        .html(`
            <span class="spinner-border spinner-border-sm me-1"></span>
            Updating...
        `);

    $.ajax({
        url: "{{ route('update_company_policy_status') }}",
        type: "POST",
        dataType: "json",

        data: {
            _token: "{{ csrf_token() }}",
            id: selectedPolicyId
        },

        success: function (response) {
            if (!response.status) {
                showPageToast(
                    response.message || 'Unable to update policy status.',
                    'error'
                );
                return;
            }

            const modalElement = document.getElementById('statusModal');
            const modal = bootstrap.Modal.getInstance(modalElement);

            if (modal) {
                modal.hide();
            }

            $('#companyPolicyTable')
                .DataTable()
                .ajax
                .reload(null, false);

            showPageToast(
                response.message || 'Company policy status updated successfully.',
                'success'
            );
        },

        error: function (xhr) {
            const message =
                xhr.responseJSON?.message ||
                'Unable to update policy status.';

            showPageToast(message, 'error');
        },

        complete: function () {
            button
                .prop('disabled', false)
                .text('Yes, Continue');

            selectedPolicyId = null;
        }
    });
});
</script>

@endsection