<x-mb-layout pageTitle="Google Ads Campaigns">
    @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">Google Ads campaign tests</h1>
                    <p class="mb-page-sub">Live Google Ads campaigns are created paused and can be edited here.</p>
                </div>
            </div>

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

            @if (! $connection?->customer_id)
                <div class="alert alert-warning">
                    Connect a Google Ads account and select a customer before testing campaign actions.
                </div>
            @endif

            <div class="row g-4 mt-1">
                <div class="col-lg-5">
                    <div class="card shadow-sm">
                        <div class="card-body p-4">
                            <h2 class="h5">Create campaign test</h2>
                            <p class="small text-muted">Creates a live campaign in the selected customer account with status paused.</p>
                            <form method="POST" action="{{ route('google-ads.campaigns.store') }}">
                                @csrf
                                <div class="mb-3">
                                    <label for="name" class="form-label">Campaign name</label>
                                    <input id="name" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="row g-3">
                                    <div class="col-sm-6">
                                        <label for="status" class="form-label">Status</label>
                                        <select id="status" name="status" class="form-select" required>
                                            @foreach (['draft', 'enabled', 'paused'] as $status)
                                                <option value="{{ $status }}" @selected(old('status', 'draft') === $status)>{{ ucfirst($status) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="daily_budget" class="form-label">Daily budget</label>
                                        <input id="daily_budget" name="daily_budget" type="number" min="0" step="0.01" value="{{ old('daily_budget') }}" class="form-control @error('daily_budget') is-invalid @enderror">
                                        @error('daily_budget') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                </div>
                                <div class="mt-3 mb-3">
                                    <label for="ad_group_name" class="form-label">Ad group name</label>
                                    <input id="ad_group_name" name="ad_group_name" value="{{ old('ad_group_name') }}" class="form-control @error('ad_group_name') is-invalid @enderror">
                                    @error('ad_group_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="final_url" class="form-label">Final URL</label>
                                    <input id="final_url" name="final_url" type="url" value="{{ old('final_url') }}" class="form-control @error('final_url') is-invalid @enderror">
                                    @error('final_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="notes" class="form-label">Notes</label>
                                    <textarea id="notes" name="notes" rows="3" class="form-control @error('notes') is-invalid @enderror">{{ old('notes') }}</textarea>
                                    @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <button class="btn btn-primary" type="submit">Create paused campaign</button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="card shadow-sm">
                        <div class="card-body p-4">
                            <h2 class="h5">Campaign records</h2>
                            @forelse ($campaigns as $campaign)
                                <div class="border rounded p-3 mb-3">
                                    <div class="small text-muted mb-2">Google campaign ID: {{ $campaign->google_campaign_id ?: 'local test record' }}</div>
                                    <form method="POST" action="{{ route('google-ads.campaigns.update', $campaign) }}">
                                        @csrf
                                        @method('PUT')
                                        <div class="row g-2">
                                            <div class="col-md-6">
                                                <label class="form-label small">Name</label>
                                                <input name="name" value="{{ $campaign->name }}" class="form-control" required>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label small">Status</label>
                                                <select name="status" class="form-select" required>
                                                    @foreach (['draft', 'enabled', 'paused'] as $status)
                                                        <option value="{{ $status }}" @selected($campaign->status === $status)>{{ ucfirst($status) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label small">Budget</label>
                                                <input name="daily_budget" type="number" min="0" step="0.01" value="{{ $campaign->daily_budget }}" class="form-control">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label small">Ad group</label>
                                                <input name="ad_group_name" value="{{ $campaign->ad_group_name }}" class="form-control">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label small">Final URL</label>
                                                <input name="final_url" type="url" value="{{ $campaign->final_url }}" class="form-control">
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label small">Notes</label>
                                                <textarea name="notes" rows="2" class="form-control">{{ $campaign->notes }}</textarea>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-2 mt-3">
                                            <button class="btn btn-outline-primary btn-sm" type="submit">Update</button>
                                            <button class="btn btn-outline-danger btn-sm" type="submit" form="delete-campaign-{{ $campaign->id }}">Delete</button>
                                        </div>
                                    </form>
                                    <form id="delete-campaign-{{ $campaign->id }}" method="POST" action="{{ route('google-ads.campaigns.destroy', $campaign) }}">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </div>
                            @empty
                                <p class="text-muted mb-0">No campaign test records yet.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-mb-layout>
