@extends('layouts.app')

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

@section('content')
<div class="topbar">
    <h4 class="mb-0 fw-bold"><i class="bi bi-pencil me-2 text-primary"></i>Edit 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.update', $account) }}">
                    @csrf
                    @method('PUT')

                    <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 {{ old('platform_name', $account->platform_name) === $platform ? 'border-primary' : '' }}">
                                    <input class="form-check-input d-none" type="radio" name="platform_name"
                                           value="{{ $platform }}" id="platform_{{ $platform }}"
                                           {{ old('platform_name', $account->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', $account->account_name) }}" 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', $account->access_token) }}">
                        @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', $account->status) === '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', $account->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 gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-check-lg me-2"></i>Update Account
                        </button>
                        <a href="{{ route('accounts.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-lg me-2"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection