@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>
                        <form method="POST" action="{{ route('update.campaign1', ['id' => request()->segment(2)]) }}">
                            @csrf
                            @method('PUT')
                        <!-- -------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" name="no_customers" value="Never" 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" name="no_customers" value="1-3" 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" name="no_customers" value=">3 but < 5" 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" name="no_customers" value=">5 but < 8" 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"  name="no_customers" value=" >10" 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" name="no_customers" value="< 10" 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" name="no_customers" value="All" 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" name="professions" value="Employed" 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" name="professions" value="Unemployed" 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" name="professions" value="Student" 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" name="professions" value="Retired" 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" name="professions" value="All" 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>
                                                <input style="width: 80px;" type="date" id="startDateInput" class="form-control" placeholder="Start Date">
                                            </div>
                                            <div>
                                                <p class="font-14 Inter colorgray mb-0">to</p>
                                            </div>
                                            <div>
                                                <h6 class="font-16 Inter text-blue">End Date</h6>
                                                <input style="width: 80px;" type="date" id="endDateInput" class="form-control" placeholder="End Date">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input name="schedule_campaign" type="hidden" id="dateRangeHiddenInput">



                        <script>
                            document.addEventListener('DOMContentLoaded', function () {
                                const startDateInput = document.getElementById('startDateInput');
                                const endDateInput = document.getElementById('endDateInput');
                                const dateRangeHiddenInput = document.getElementById('dateRangeHiddenInput');

                                // Add event listeners to the start and end date input fields
                                startDateInput.addEventListener('input', updateHiddenInput);
                                endDateInput.addEventListener('input', updateHiddenInput);

                                function updateHiddenInput() {
                                    const startDate = startDateInput.value;
                                    const endDate = endDateInput.value;
                                    dateRangeHiddenInput.value = startDate + ' - ' + endDate;
                                }
                            });
                        </script>
                        <!-- -------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" name="retargetting" value="1" 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">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" name="track_conversation" value="1" 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" name="qr_code" value="1" 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" name="smrt_targetting" value="1" 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="col-12 mt-5 mb-3 text-center">
                        <button type="submit" class="btn-blue rounded-5 p-2 px-5 py-3 fw-medium font-14 text-capitalize">
                            Activate
                        </button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>

    <!-- ------------bootstrap---------js--------- -->
    <script src="/vendor/bootstrap-5.3.1-dist/js/bootstrap.bundle.min.js"></script>
    <!-- ---------------------scripts--------- -->
    <script src="scripts/script.js"></script>
    @endsection