@extends('layouts.app')

@section('title', 'Manage Accounts - ResMan Sync')

@section('content')
    <div style="margin-bottom: 2.5rem; display: flex; justify-content: space-between; align-items: flex-end;">
        <div>
            <div
                style="display: flex; align-items: center; gap: 0.6rem; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.75rem; font-weight: 500;">
                <a href="{{ route('dashboard') }}" style="color: var(--text-dim); text-decoration: none;">Dashboard</a>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
                <span style="color: var(--primary);">Account Management</span>
            </div>
            <h1 style="margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.02rem;">System Accounts</h1>
        </div>

        <div style="display: flex; gap: 1rem;">
            <button onclick="showAddAccountModal()"
                style="background: var(--success); color: #0f172a; border: none; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 700; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; transition: transform 0.2s;"
                onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                New ResMan Account
            </button>
        </div>
    </div>

    <!-- System Overview Stats -->
    <div class="stats-grid">
        <div class="stat-card">
            <h3>Total Registered Accounts</h3>
            <div class="value">{{ $accounts->count() }}</div>
        </div>
        <div class="stat-card">
            <h3>Connected Properties</h3>
            <div class="value">{{ $propertyCount }}</div>
        </div>
        <div class="stat-card">
            <h3>Global API Hits</h3>
            <div class="value">{{ number_format($totalApiHits) }}</div>
        </div>
    </div>

    <div class="content-section">
        <div class="section-header">
            <h2>ResMan API Configuration</h2>
            <span class="tag"
                style="background: rgba(56, 189, 248, 0.05); border: 1px solid rgba(56, 189, 248, 0.1);">{{ $accounts->count() }}
                Accounts Active</span>
        </div>
        <div style="overflow-x: auto;">
            <table>
                <thead>
                    <tr>
                        <th>Account Persona</th>
                        <th>Partner ID</th>
                        <th>Account ID</th>
                        <th>Environment</th>
                        <th style="text-align: center;">Properties</th>
                        <th>Status</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody id="accounts-list">
                    @foreach($accounts as $acc)
                        <tr data-account-id="{{ $acc->id }}">
                            <td style="font-weight: 600; color: white;">{{ $acc->name }}</td>
                            <td><code>{{ $acc->partner_id }}</code></td>
                            <td><code>{{ $acc->account_id }}</code></td>
                            <td style="font-size: 0.8rem; color: var(--text-dim);">{{ $acc->subdomain }}</td>
                            <td style="text-align: center;">
                                <span class="tag"
                                    style="background: rgba(255,255,255,0.05); color: white; min-width: 30px; justify-content: center;">{{ $acc->properties_count }}</span>
                            </td>
                            <td>
                                <span class="tag"
                                    style="{{ $acc->is_active ? 'background: rgba(16, 185, 129, 0.1); color: var(--success);' : 'background: rgba(239, 68, 68, 0.1); color: #f87171;' }}">
                                    {{ $acc->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>
                                <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
                                    <button onclick="syncAccount({{ $acc->id }})" class="tag"
                                        style="cursor: pointer; border: 1px solid var(--primary); background: transparent;">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="3">
                                            <path d="M23 4v6h-6"></path>
                                            <path d="M1 20v-6h6"></path>
                                            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15">
                                            </path>
                                        </svg>
                                        Sync All
                                    </button>
                                    <button onclick="editAccount({{ json_encode($acc) }})" class="tag"
                                        style="cursor: pointer; background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--border);">Edit</button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Automation & Scheduling (Moved here for Clarity) -->
    <div class="content-section" style="margin-bottom: 4rem;">
        <div class="section-header">
            <h2>Automation & Global Scheduling</h2>
        </div>
        <div style="padding: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
            <div>
                <h4
                    style="margin: 0 0 1rem 0; color: var(--primary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05rem;">
                    Execution Commands</h4>
                <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                    <div class="api-item">
                        <p style="font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem;"><strong>Manual Batch
                                Sync</strong> (Terminal/CLI)</p>
                        <div
                            style="background: #0f172a; padding: 0.75rem 1rem; border-radius: 0.6rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border);">
                            <code style="border: none; background: transparent;">php artisan resman:sync</code>
                        </div>
                    </div>
                    <div class="api-item">
                        <p style="font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem;"><strong>Server Cron
                                Job</strong> (Linux/cPanel)</p>
                        <div
                            style="background: #0f172a; padding: 0.75rem 1rem; border-radius: 0.6rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border);">
                            <code
                                style="border: none; background: transparent; font-size: 0.75rem;">* * * * * php artisan schedule:run >> /dev/null 2>&1</code>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <h4
                    style="margin: 0 0 1rem 0; color: var(--primary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05rem;">
                    System Schedule</h4>
                <div
                    style="background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem;">
                    <div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem;">
                        <div
                            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-top: 0.4rem;">
                        </div>
                        <div>
                            <p style="margin: 0; font-weight: 600; font-size: 0.95rem;">Twice Daily Synchronization</p>
                            <p style="margin: 0.25rem 0 0 0; font-size: 0.8rem; color: var(--text-dim);">System runs at
                                01:00 AM and 01:00 PM local time.</p>
                        </div>
                    </div>
                    <div style="padding-top: 1rem; border-top: 1px solid var(--border);">
                        <p style="margin: 0; font-size: 0.8rem; color: var(--text-dim); line-height: 1.4;">Automation
                            ensures availability and pricing data is always current for your front-end applications and
                            website integrations.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('extra_js')
    <script>
        // Account Management Functions
        window.showAddAccountModal = function () {
            Swal.fire({
                title: 'Add ResMan Account',
                background: '#1e293b',
                color: '#f8fafc',
                html: `
                        <div style="text-align: left;">
                            <div style="margin-bottom: 1rem;">
                                <label style="display:block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem;">Account Name (Local Label)</label>
                                <input id="acc-name" class="swal2-input" style="margin:0; width:100%; border-radius: 0.5rem;" placeholder="e.g. Account Name">
                            </div>
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                                <div>
                                    <label style="display:block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem;">Partner ID</label>
                                    <input id="acc-partner" class="swal2-input" style="margin:0; width:100%; border-radius: 0.5rem;" placeholder="xxxx">
                                </div>
                                <div>
                                    <label style="display:block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem;">Account ID</label>
                                    <input id="acc-id" class="swal2-input" style="margin:0; width:100%; border-radius: 0.5rem;" placeholder="xxxx">
                                </div>
                            </div>
                            <div style="margin-bottom: 1rem;">
                                <label style="display:block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem;">API Key (Integration Key)</label>
                                <input id="acc-key" class="swal2-input" style="margin:0; width:100%; border-radius: 0.5rem;" type="password">
                            </div>
                            <div style="margin-bottom: 1rem;">
                                <label style="display:block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem;">Subdomain</label>
                                <input id="acc-subdomain" class="swal2-input" style="margin:0; width:100%; border-radius: 0.5rem;" placeholder="example.myresman.com">
                            </div>
                        </div>
                    `,
                showCancelButton: true,
                confirmButtonText: 'Add Account',
                confirmButtonColor: '#10b981',
                preConfirm: () => {
                    return {
                        name: document.getElementById('acc-name').value,
                        partner_id: document.getElementById('acc-partner').value,
                        api_key: document.getElementById('acc-key').value,
                        account_id: document.getElementById('acc-id').value,
                        subdomain: document.getElementById('acc-subdomain').value,
                        _token: '{{ csrf_token() }}'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch("{{ route('accounts.store') }}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                        body: JSON.stringify(result.value)
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.status === 'success') {
                                Swal.fire('Created!', 'Account added successfully.', 'success').then(() => window.location.reload());
                            } else {
                                Swal.fire('Error', data.message || 'Failed to create account.', 'error');
                            }
                        });
                }
            });
        };

        window.editAccount = function (account) {
            Swal.fire({
                title: 'Edit Account',
                background: '#1e293b',
                color: '#f8fafc',
                html: `
                        <div style="text-align: left;">
                            <div style="margin-bottom: 1rem;">
                                 <label style="display:block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.4rem;">Account Name</label>
                                 <input id="edit-name" class="swal2-input" style="margin:0; width:100%;" value="${account.name}">
                            </div>
                            <input id="edit-partner" class="swal2-input" style="margin:0.5rem 0;" value="${account.partner_id}" placeholder="Partner ID">
                            <input id="edit-key" class="swal2-input" style="margin:0.5rem 0;" value="${account.api_key}" placeholder="API Key">
                            <input id="edit-acc" class="swal2-input" style="margin:0.5rem 0;" value="${account.account_id}" placeholder="Account ID">
                            <input id="edit-subdomain" class="swal2-input" style="margin:0.5rem 0;" value="${account.subdomain}" placeholder="Subdomain">
                            <div style="margin-top: 1rem;">
                                <label style="color: var(--text-dim); font-size: 0.9rem;"><input type="checkbox" id="edit-active" ${account.is_active ? 'checked' : ''}> Mark Account as Active</label>
                            </div>
                        </div>
                    `,
                showCancelButton: true,
                showDenyButton: true,
                denyButtonText: 'Delete Account',
                confirmButtonText: 'Save Changes',
                confirmButtonColor: '#38bdf8',
                preConfirm: () => {
                    return {
                        name: document.getElementById('edit-name').value,
                        partner_id: document.getElementById('edit-partner').value,
                        api_key: document.getElementById('edit-key').value,
                        account_id: document.getElementById('edit-acc').value,
                        subdomain: document.getElementById('edit-subdomain').value,
                        is_active: document.getElementById('edit-active').checked,
                        _token: '{{ csrf_token() }}',
                        _method: 'PUT'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch("{{ url('/accounts') }}/" + account.id, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                        body: JSON.stringify(result.value)
                    }).then(() => window.location.reload());
                } else if (result.isDenied) {
                    Swal.fire({
                        title: 'Delete Account?',
                        text: "All property links for this account will be disconnected!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        background: '#1e293b',
                        color: '#f8fafc'
                    }).then((delResult) => {
                        if (delResult.isConfirmed) {
                            fetch("{{ url('/accounts') }}/" + account.id, {
                                method: 'DELETE',
                                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                            }).then(() => window.location.reload());
                        }
                    });
                }
            });
        };

        window.syncAccount = function (accountId) {
            Swal.fire({
                title: 'Syncing Account Data',
                text: 'Triggering background sync for all account properties...',
                padding: '2rem',
                allowOutsideClick: false,
                didOpen: () => { Swal.showLoading(); }
            });

            fetch("{{ url('/accounts') }}/" + accountId + "/sync", {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
            })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        Swal.fire('Initiated!', `${data.data.total_synced} properties scheduled for sync.`, 'success').then(() => window.location.reload());
                    } else {
                        Swal.fire('Error', data.message || 'Batch sync failed.', 'error');
                    }
                });
        };
    </script>
@endsection