@extends('layouts.app')

@section('title', 'Facebook Ads Information Form')

@section('content')
<div class="container py-5">

    <div class="card shadow">
        <div class="card-header bg-dark text-white">
            <h4 class="mb-0">Leomart Media Manager - Facebook Ads Information</h4>
        </div>

        <div class="card-body">

            <form method="POST" action="{{ route('facebook.ads.submit') }}">
                @csrf

                <!-- Business Information -->
                <h5 class="mb-3">1. Business Information</h5>

                <div class="mb-3">
                    <label class="form-label">Business Name</label>
                    <input type="text" name="business_name" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Website / Landing Page</label>
                    <input type="url" name="website" class="form-control">
                </div>

                <div class="mb-3">
                    <label class="form-label">Business Category</label>
                    <input type="text" name="business_category" class="form-control">
                </div>

                <div class="mb-4">
                    <label class="form-label">Business Location</label>
                    <input type="text" name="business_location" class="form-control">
                </div>


                <!-- Facebook Assets -->
                <h5 class="mb-3">2. Facebook Assets</h5>

                <div class="mb-3">
                    <label class="form-label">Facebook Page Link</label>
                    <input type="url" name="facebook_page" class="form-control">
                </div>

                <div class="mb-3">
                    <label class="form-label">Do you have Meta Ads Manager?</label>
                    <select name="ads_manager" class="form-select">
                        <option value="">Select</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>

                <div class="mb-4">
                    <label class="form-label">Facebook Pixel Installed?</label>
                    <select name="pixel" class="form-select">
                        <option value="">Select</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>


                <!-- Campaign Objective -->
                <h5 class="mb-3">3. Campaign Objective</h5>

                <div class="mb-4">
                    <select name="objective" class="form-select">
                        <option value="">Select Objective</option>
                        <option>Traffic</option>
                        <option>Leads</option>
                        <option>Messages</option>
                        <option>Conversions</option>
                        <option>Brand Awareness</option>
                    </select>
                </div>


                <!-- Target Audience -->
                <h5 class="mb-3">4. Target Audience</h5>

                <div class="mb-3">
                    <label class="form-label">Target Location</label>
                    <input type="text" name="target_location" class="form-control">
                </div>

                <div class="mb-3">
                    <label class="form-label">Target Age Range</label>
                    <input type="text" name="age_range" class="form-control" placeholder="Example: 18-45">
                </div>

                <div class="mb-4">
                    <label class="form-label">Target Interests</label>
                    <input type="text" name="interests" class="form-control">
                </div>


                <!-- Ad Creative -->
                <h5 class="mb-3">5. Ad Creative</h5>

                <div class="mb-3">
                    <label class="form-label">Ad Headline</label>
                    <input type="text" name="headline" class="form-control">
                </div>

                <div class="mb-3">
                    <label class="form-label">Primary Text</label>
                    <textarea name="primary_text" class="form-control" rows="3"></textarea>
                </div>

                <div class="mb-4">
                    <label class="form-label">Call To Action</label>
                    <select name="cta" class="form-select">
                        <option>Learn More</option>
                        <option>Send Message</option>
                        <option>Sign Up</option>
                        <option>Contact Us</option>
                    </select>
                </div>


                <!-- Budget -->
                <h5 class="mb-3">6. Budget & Duration</h5>

                <div class="mb-3">
                    <label class="form-label">Daily Budget</label>
                    <input type="text" name="daily_budget" class="form-control">
                </div>

                <div class="mb-4">
                    <label class="form-label">Campaign Duration</label>
                    <input type="text" name="duration" class="form-control" placeholder="Example: 14 days">
                </div>


                <!-- Payment -->
                <h5 class="mb-3">7. Payment Method</h5>

                <div class="mb-4">
                    <select name="payment_method" class="form-select">
                        <option>Debit Card</option>
                        <option>Credit Card</option>
                         <option>Bank Transfer</option>
                
                    </select>
                </div>


                <!-- Submit -->
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">
                        Submit Information
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>
@endsection