@extends('layouts.demo10.base')

@section('content')

    <style>
        /* Prevent table clipping for dropdowns */
        .kt-scrollable-x-auto, .kt-card-table, #odk_datatable, td {
            overflow: visible !important;
        }

        /* DataTables overrides to match Metronic UI */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border: none !important;
            background: none !important;
            padding: 0.5rem 0.75rem !important;
            margin: 0 2px !important;
            border-radius: 0.375rem !important;
            color: var(--secondary-foreground) !important;
            cursor: pointer !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: var(--primary) !important;
            color: white !important;
        }
        .dataTables_wrapper .dataTables_info {
            color: var(--secondary-foreground) !important;
            font-size: 0.875rem !important;
            padding-top: 0 !important;
        }
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid var(--border) !important;
            border-radius: 0.375rem !important;
            padding: 0.25rem 2rem 0.25rem 0.5rem !important;
            background-color: transparent !important;
            color: var(--foreground) !important;
            margin: 0 0.5rem !important;
        }
        .dataTables_wrapper .dataTables_length {
            color: var(--secondary-foreground) !important;
            font-size: 0.875rem !important;
        }
        .dataTables_wrapper .dataTables_paginate {
            padding-top: 0 !important;
        }

        /* Switch styles */
        .switch {
            position: relative;
            display: inline-block;
            width: 36px;
            height: 20px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }
        input:checked + .slider:before {
            -webkit-transform: translateX(16px);
            -ms-transform: translateX(16px);
            transform: translateX(16px);
        }
        .slider.round {
            border-radius: 34px;
        }
        .slider.round:before {
            border-radius: 50%;
        }
    </style>

<div class="grid gap-1 lg:gap-1.5">
@can('view.odk_central')
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-xl text-mono">
                ODK Central Connections
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <a class="hover:text-primary transition-colors" href="/">Home</a>
                <span class="text-muted-foreground">/</span>
                <a class="hover:text-primary transition-colors" href="{{ route('tenants.projects') }}">Projects</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">{{ $currentProject->name ?? 'Project' }}</span>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">ODK Central</span>
            </div>
        </div>
    </div>
    <!-- end: Toolbar -->

    <!-- begin: Card -->
    <div class="kt-card kt-card-grid h-full min-w-full rounded-xl">
        <div class="kt-card-header flex flex-wrap gap-2 p-0">
            <!-- Right side actions -->
            <div class="flex items-center gap-2 ml-auto">
                <div class="kt-input max-w-48 search">
                    <input
                        data-kt-datatable-search="#odk_datatable"
                        placeholder="Search Connections"
                        type="text"
                    />
                </div>

                @can('create.odk_central')
                <button onclick="AuditTracker.buttonClick('ODKCentral','ODKCentral','ODK Central List','Click Add Connection Button')" class="kt-btn kt-btn-primary add-btn" data-kt-modal-toggle="#add_odk_modal">
                    <i class="ki-filled ki-plus"></i>
                    Add Connection
                </button>
                @endcan
            </div>
        </div>
        <div class="kt-card-table">
            <div id="odk_datatable_wrapper" class="p-0 text-foreground">
                <div class="kt-scrollable-x-auto">
                    <table class="kt-table kt-table-border w-full" id="odk_datatable">
                        <thead>
                            <tr>
                                <th class="w-[60px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Sr No</span>
                                    </span>
                                </th>
                                <th class="min-w-[200px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Server URL</span>
                                    </span>
                                </th>
                                <th class="w-[90px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Project ID</span>
                                    </span>
                                </th>
                                <th class="w-[160px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Form ID</span>
                                    </span>
                                </th>
                                <th class="w-[160px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Username</span>
                                    </span>
                                </th>
                                 <th class="w-[140px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Auth</span>
                                    </span>
                                </th>
                                 <th class="w-[110px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Last Date</span>
                                    </span>
                                </th>
                                <th class="w-[80px]">
                                    <span class="kt-table-col">
                                        <span class="kt-table-col-label font-semibold">Status</span>
                                    </span>
                                </th>
                                @canany(['edit.odk_central', 'delete.odk_central'])
                                <th class="w-[80px] text-right">
                                    <span class="kt-table-col justify-end">
                                        <span class="kt-table-col-label font-semibold">Actions</span>
                                    </span>
                                </th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($connections as $connection)
                            <tr>
                                <td class="text-center">
                                    <span class="text-sm">{{ $loop->iteration }}</span>
                                </td>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="flex flex-col">
                                            <a class="text-sm text-foreground hover:text-primary transition-colors font-medium" href="#">
                                                {{ $connection->base_url }}
                                            </a>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-sm text-mono">
                                        {{ $connection->project_id }}
                                    </span>
                                </td>
                                 <td>
                                    <span class="text-sm text-mono">
                                        {{ $connection->form_id ?? 'Not Connected Form'}}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-sm">
                                        {{ $connection->username ?? 'N/A' }}
                                    </span>
                                </td>
                                 <td>
                                   <span class="text-sm">
                                        @if(!empty($connection->username))
                                            Basic
                                        @elseif(!empty($connection->auth_token))
                                            Auth
                                        @else
                                            N/A
                                        @endif
                                    </span>
                                </td>
                                 <td>
                                    <span class="text-sm">
                                        {{ $connection->updated_at->format('M d, Y') }}
                                    </span>
                                </td>
                                <td>
                                    <span class="kt-badge kt-badge-outline {{ $connection->status === 'connected' ? 'kt-badge-success' : 'kt-badge-danger' }} kt-badge-sm">
                                        {{ ucfirst($connection->status) }}
                                    </span>
                                </td>
                                @canany(['edit.odk_central', 'delete.odk_central'])
                                <td class="text-right">
                                    <div class="kt-menu" data-kt-menu="true">
                                        <div class="kt-menu-item" data-kt-menu-item-offset="0, 10px" data-kt-menu-item-placement="bottom-end" data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click">
                                            <button class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
                                                <i class="ki-filled ki-dots-vertical text-lg"></i>
                                            </button>
                                            <div class="kt-menu-dropdown kt-menu-default w-full max-w-[150px] shadow" data-kt-menu-dismiss="true">
                                                @can('edit.odk_central')
                                                @can('connect.odk_central')
                                                <div class="kt-menu-item">
                                                    <a class="kt-menu-link connect-odk-btn" href="javascript:void(0)" data-id="{{ $connection->id }}">
                                                        <span class="kt-menu-icon text-primary"><i class="ki-filled ki-technology-4"></i></span>
                                                        <span class="kt-menu-title text-primary">Connect Form</span>
                                                    </a>
                                                </div>
                                                @endcan
                                                <div class="kt-menu-item">
                                                    <a class="kt-menu-link edit-odk-btn" href="javascript:void(0)" data-id="{{ $connection->id }}">
                                                        <span class="kt-menu-icon"><i class="ki-filled ki-notepad-edit"></i></span>
                                                        <span class="kt-menu-title">Edit</span>
                                                    </a>
                                                </div>
                                                @endcan
                                                @can('delete.odk_central')
                                                <div class="kt-menu-item">
                                                    <a class="kt-menu-link delete-odk-btn" href="javascript:void(0)" data-id="{{ $connection->id }}">
                                                        <span class="kt-menu-icon text-danger"><i class="ki-filled ki-trash"></i></span>
                                                        <span class="kt-menu-title text-danger">Delete</span>
                                                    </a>
                                                </div>
                                                @endcan
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                @endcanany
                            </tr>
                            @empty
                            {{-- <tr>
                                <td colspan="9" class="text-center py-10 text-muted-foreground">
                                    <div class="flex flex-col items-center gap-3">
                                        <i class="ki-filled ki-information-2 text-4xl"></i>
                                        <p class="font-medium">No ODK connections found. Start by adding a new one.</p>
                                    </div>
                                </td>
                            </tr> --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- end: Card -->
</div>
@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan

<!-- Add Connection Modal (Remains the same as before) -->
<div class="kt-modal" data-kt-modal="true" id="add_odk_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Add ODK Central Connection</h3>
            <button onclick="AuditTracker.track({ event_type:'click', module:'ODKCentral', section:'ODKCentral', page:'ODK Central Create', action:'Cancel Add ODK Connection' })" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>
        <div class="kt-modal-body p-5 lg:p-7.5">
            <form action="/tenants/projects/{{ Str::slug($currentProject->name) }}/odk-central/store" method="POST" class="flex flex-col gap-6" id="add_odk_form">
                @csrf
                <div class="flex flex-col gap-2">
                    <label for="base_url" class="text-sm font-semibold text-foreground">Server URL</label>
                    <div class="kt-input">
                        <input type="url" name="base_url" id="base_url" placeholder="https://central.example.com" required />
                    </div>
                </div>
                <div class="flex flex-col gap-2">
                    <label for="project_id" class="text-sm font-semibold text-foreground">Project ID</label>
                    <div class="kt-input">
                        <input type="number" name="project_id" id="project_id" placeholder="123" required />
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <label class="switch">
                        <input type="checkbox" class="auth-method-toggle" data-target="add">
                        <span class="slider round"></span>
                    </label>
                    <span class="text-sm font-medium text-foreground">Use Auth Token</span>
                </div>
                <div class="flex flex-col gap-2 auth-group-password-add">
                    <label for="username" class="text-sm font-semibold text-foreground">Email / Username</label>
                    <div class="kt-input">
                        <input type="text" name="username" id="username" placeholder="admin@example.com" required />
                    </div>
                </div>
                <div class="flex flex-col gap-2 auth-group-password-add">
                    <label for="password" class="text-sm font-semibold text-foreground">Password</label>
                    <div class="kt-input">
                        <input type="password" name="password" id="password" placeholder="••••••••" required />
                    </div>
                </div>
                <div class="flex flex-col gap-2 auth-group-token-add hidden">
                    <label for="auth_token" class="text-sm font-semibold text-foreground">Auth Token</label>
                    <div class="kt-input">
                        <input type="password" name="auth_token" id="auth_token" placeholder="Enter Auth Token" />
                    </div>
                </div>
                <div class="connection-status-alert pt-4"></div>
                <div class="flex justify-between items-center w-full pt-3 modal-btns">
                    <button type="button" class="kt-btn add-btn kt-btn-light test-odk-connection-btn">Test Connection</button>
                    <div class="flex gap-3">
                        <button type="button" onclick="AuditTracker.track({ event_type:'click', module:'ODKCentral', section:'ODKCentral', page:'ODK Central Create', action:'Cancel Add ODK Connection' })" class="kt-btn cancel min-w-[80px]" data-kt-modal-dismiss="true">Cancel</button>
                        <button type="submit" class="kt-btn save min-w-[80px] kt-btn-primary" disabled>Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Connection Modal (Remains the same as before) -->
<div class="kt-modal" data-kt-modal="true" id="edit_odk_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Edit ODK Connection</h3>
            <button onclick="AuditTracker.track({ event_type:'click', module:'ODKCentral', section:'ODKCentral', page:'ODK Central Edit', action:'Cancel Edit ODK Connection' })"    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>
        <div class="kt-modal-body p-5 lg:p-7.5">
            <form action="" method="POST" class="flex flex-col gap-6" id="edit_odk_form">
                @csrf
                <input type="hidden" name="odk_id" id="edit_odk_id">
                <div class="flex flex-col gap-2">
                    <label for="edit_base_url" class="text-sm font-semibold text-foreground">Server URL</label>
                    <div class="kt-input">
                        <input type="url" name="base_url" id="edit_base_url" placeholder="https://central.example.com" required />
                    </div>
                </div>
                <div class="flex flex-col gap-2">
                    <label for="edit_project_id" class="text-sm font-semibold text-foreground">Project ID</label>
                    <div class="kt-input">
                        <input type="number" name="project_id" id="edit_project_id" placeholder="123" required />
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <label class="switch">
                        <input type="checkbox" class="auth-method-toggle" data-target="edit">
                        <span class="slider round"></span>
                    </label>
                    <span class="text-sm font-medium text-foreground">Use Auth Token</span>
                </div>
                <div class="flex flex-col gap-2 auth-group-password-edit">
                    <label for="edit_username" class="text-sm font-semibold text-foreground">Email / Username</label>
                    <div class="kt-input">
                        <input type="text" name="username" id="edit_username" placeholder="admin@example.com" />
                    </div>
                </div>
                <div class="flex flex-col gap-2 auth-group-password-edit">
                    <label for="edit_password" class="text-sm font-semibold text-foreground">Password</label>
                    <div class="kt-input">
                        <input type="password" name="password" id="edit_password" placeholder="Leave blank to keep current password" />
                    </div>
                </div>
                <div class="flex flex-col gap-2 auth-group-token-edit hidden">
                    <label for="edit_auth_token" class="text-sm font-semibold text-foreground">Auth Token</label>
                    <div class="kt-input">
                        <input type="password" name="auth_token" id="edit_auth_token" placeholder="Leave blank to keep current token" />
                    </div>
                </div>
                <div class="connection-status-alert pt-4"></div>
                <div class="flex justify-between items-center w-full pt-3 modal-btns">
                    <button type="button" class="add-btn kt-btn kt-btn-light test-odk-connection-btn">Test Connection</button>
                    <div class="flex gap-3">
                        <button onclick="AuditTracker.track({ event_type:'click', module:'ODKCentral', section:'ODKCentral', page:'ODK Central Edit', action:'Cancel Edit ODK Connection' })" type="button" class="kt-btn kt-btn-light cancel min-w-[80px]" data-kt-modal-dismiss="true">Cancel</button>
                        <button type="submit" class="kt-btn kt-btn-primary min-w-[80px] save" disabled>Update</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    const projectName = "{{ $currentProject->slug ?? str()->slug($currentProject->name) }}";
    const routes = {
        // ✅ correct route name
        testConnection: "{{ route('test-odk-connection') }}",
    };
</script>
    @vite('resources/js/pages/odk-central.js')

@endsection