<x-mb-layout pageTitle="Create Google search ad">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
    @endpush

    <div class="mb-page">
        <div class="mb-page-inner">
            <div class="mb-page-head">
                <div>
                    <h1 class="mb-page-title">Create Google search ad</h1>
                    <p class="mb-page-sub">Build a responsive search ad draft for review.</p>
                </div>
                <div class="mb-page-head-actions">
                    <a href="{{ route('google-ads.setup') }}" class="mb-btn-secondary" wire:navigate>Account setup</a>
                </div>
            </div>

            @if (session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif
            @if ($errors->has('connection'))
                <div class="alert alert-danger">{{ $errors->first('connection') }}</div>
            @endif
            @unless ($connectionReady)
                <div class="alert alert-warning d-flex justify-content-between align-items-center gap-3">
                    <span>Connect your Google Ads account before creating a live campaign.</span>
                    <a href="{{ route('google-ads.setup') }}" class="btn btn-sm btn-warning" wire:navigate>Set up account</a>
                </div>
            @endunless

            <div class="row g-4 mt-1">
                <div class="col-lg-8">
                    <form method="POST" action="{{ route('google-ads.store') }}" class="card shadow-sm">
                        @csrf
                        <div class="card-body p-4">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="customer_id" class="form-label">Child Google Ads account</label>
                                    <select id="customer_id" name="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
                                        <option value="">Choose a child account</option>
                                        @foreach ($connection?->available_customer_ids ?? [] as $customerId)
                                            @if ($customerId !== $connection?->manager_customer_id)
                                                <option value="{{ $customerId }}" @selected(old('customer_id', $connection?->customer_id) === $customerId)>{{ $customerId }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                @foreach (['campaign_name' => 'Campaign name', 'ad_group_name' => 'Ad group name'] as $field => $label)
                                    <div class="col-md-6">
                                        <label for="{{ $field }}" class="form-label">{{ $label }}</label>
                                        <input id="{{ $field }}" name="{{ $field }}" class="form-control @error($field) is-invalid @enderror" value="{{ old($field) }}" required>
                                        @error($field) <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                @endforeach
                                @foreach ([1, 2, 3] as $number)
                                    <div class="col-md-4">
                                        <label for="headline_{{ $number }}" class="form-label">Headline {{ $number }}</label>
                                        <input id="headline_{{ $number }}" name="headline_{{ $number }}" maxlength="30" class="form-control @error('headline_'.$number) is-invalid @enderror" value="{{ old('headline_'.$number) }}" required>
                                        @error('headline_'.$number) <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                @endforeach
                                @foreach ([1, 2] as $number)
                                    <div class="col-md-6">
                                        <label for="description_{{ $number }}" class="form-label">Description {{ $number }}</label>
                                        <textarea id="description_{{ $number }}" name="description_{{ $number }}" maxlength="90" rows="3" class="form-control @error('description_'.$number) is-invalid @enderror" required>{{ old('description_'.$number) }}</textarea>
                                        @error('description_'.$number) <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                @endforeach
                                <div class="col-md-8">
                                    <label for="final_url" class="form-label">Final URL</label>
                                    <input id="final_url" name="final_url" type="url" class="form-control @error('final_url') is-invalid @enderror" value="{{ old('final_url') }}" placeholder="https://example.com/offer" required>
                                    @error('final_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-md-4">
                                    <label for="daily_budget" class="form-label">Daily budget</label>
                                    <div class="input-group">
                                        <span class="input-group-text">USD</span>
                                        <input id="daily_budget" name="daily_budget" type="number" min="0.01" step="0.01" class="form-control @error('daily_budget') is-invalid @enderror" value="{{ old('daily_budget') }}" required>
                                    </div>
                                    @error('daily_budget') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-12">
                                    <label for="keywords" class="form-label">Keywords</label>
                                    <input id="keywords" name="keywords" class="form-control @error('keywords') is-invalid @enderror" value="{{ old('keywords') }}" placeholder="marketing automation, campaign software, ad workflow" required>
                                    @error('keywords') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-white d-flex justify-content-between align-items-center">
                            <span class="small text-muted">Creates a paused campaign in the selected Google Ads account.</span>
                            <button class="btn btn-primary">Create paused campaign</button>
                        </div>
                    </form>
                </div>
                <aside class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h2 class="h5">Recent drafts</h2>
                            @forelse ($drafts as $draft)
                                <div class="border-bottom py-3">
                                    <div class="fw-semibold">{{ $draft->campaign_name }}</div>
                                    <div class="small text-muted">{{ $draft->ad_group_name }} · ${{ $draft->daily_budget }}/day</div>
                                </div>
                            @empty
                                <p class="text-muted mb-0">No drafts saved yet.</p>
                            @endforelse
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</x-mb-layout>