@extends('layouts.page')
<link rel="stylesheet" href="{{ asset('asset/css/style.css') }}">
@section('title', 'Organizations')

@section('content')
    @php
        $pageName = 'Organizations';
    @endphp
    @include('session-message')

    <!-- Stats Banner -->
    <div class="page-banner">
        <div>
            <h2>All companies with access to the platform.</h2>
        </div>
        <div class="page-stat-group">
            <div class="page-stat-pill">
                <i class="bi bi-building"></i>
                <span>
                    <span class="stat-value">{{ $organizations->count() }}</span>
                    <span class="stat-label">Total</span>
                </span>
            </div>
        </div>
    </div>

    <div class="form-section">
        <div class="mb-3">
            <div class="page-toolbar justify-content-end">
                <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createOrganizationModal">
                    <i class="bi bi-building-add me-2"></i>Add Organization
                </button>
                @include('organization.create')
            </div>
        </div>

        <!-- Table to Display Organizations -->
        @if($organizations->isEmpty())
            <div class="d-flex flex-column justify-content-center align-items-center py-5">
                <i class="bi bi-building" style="font-size: 48px; color: var(--ink-soft, #5c7a6f);"></i>
                <p class="fs-5 text-secondary mt-3">No organizations found.</p>
            </div>
        @else
            <div class="table-card mt-2">
                <div class="responsive-table">
                    <table class="custom-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Admin</th>
                            <th>Address</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($organizations as $organization)
                            <tr>
                                <td>{{ $organization->name ?? 'No Name' }}</td>
                                <td>{{ $organization->email ?? 'No Email' }}</td>
                                <td>{{ $organization->admin ?? 'No Admin' }}</td>
                                <td>{{ $organization->address ?? 'No Address' }}</td>
                                <td>
                                    @if($organization->id !== 1)
                                        <button id="statusChange-{{ $organization->id }}" type="button" class="icon-action-btn accent"
                                                title="Change Status"
                                                onclick="showStatusChangeModal({{ $organization->id }}, '{{ $organization->status ? 'inactive' : 'active' }}')">
                                            <span class="status {{ $organization->status ? 'active' : 'inactive' }}">
                                                {{ $organization->status ? 'Active' : 'Inactive' }}
                                            </span>
                                        </button>
                                    @else
                                        <span class="status active">Active</span>
                                    @endif

                                    @if($organization->admin === null)
                                        <button id="resendLink-{{ $organization->id }}" type="button" class="icon-action-btn accent" title="Resend"
                                                onclick="showResendLinkModal({{ $organization->id }})">
                                            <i class="bi bi-send me-1"></i>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>
@endsection

<!-- Confirmation Modal -->
<div id="warningAlert" role="alert" style="position: fixed; top: 50%; left: 53%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; z-index: 1050; background-color: #eafaf1; border: 1px solid #a3d9b1; border-left: 5px solid #2e7d4f; border-radius: 10px; padding: 1.25rem 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); opacity: 0; transition: opacity 0.15s linear; display: none; font-family: inherit;">

    <div style="display: flex; align-items: flex-start; gap: 10px;">
        <i class="bi bi-check-circle-fill" style="font-size: 22px; color: #2e7d4f; margin-top: 2px;"></i>
        <div>
            <strong id="modalTitle" style="color: #1e5631; font-size: 1.05rem;">Warning!</strong>
            <p id="modalMessage" style="margin: 4px 0 0; color: #2d3d34;">Are you sure you want to change the status?</p>
        </div>
    </div>

    <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
        <button id="confirmAction" style="border: none; background-color: #2e7d4f; color: #fff; border-radius: 6px; padding: 6px 14px; display: flex; align-items: center; cursor: pointer;">
            <i class="bi bi-check-lg me-1" style="font-size: 18px;"></i> Confirm
        </button>
        <button id="cancelAlert" style="border: 1px solid #c3d6ca; background-color: transparent; color: #4a5a51; border-radius: 6px; padding: 6px 14px; display: flex; align-items: center; cursor: pointer;">
            <i class="bi bi-x-lg me-1" style="font-size: 16px;"></i> Cancel
        </button>
    </div>
</div>

<!-- Hidden Form for Status Change -->
<form id="statusChangeForm" action="" method="POST" style="display: none;">
    @csrf
    @method('PATCH')
    <input type="hidden" id="statusOrgId" name="id" value="">
    <input type="hidden" id="newStatus" name="status" value="">
</form>

<form id="resendLinkForm" action="" method="POST" style="display: none;">
    @csrf
    @method('PATCH')
    <input type="hidden" id="resendLinkId" name="id" value="">
</form>

@push('scripts')
    <script>
        function showStatusChangeModal(org_Id, newStatus) {
            event.stopPropagation();
            document.getElementById('statusOrgId').value = org_Id;
            document.getElementById('newStatus').value = newStatus;

            const statusChangeUrl = "{{ route('organization.toggle-status', ':id') }}".replace(':id', org_Id);
            document.getElementById('statusChangeForm').action = statusChangeUrl;

            document.getElementById('modalMessage').innerText = "Are you sure you want to change the status?";

            document.getElementById('confirmAction').onclick = function () {
                document.getElementById('statusChangeForm').submit();
            };

            document.getElementById('warningAlert').classList.add('show');
        }

        document.getElementById('cancelAlert').addEventListener('click', function () {
            document.getElementById('warningAlert').classList.remove('show');
        });

        function showResendLinkModal(org_Id) {
            event.stopPropagation();
            document.getElementById('resendLinkId').value = org_Id;

            const resendLinkUrl = "{{ route('organization.resendLink', ':id') }}".replace(':id', org_Id);
            document.getElementById('resendLinkForm').action = resendLinkUrl;

            document.getElementById('modalTitle').innerText = "Warning!";
            document.getElementById('modalMessage').innerText = "Are you sure you want to resend the registration link to the admin?";

            document.getElementById('confirmAction').onclick = function () {
                document.getElementById('resendLinkForm').submit();
            };

            document.getElementById('warningAlert').classList.add('show');
        }

        document.addEventListener("DOMContentLoaded", function () {
            var warningAlert = document.getElementById("warningAlert");
            var cancelAlert = document.getElementById("cancelAlert");

            cancelAlert.addEventListener("click", function () {
                warningAlert.classList.remove("show");
            });

            window.triggerWarning = function () {
                warningAlert.classList.add("show");
            };
        });
    </script>
@endpush