@extends('admin.main')
@section('content')
<div class="w-lg-80  py-4 stepper-bars">
    <div class="container bg-color p-3 rounded-4">
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6 col-12">
                <div class="row justify-content-center text-center">
                    <div class="col-lg-3 col-md-6 col-12  pe-0">
                        <h6 class="font-13 inter colorblack mb-0">Details</h6>
                        <i class="fa-solid fa-circle colorskyblue font-12"></i>
                        <div class="progress rounded-5" role="progressbar" aria-label="Basic example"
                            aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar  rounded-5" style="width: 100%"></div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12 pe-0">
                        <h6 class="font-13 inter colorblack mb-0">Target Audience</h6>
                        <i class="fa-solid fa-circle colorskyblue font-12"></i>
                        <div class="progress" role="progressbar" aria-label="Basic example"
                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar  rounded-5" style="width: 50%"></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12 pe-0">
                        <h6 class="font-13 inter colorblack mb-0">Confirm</h6>
                        <i class="fa-solid fa-circle colorskyblue font-12"></i>
                        <div class="progress" role="progressbar" aria-label="Basic example"
                            aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar " style="width: 0%"></div>
                        </div>
                    </div>

                </div>


            </div>
            <!-- -------Campaign Category--- -->
            <div class="col-10 mt-5" style="border-top: 2px solid #F6F6F6;">
                <div class="row mt-3">
                    <div class="col-lg-4 col-md-6 col-12">
                        <h6 class="font-16 Inter text-blue">Campaign Category</h6>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Brand Awareness
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Customer Retention
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Lead Generation
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Seasonal Sales
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Fundraising & Donations
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Partnership & Collaboration
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Special Offers & Discounts
                            </label>
                        </div>
                    </div>
                    <!-- ----Location--- -->
                    <div class="col-lg-4 col-md-6 col-12 mt-lg-4 mt-md-3 mt-3">
                        <h6 class="font-16 Inter text-blue">Location</h6>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-lg-4 mt-md-3 mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Local
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Regional
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                National
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-4"></div>
                </div>
            </div>
            <!-- ----Demographics--- -->
            <div class="col-10 mt-3" style="border-top: 2px solid #F6F6F6;">
                <div class="row mt-3">
                    <h6 class="font-16 Inter text-blue">Demographics</h6>
                    <div class="col-lg-4 col-md-6 col-12 ">
                        <h6 class="font-16 Inter text-blue text-end">Age Group</h6>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 ">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                18-24
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                25-34
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                35-44
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                45-54
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                55-64
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                65+
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                All
                            </label>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-12 mt-3 text-end">
                        <h6 class="font-16 Inter text-blue text-end">Gender</h6>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Male
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Female
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Non-binary
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                All
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-3">
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-3 text-end">
                        <h6 class="font-16 Inter text-blue text-end">Education</h6>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                High School
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                University
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-3">
                    </div>
                </div>
            </div>
            <!-- ----Interests & Behaviours--- -->
            <div class="col-lg-10 col-12 mt-3" style="border-top: 2px solid #F6F6F6;">
                <div class="row mt-3">
                    <div class="col-lg-4 col-md-6 col-12 ">
                        <h6 class="font-16 Inter text-blue">Interests & Behaviours</h6>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-3 mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Technology
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Sports
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Food & Beverages
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Food & Beverages
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-3 mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Fashion
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Recurring Bills
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                Health & Wellness
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value=""
                                id="flexCheckDefault" />
                            <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                All
                            </label>
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-12 mt-5 mb-3 text-center">
                <Button class='btn-Rejected rounded-5 p-2 px-3 py-3 fw-medium font-14 text-capitalize me-lg-5'>
                    Save & Exit</Button>
                    <a href="markating3nd.html">

                        <Button class='btn-blue rounded-5 p-2 px-5 py-3 fw-medium font-14 text-capitalize'>
                            Next</Button>
                    </a>
            </div>

        </div>
    </div>
</div>

@endsection
@section('scripts')


@endsection