@extends("base")

@section("main")
    <main class="container mt-4">
        <div class="row">
            <div class="col-sm-3">
                @include("partials.sidebar")
            </div>

            <div class="col-sm-9">
                <h3>IMAP Accounts</h3>

                @if (session("status"))
                    <div class="alert alert-success">
                        {{ session("status") }}
                    </div>
                @endif

                {{-- Create form --}}
                <form action="{{ route('imap-accounts.create') }}" method="POST" class="mb-3">
                    @csrf

                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            class="form-control @error('email') is-invalid @enderror"
                            required
                        >
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="app_password" class="form-label">App password</label>
                        <input
                            type="text"
                            id="app_password"
                            name="app_password"
                            class="form-control @error('app_password') is-invalid @enderror"
                            required
                        >
                        @error('app_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-check mb-3">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="enabled"
                            name="enabled"
                            value="1"
                        >
                        <label class="form-check-label" for="enabled">
                            Enabled
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        Save
                    </button>
                </form>

                <hr>

                {{-- Accounts table --}}
                <table class="table table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Email</th>
                            <th>App password</th>
                            <th>Enabled</th>
                            <th style="width: 1%;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse ($accounts as $account)
                        <tr data-id="{{ $account->id }}">
                            <td>{{ $account->email }}</td>
                            <td><code>{{ $account->app_password }}</code></td>
                            <td>
                                <input
                                    type="checkbox"
                                    class="form-check-input js-toggle-enabled"
                                    data-id="{{ $account->id }}"
                                    {{ $account->enabled_at ? 'checked' : '' }}
                                >
                            </td>
                            <td>
                                <button
                                    type="button"
                                    class="btn btn-sm btn-danger js-delete-account"
                                    data-id="{{ $account->id }}"
                                >
                                    Delete
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-muted">
                                No IMAP accounts yet.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </main>
@endsection

@section("scripts")
    <script type="text/javascript">
        (function () {
            const csrfToken = '{{ csrf_token() }}';

            function postJson(url, payload) {
                return fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify(payload || {})
                }).then(function (res) {
                    if (!res.ok) {
                        throw new Error('Request failed: ' + res.status);
                    }
                    return res.json().catch(function () { return {}; });
                });
            }

            document.addEventListener('DOMContentLoaded', function () {

                // Enable/disable checkbox
                document.querySelectorAll('.js-toggle-enabled').forEach(function (checkbox) {
                    checkbox.addEventListener('change', function (e) {
                        const id = this.dataset.id;
                        const enabled = this.checked;

                        postJson('/imap-accounts/' + id + '/toggle', { enabled: enabled })
                            .catch(function (err) {
                                console.error(err);
                                alert('Failed to update status.');
                                // revert checkbox on error
                                checkbox.checked = !enabled;
                            });
                    });
                });

                // Delete button
                document.querySelectorAll('.js-delete-account').forEach(function (button) {
                    button.addEventListener('click', function () {
                        const id = this.dataset.id;
                        if (!confirm('Delete this IMAP account?')) {
                            return;
                        }

                        const row = this.closest('tr');

                        postJson('/imap-accounts/' + id + '/delete', {})
                            .then(function () {
                                if (row) {
                                    row.remove();
                                }
                            })
                            .catch(function (err) {
                                console.error(err);
                                alert('Failed to delete account.');
                            });
                    });
                });
            });
        })();
    </script>
@endsection