@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>
                        <form method="POST" action="{{ route('update.campaign', ['id' => request()->segment(2)]) }}">
                            @csrf
                            @method('PUT')
                        <!-- -------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" name="campaign_category[]" type="checkbox" value="Brand Awareness"
                                            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" name="campaign_category[]" type="checkbox" value="Customer Retention"
                                            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" name="campaign_category[]" type="checkbox" value="Lead Generation"
                                            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" name="campaign_category[]" type="checkbox" value="Seasonal Sales"
                                            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" name="campaign_category[]" type="checkbox" value="Fundraising & Donations"
                                            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" name="campaign_category[]" type="checkbox" value="Partnership & Collaboration"
                                            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" name="campaign_category[]" type="checkbox" value="Special Offers & Discounts"
                                            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" name="campaign_location[]" type="checkbox" value="Local"
                                            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" name="campaign_location[]" type="checkbox" value="Regional"
                                            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" name="campaign_location[]" type="checkbox" value="National"
                                            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" name="campaign_demographics[]" type="checkbox" value="18-24"
                                            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" name="campaign_demographics[]" type="checkbox" value="25-34"
                                            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" name="campaign_demographics[]" type="checkbox" value="35-44"
                                            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" name="campaign_demographics[]" type="checkbox" value="45-54"
                                            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" name="campaign_demographics[]" type="checkbox" value="55-64"
                                            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" name="campaign_demographics[]" type="checkbox" value="65+"
                                            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" name="campaign_demographics[]" type="checkbox" value="All"
                                            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"  name="campaign_gender[]" type="checkbox" value="Male"
                                            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" name="campaign_gender[]" type="checkbox" value="Female"
                                            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" name="campaign_gender[]" type="checkbox" value="Non-binary"
                                            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" name="campaign_gender[]" type="checkbox" value="All"
                                            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" name="campaign_education[]" type="checkbox" value="High School"
                                            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" name="campaign_education[]" type="checkbox" value="University"
                                            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" name="interests_behaviours[]" type="checkbox" value="Technology"
                                            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" name="interests_behaviours[]" type="checkbox" value="Sports"
                                            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" name="interests_behaviours[]" type="checkbox" value="Food & Beverages"
                                            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" name="interests_behaviours[]" type="checkbox" value="All"
                                            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-lg-0 mt-md-3 mt-3">
                                    <div class="form-check">
                                        <input class="form-check-input" name="interests_behaviours[]" type="checkbox" value="Fashion"
                                            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"name="interests_behaviours[]" type="checkbox" value="Recurring Bills"
                                            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" name="interests_behaviours[]" type="checkbox" value="Health & Wellness"
                                            id="flexCheckDefault" />
                                        <label class="form-check-label font-14 Inter text-blue" for="flexCheckDefault">
                                            Health & Wellness
                                        </label>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 mt-5 mb-3 text-center">
                                <input type="submit" value="Save & Exit" class="btn-Rejected rounded-5 p-2 px-3 py-3 fw-medium font-14 text-capitalize me-lg-5">
                                <input type="submit" value="Next" class="btn-blue rounded-5 p-2 px-5 py-3 fw-medium font-14 text-capitalize">
                            </div>
                        </div>

                    </form>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>

    <!-- Include your custom scripts -->
    <script src="scripts/script.js"></script>
    @endsection