@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">
                <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: 100%"></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 rounded-5" style="width: 50%"></div>
                        </div>
                    </div>

                </div>


            </div>
            <!-- -------Customers--- -->
            <div class="col-10 mt-4" style="border-top: 2px solid #F6F6F6;">
                <div class="row mt-3">
                    <div class="col-lg-4">
                        <h5 class="font-16 Inter text-blue mb-0">Customers
                        </h5>
                        <p class="font-12 Inter text-blue">Who has visited:</p>
                    </div>
                    <div class="col-lg-4">
                        <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">
                                Never
                            </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">
                                1-3
                            </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">
                                >3 but < 5 </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">
                                >5 but < 8 </label>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <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">
                                >10
                            </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">
                                 10 </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>
            <!-- -------Professions--- -->
            <div class="col-10 mt-3" style="border-top: 2px solid #F6F6F6;">
                <div class="row mt-3">
                    <div class="col-lg-4">
                        <h5 class="font-16 Inter text-blue mb-0">Professions
                        </h5>
                    </div>
                    <div class="col-lg-4">
                        <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">
                                Employed
                            </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">
                                Unemployed
                            </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">
                                Student
                            </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">
                                Retired
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <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>
            <!-- -------Schedule Campaign--- -->
            <div class="col-10 mt-3" style="border-top: 2px solid #F6F6F6;">
                <div class="row mt-3">
                    <div class="col-lg-4">
                        <h5 class="font-16 Inter text-blue mb-0">Schedule Campaign
                        </h5>
                    </div>
                    <div class="col-lg-4">
                        <div class="trip-card p-3">
                            <h6 class="font-16 Inter text-blue ">Start Date</h6>
                            <p class="font-12 Inter colorblack mb-0">Setting a specific date to automatically publish your campaign.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="trip-card p-3">
                            <div class="backgroundgray p-2 d-flex align-items-center justify-content-between">
                                <div>
                                    <h6 class="font-16 Inter text-blue ">Start Date</h6>
                                    <p class="font-12 Inter colorgray mb-0 ">dd/mm/yyyyy</p>
                                </div>
                                <div>
                                    <p class="font-14 Inter colorgray mb-0">to</p>
                                </div>
                                <div>
                                    <h6 class="font-16 Inter text-blue ">End Date</h6>
                                    <p class="font-12 Inter colorgray mb-0">dd/mm/yyyyy</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- -------Additional Setting--- -->
            <div class="col-10 mt-3" style="border-top: 2px solid #F6F6F6;">
                <div class="row mt-3">
                    <div class="col-lg-4">
                        <h5 class="font-16 Inter text-blue mb-0">Additional Setting
                        </h5>
                    </div>
                    <div class="col-lg-4">
                        <div class="trip-card p-3 ">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="font-14 Inter text-blue ">Retargeting</h6>
                                </div>
                                <div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                                        <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                                    </div>
                                </div>
                                <div class="w-50 border rounded-2">
                                    <select class="form-select border-0 p-0 " id="floatingSelect" aria-label="Floating label select example">
                                        <option selected>select</option>
                                        <option value="1">...</option>
                                        <option value="2">...</option>
                                        <option value="3">...</option>
                                    </select>
                                </div>
                            </div>
                            <p class="font-10 Inter colorblack mb-0">Displaying campaigns to users who have previously enrolled/or viewed your campaign to encourage greater impressions.
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="trip-card p-3 h-100">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="font-16 Inter text-blue ">Tracking Conversions</h6>
                                </div>
                                <div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                                        <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                                    </div>
                                </div>
                            </div>
                            <p class="font-10 Inter colorblack mb-0">Monitoring actions users take after clicking an ad to assess the ad's effectiveness.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                    </div>
                    <div class="col-lg-8">
                        <div class="trip-card p-3 mt-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="font-14 Inter text-blue ">Does this offer require a unique QR code for single-use verification?</h6>
                                </div>
                                <div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                                        <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                                    </div>
                                </div>

                            </div>
                            <p class="font-10 Inter colorblack mb-0">Select this option if your offer is a discount, or if it requires a single-use unique QR code for verification by your business.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                    </div>
                    <div class="col-lg-8 ">
                        <div class="trip-card p-3 mt-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="font-14 Inter text-blue ">Time Links’ Smart Targeting</h6>
                                </div>
                                <div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                                        <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                                    </div>
                                </div>

                            </div>
                            <p class="font-10 Inter colorblack mb-0">Opt for TimeLink's Smart Targeting to let our algorithm select the most effective audience for your campaign. Be aware that the algorithm may broaden or refine your selected audience for optimised results, potentially
                                overriding manual selections. </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <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>
                <Button class='btn-blue rounded-5 p-2 px-5 py-3 fw-medium font-14 text-capitalize' data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Activate</Button>
            </div>
            <!-- Modal -->
            <div class="modal fade p-4" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body text-center p-3">
                            <div>
                                <img src="/vendor/assets/imges/noti.png" width="50px" alt="">
                                <h6 class="font-20 Inter colorblack mt-3">Great Choice!</h6>
                                <p class="mt-2 mb-0">You’re about to use a credit to launch a new <br> marketing campaign. Are you ready to boost <br> your business?</p>
                            </div>
                            <div class="col-12 mt-3 mb-3 text-center">
                                <Button class='btn-Rejected rounded-2 p-2 px-4 py-3 fw-medium font-14 text-capitalize' data-bs-dismiss="modal">
                                    Save & Exit</Button>
                                <Button class='btn-blue rounded-2 p-2 px-5 py-3 fw-medium font-14 text-capitalize' data-bs-toggle="modal" data-bs-target="#exampleModal">
                                    Boost!</Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')


@endsection