@extends('admin.layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card bg-dark">
                    <div class="card-header text-white">
                        <h3 class="text-warning">Account Information Management</h3>
                        <button class="btn btn-warning float-end" data-bs-toggle="modal" data-bs-target="#addAccountModal">
                            Add New Account Info
                        </button>
                    </div>

                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle"></i>
                                <span class="text-white">{{ session('success') }}</span>
                            </div>
                        @endif

                        <div class="row">
                            @foreach ($accounts as $account)
                                <div class="col-md-4 mb-4">
                                    <div class="card h-100 bg-dark">
                                        <div class="card-body">
                                            <h5 class="card-title text-warning">{{ $account->account_type }} Account</h5>
                                            @if ($account->account_type == 'Paypal')
                                                <p class="card-text text-white">
                                                    <strong>Account Holder Name:</strong>
                                                    <span class="text-warning">{{ $account->account_holder_name }}</span>
                                                </p>
                                            @else
                                                <p class="card-text text-white">
                                                    <strong>Network:</strong>
                                                    <span class="text-warning">{{ $account->network ?? 'N/A' }}</span>
                                                </p>
                                                <p class="card-text text-white">
                                                    <strong>Icon:</strong>
                                                    @if ($account->icon)
                                                        <img src="{{ asset($account->icon) }}" alt="Network Icon"
                                                            style="max-width: 100px; height: auto;" class="img-fluid">
                                                    @else
                                                        <span class="text-warning">No icon uploaded</span>
                                                    @endif
                                                </p>
                                            @endif
                                            <p class="card-text text-white">
                                                <strong>Information:</strong>
                                                <span
                                                    class="text-warning">{{ Str::limit($account->account_information, 100) }}</span>
                                            </p>
                                            <div class="d-flex justify-content-between">
                                                <button class="btn btn-warning" data-bs-toggle="modal"
                                                    data-bs-target="#editAccountModal{{ $account->id }}">
                                                    Edit
                                                </button>
                                                <form action="{{ route('admin.accounts.destroy', $account->id) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger"
                                                        onclick="return confirm('Are you sure you want to delete this account information?')">
                                                        Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editAccountModal{{ $account->id }}" tabindex="-1"
                                    aria-labelledby="editAccountModalLabel{{ $account->id }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content bg-dark text-white">
                                            <div class="modal-header">
                                                <h5 class="modal-title text-warning"
                                                    id="editAccountModalLabel{{ $account->id }}">Edit Account Information
                                                </h5>
                                                <button type="button" class="btn-close btn-close-white"
                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('admin.accounts.update', $account->id) }}"
                                                method="POST" enctype="multipart/form-data">
                                                @csrf
                                                @method('PUT')
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label for="account_type_{{ $account->id }}"
                                                            class="form-label text-white">Select the Account</label>
                                                        <select name="account_type" id="account_type_{{ $account->id }}"
                                                            class="form-control @error('account_type') is-invalid @enderror"
                                                            onchange="toggleFields('{{ $account->id }}')">
                                                            <option value="Crypto"
                                                                {{ old('account_type', $account->account_type) == 'Crypto' ? 'selected' : '' }}>
                                                                Crypto</option>
                                                            <option value="Paypal"
                                                                {{ old('account_type', $account->account_type) == 'Paypal' ? 'selected' : '' }}>
                                                                Paypal</option>
                                                        </select>
                                                        @error('account_type')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3" id="account_holder_name_field_{{ $account->id }}"
                                                        style="display: {{ $account->account_type == 'Paypal' ? 'block' : 'none' }};">
                                                        <label for="account_holder_name_{{ $account->id }}"
                                                            class="form-label text-white">Account Holder Name</label>
                                                        <input type="text" name="account_holder_name"
                                                            id="account_holder_name_{{ $account->id }}"
                                                            class="form-control @error('account_holder_name') is-invalid @enderror"
                                                            value="{{ old('account_holder_name', $account->account_holder_name) }}">
                                                        @error('account_holder_name')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3" id="network_field_{{ $account->id }}"
                                                        style="display: {{ $account->account_type == 'Crypto' ? 'block' : 'none' }};">
                                                        <label for="network_{{ $account->id }}"
                                                            class="form-label text-white">Network</label>
                                                        <input type="text" name="network"
                                                            id="network_{{ $account->id }}"
                                                            class="form-control @error('network') is-invalid @enderror"
                                                            value="{{ old('network', $account->network) }}">
                                                        @error('network')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3" id="icon_field_{{ $account->id }}"
                                                        style="display: {{ $account->account_type == 'Crypto' ? 'block' : 'none' }};">
                                                        <label for="icon_{{ $account->id }}"
                                                            class="form-label text-white">Upload Icon</label>
                                                        <input type="file" name="icon" id="icon_{{ $account->id }}"
                                                            class="form-control @error('icon') is-invalid @enderror"
                                                            accept="image/*">
                                                        @if ($account->icon)
                                                            <p class="mt-2">
                                                                <small>Current Icon: <img
                                                                        src="{{ asset($account->icon) }}"
                                                                        alt="Current Icon"
                                                                        style="max-width: 50px; height: auto;"></small>
                                                            </p>
                                                        @endif
                                                        @error('icon')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="account_information_{{ $account->id }}"
                                                            class="form-label text-white">Information</label>
                                                        <textarea name="account_information" id="account_information_{{ $account->id }}"
                                                            class="form-control @error('account_information') is-invalid @enderror" rows="6">{{ old('account_information', $account->account_information) }}</textarea>
                                                        @error('account_information')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-warning">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Modal -->
    <div class="modal fade" id="addAccountModal" tabindex="-1" aria-labelledby="addAccountModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark text-white">
                <div class="modal-header">
                    <h5 class="modal-title text-warning" id="addAccountModalLabel">Add Account Information</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.accounts.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="account_type" class="form-label text-white">Select the Account</label>
                            <select name="account_type" id="account_type"
                                class="form-control @error('account_type') is-invalid @enderror"
                                onchange="toggleAddFields()">
                                <option value="Crypto" {{ old('account_type') == 'Crypto' ? 'selected' : '' }}>Crypto
                                </option>
                                <option value="Paypal" {{ old('account_type') == 'Paypal' ? 'selected' : '' }}>Paypal
                                </option>
                            </select>
                            @error('account_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3" id="account_holder_name_field" style="display: none;">
                            <label for="account_holder_name" class="form-label text-white">Account Holder Name</label>
                            <input type="text" name="account_holder_name" id="account_holder_name"
                                class="form-control @error('account_holder_name') is-invalid @enderror"
                                value="{{ old('account_holder_name') }}">
                            @error('account_holder_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3" id="network_field" style="display: block;">
                            <label for="network" class="form-label text-white">Network</label>
                            <input type="text" name="network" id="network"
                                class="form-control @error('network') is-invalid @enderror" value="{{ old('network') }}">
                            @error('network')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3" id="icon_field" style="display: block;">
                            <label for="icon" class="form-label text-white">Upload Icon</label>
                            <input type="file" name="icon" id="icon"
                                class="form-control @error('icon') is-invalid @enderror" accept="image/*">
                            @error('icon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="account_information" class="form-label text-white">Information</label>
                            <textarea name="account_information" id="account_information"
                                class="form-control @error('account_information') is-invalid @enderror" rows="6">{{ old('account_information') }}</textarea>
                            @error('account_information')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function toggleFields(id) {
            const accountType = document.getElementById(`account_type_${id}`).value;
            const accountHolderNameField = document.getElementById(`account_holder_name_field_${id}`);
            const networkField = document.getElementById(`network_field_${id}`);
            const iconField = document.getElementById(`icon_field_${id}`);
            accountHolderNameField.style.display = accountType === 'Paypal' ? 'block' : 'none';
            networkField.style.display = accountType === 'Crypto' ? 'block' : 'none';
            iconField.style.display = accountType === 'Crypto' ? 'block' : 'none';
        }

        function toggleAddFields() {
            const accountType = document.getElementById('account_type').value;
            const accountHolderNameField = document.getElementById('account_holder_name_field');
            const networkField = document.getElementById('network_field');
            const iconField = document.getElementById('icon_field');
            accountHolderNameField.style.display = accountType === 'Paypal' ? 'block' : 'none';
            networkField.style.display = accountType === 'Crypto' ? 'block' : 'none';
            iconField.style.display = accountType === 'Crypto' ? 'block' : 'none';
        }

        // Initialize fields on modal open
        document.addEventListener('DOMContentLoaded', function() {
            const modals = document.querySelectorAll('.modal');
            modals.forEach(modal => {
                modal.addEventListener('show.bs.modal', function() {
                    const id = this.id.replace('editAccountModal', '');
                    if (id) {
                        toggleFields(id);
                    } else {
                        toggleAddFields();
                    }
                });
            });
        });
    </script>
@endsection