<?php include 'header.php'; ?>
<?php include '_top-header.php'; ?>

<div class="page">

    <div class="container p-0">

        <div class="profile-layout">

            <div class="start">
                <?php include '_profile-layout-side-menu.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="card h-100">



                    <div class="flex-between mb-3">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Create post</li>
                        </ol>

                        <a href="#" class="btn btn-danger-faded btn-sm"> Delete post </a>

                    </div>

                    <div class="steps-wizard-wrapper">

                        <div class="start">

                            <div class="steps-wrapper">

                                <a href="profile-create-post-1.php" class="step done">
                                    <i class="icon-check"></i>
                                    Post Details
                                </a>

                                <a href="#" class="step current">
                                    <i class="icon-check"></i>
                                    target audience
                                </a>

                                <a href="#" class="step">
                                    <i class="icon-check"></i>
                                    Package
                                </a>

                                <a href="#" class="step">
                                    <i class="icon-check"></i>
                                    Post Review
                                </a>
                            </div>

                        </div> <!-- start -->

                        <div class="center">

                            <div class="flex-center h-100 w-100">

                                <div class="w-420px text-center flex-center flex-wrap">

                                    <div class="mb-2 w-100">
                                        <img src="assets/img/no-data-folder.png" class="w-100px">
                                    </div>

                                    <p class="bold m-0"> You don’t have any target audiences </p>

                                    <p class="color-gray small">
                                        You haven’t created any target audience yet. Create one to reach the right people for your post
                                    </p>


                                    <a href="#" class="btn btn-outline-primary" data-toggle="modal" data-target="#create-new-target-audience"> Create new Target Audience </a>

                                </div>
                            </div>

                        </div><!-- center -->

                        <div class="end">

                            <div class="row">

                                <div class="col-6">
                                    <a href="#" class="btn btn-outline-primary"> Back </a>
                                </div>

                                <div class="col-6">
                                    <div class="flex-end w-100 gap-3">
                                        <a href="#" class="btn btn-primary-faded"> Save & Exit </a>
                                        <a href="profile-create-post-2-1.php" class="btn btn-primary"> Next </a>

                                    </div>
                                </div>

                            </div>

                        </div><!-- end -->

                    </div><!-- steps-wizard-wrapper -->

                </div> <!-- card -->

            </div> <!-- end -->

        </div> <!-- profile-layout -->

    </div> <!-- container -->

</div> <!-- page -->

<?php include 'footer.php'; ?>


<div class="modal fade" id="create-new-target-audience" tabindex="-1">

    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Add new target audience </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

            <div class="modal-body p-0">

                <div class="p-4">

                    <div class="form-group">
                        <label> Target Audience Name </label>
                        <input type="text" class="form-control" placeholder="Target Audience Name">
                    </div>

                    <div class="form-group">
                        <label> Nationalities </label>
                        <select class="select2" multiple="multiple" data-placeholder="Select Nationalities">
                            <option value="AL">Brazil</option>
                            <option value="WY">Canada</option>
                            <option value="CA">France</option>
                            <option value="TX">Germany</option>
                            <option value="FL">Italy</option>
                            <option value="NY">Japan</option>
                            <option value="IL">Kenya</option>
                            <option value="GA">Mexico</option>
                            <option value="OH">Nigeria</option>
                            <option value="MI">Spain</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label> Categories </label>
                        <select class="select2" multiple="multiple" data-placeholder="Select Categories">
                            <option value="AL">Brazil</option>
                            <option value="WY">Canada</option>
                            <option value="CA">France</option>
                            <option value="TX">Germany</option>
                            <option value="FL">Italy</option>
                            <option value="NY">Japan</option>
                            <option value="IL">Kenya</option>
                            <option value="GA">Mexico</option>
                            <option value="OH">Nigeria</option>
                            <option value="MI">Spain</option>
                        </select>
                    </div>

                    <div class="row">

                        <div class="col-lg-6">

                            <div class="form-group">

                                <label> Age </label>



                                <div class="flex-start gap-3">

                                    <div class="form-group input-with-start-label">
                                        <label> From</label>
                                        <input id="from" name="from" type="text" class="form-control" placeholder="" autocomplete="off">
                                    </div>

                                    <div class="form-group input-with-start-label">
                                        <label> To</label>
                                        <input id="to" name="to" type="text" class="form-control" placeholder="" autocomplete="off">
                                    </div>

                                </div>







                            </div>

                        </div>


                        <div class="col-lg-6">

                            <div class="form-group mb-4">

                                <label class="main-label"> Gender </label>

                                <div class="custom-radio-wrapper mt-2">

                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input" checked>
                                        <label class="custom-control-label" for="customRadioInline1">Both </label>
                                    </div>

                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioInline2">Male </label>
                                    </div>

                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline3" name="customRadioInline" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioInline3">Female </label>
                                    </div>

                                </div> <!-- custom-radio-wrapper -->

                            </div> <!-- form-group -->

                        </div>

                    </div>

                    <div class="flex-between mb-3">

                        <p class="font-medium m-0"> Location</p>

                        <div class="d-flex justify-content-end gap-2 ">

                            <label for="map-switch" class="cursor-pointer font-medium m-0"> Use Map </label>

                            <div class="custom-switch-wrapper me-2">
                                <input type="checkbox" name="map-switch" id="map-switch" class="custom-checkbox" checked />
                                <label for="map-switch" class="checkbox-label"></label>
                            </div>

                        </div>
                    </div>

                    <p class="color-gray font-light"> <span class="color-success"> Note </span> : If you leave the 'Governate and area' field empty, it will select the entire country, and if you leave the 'Area' field empty, it will choose the entire governorate. </p>

                    <div id="map-tab">


                        <div class="form-group">
                            <label> Search here </label>
                            <input type="text" class="form-control" placeholder="Search here ">
                        </div>

                        <div class="map-wrapper w-100 mb-3">
                            <iframe class="w-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d218360.36364995778!2d29.814800765744582!3d31.224034935279008!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14f5c49126710fd3%3A0xb4e0cda629ee6bb9!2sAlexandria%2C%20Alexandria%20Governorate!5e0!3m2!1sen!2seg!4v1648074395392!5m2!1sen!2seg" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>



                        <div class="custom-slider-range my-2 mb-3">

                            <div id="map-slider" class="slider"></div>

                        </div>

 




                        <div class="mb-3 flex-start align-items-start gap-2">
                            <div class="start" style="margin-top: 2px;">
                                <i class="icon icon-target color-gray"></i>
                            </div>
                            <div class="end">
                                <p class="color-gray font-light m-0"> Current location </p>
                                <p> Al-Mubarak Street, Salmiya District, Kuwait City </p>
                            </div>
                        </div>
                    </div>

                    <div id="select-tab" style="display:none;">
                        <div class="form-group">
                            <label> Country </label>
                            <select class="select2" multiple="multiple" data-placeholder="Select Country">
                                <option value="AL">Brazil</option>
                                <option value="WY">Canada</option>
                                <option value="CA">France</option>
                                <option value="TX">Germany</option>
                                <option value="FL">Italy</option>
                                <option value="NY">Japan</option>
                                <option value="IL">Kenya</option>
                                <option value="GA">Mexico</option>
                                <option value="OH">Nigeria</option>
                                <option value="MI">Spain</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label> Governorate </label>
                            <select class="select2" multiple="multiple" data-placeholder="Select Governorate">
                                <option value="AL">Brazil</option>
                                <option value="WY">Canada</option>
                                <option value="CA">France</option>
                                <option value="TX">Germany</option>
                                <option value="FL">Italy</option>
                                <option value="NY">Japan</option>
                                <option value="IL">Kenya</option>
                                <option value="GA">Mexico</option>
                                <option value="OH">Nigeria</option>
                                <option value="MI">Spain</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label> Areas </label>
                            <select class="select2" multiple="multiple" data-placeholder="Select Areas">
                                <option value="AL">Brazil</option>
                                <option value="WY">Canada</option>
                                <option value="CA">France</option>
                                <option value="TX">Germany</option>
                                <option value="FL">Italy</option>
                                <option value="NY">Japan</option>
                                <option value="IL">Kenya</option>
                                <option value="GA">Mexico</option>
                                <option value="OH">Nigeria</option>
                                <option value="MI">Spain</option>
                            </select>
                        </div>

                    </div>


                    <div class="modal-buttons flex-end text-center gap-3">
                        <button class="badge badge-outline-success cursor-auto">
                            <i class="icon icon-check-4 me-2"></i>
                            Data verified +1500 user
                        </button>
                        <button class="btn btn-outline-primary"> Verify </button>
                        <button class="btn btn-primary" disabled> Add </button>
                    </div>

                </div> <!-- p-4 -->
            </div> <!-- modal-body -->
        </div> <!-- modal-content -->
    </div>
</div>