@extends('layouts.app')

@section('title', 'Add Account - Social Scheduler')

@section('content')
<div class="topbar">
    <h4 class="mb-0 fw-bold"><i class="bi bi-plus-circle me-2 text-primary"></i>Add Social Account</h4>
    <a href="{{ route('accounts.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body p-4">
                <form method="POST" action="{{ route('accounts.store') }}">
                    @csrf

                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-grid-3x3-gap me-1"></i>Platform
                        </label>
                        <div class="row g-3">
                            @foreach(['facebook', 'instagram', 'twitter', 'linkedin'] as $platform)
                            @php
                                $colors = ['facebook' => '#1877F2', 'instagram' => '#E4405F', 'twitter' => '#000000', 'linkedin' => '#0A66C2'];
                                $icons = ['facebook' => 'bi-facebook', 'instagram' => 'bi-instagram', 'twitter' => 'bi-twitter-x', 'linkedin' => 'bi-linkedin'];
                            @endphp
                            <div class="col-6">
                                <div class="form-check card p-3 text-center">
                                    <input class="form-check-input d-none" type="radio" name="platform_name"
                                           value="{{ $platform }}" id="platform_{{ $platform }}"
                                           {{ old('platform_name') === $platform ? 'checked' : '' }} required>
                                    <label class="form-check-label" for="platform_{{ $platform }}">
                                        <span class="platform-icon d-inline-flex mb-2" style="background-color: {{ $colors[$platform] }}; width:48px;height:48px;font-size:1.5rem;">
                                            <i class="bi {{ $icons[$platform] }}"></i>
                                        </span>
                                        <div class="fw-semibold">{{ ucfirst($platform) }}</div>
                                    </label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @error('platform_name')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="account_name" class="form-label fw-semibold">
                            <i class="bi bi-person-badge me-1"></i>Account Name / Handle
                        </label>
                        <input type="text" class="form-control @error('account_name') is-invalid @enderror"
                               id="account_name" name="account_name" value="{{ old('account_name') }}"
                               placeholder="e.g., @MyBrand or MyBrandPage" required>
                        @error('account_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="access_token" class="form-label fw-semibold">
                            <i class="bi bi-key me-1"></i>Access Token (Mock)
                        </label>
                        <input type="text" class="form-control @error('access_token') is-invalid @enderror"
                               id="access_token" name="access_token" value="{{ old('access_token') }}"
                               placeholder="Enter mock access token (optional)">
                        <div class="form-text">This is a placeholder for real API integration. Any value works.</div>
                        @error('access_token')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-toggle-on me-1"></i>Status
                        </label>
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="form-check card p-3">
                                    <input class="form-check-input" type="radio" name="status" value="active"
                                           id="status_active" {{ old('status', 'active') === 'active' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="status_active">
                                        <i class="bi bi-check-circle-fill text-success me-1"></i> Active
                                    </label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-check card p-3">
                                    <input class="form-check-input" type="radio" name="status" value="inactive"
                                           id="status_inactive" {{ old('status') === 'inactive' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="status_inactive">
                                        <i class="bi bi-x-circle-fill text-secondary me-1"></i> Inactive
                                    </label>
                                </div>
                            </div>
                        </div>
                        @error('status')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-check-lg me-2"></i>Add Account
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Platform card selection visual feedback
    document.querySelectorAll('input[name="platform_name"]').forEach(radio => {
        radio.addEventListener('change', function() {
            document.querySelectorAll('input[name="platform_name"]').forEach(r => {
                r.closest('.card').style.border = 'none';
            });
            this.closest('.card').style.border = '2px solid #4f46e5';
        });
    });
    // Pre-select if old value exists
    const checked = document.querySelector('input[name="platform_name"]:checked');
    if (checked) checked.closest('.card').style.border = '2px solid #4f46e5';
</script>
@endpush
@endsection