<?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">

                            <p class="font-medium"> Select Saved target audience </p>

                            <div class="target-audience-list">


                                <?php for ($i = 0; $i < 0; $i++) { ?>
                                    <div class="card base-border-light base-border-radius p-2 mb-3">

                                        <div class="flex-between w-100 mb-0">

                                            <div class="d-block w-50">
                                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                    <div class="shimmer"></div>
                                                </div>

                                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                    <div class="shimmer"></div>
                                                </div>

                                                <div class="w-100 h-10px border-radius-sm overflow-hidden">
                                                    <div class="shimmer"></div>
                                                </div>
                                            </div>

                                            <div class="flex-end w-20 flex-column align-items-end ">
                                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                    <div class="shimmer"></div>
                                                </div>

                                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                    <div class="shimmer"></div>
                                                </div>

                                                <div class="w-100 h-10px border-radius-sm overflow-hidden">
                                                    <div class="shimmer"></div>
                                                </div>
                                            </div>

                                            <div class="flex-end w-20 flex-column align-items-end ">
                                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                    <div class="shimmer"></div>
                                                </div>

                                                <div class="w-100 h-10px border-radius-sm overflow-hidden mb-2">
                                                    <div class="shimmer"></div>
                                                </div>

                                                <div class="w-100 h-10px border-radius-sm overflow-hidden">
                                                    <div class="shimmer"></div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                <?php } ?>



                                <?php for ($i = 0; $i < 2; $i++) { ?>

                                    <div class="custom-control target-audience-item custom-radio control-border mb-3 p-1 border position-relative">

                                        <input type="radio" id="address<?php echo $i; ?>" name="shipping_address" class="custom-control-input" <?php echo $i == 0 ? 'checked' : ''; ?>>

                                        <label class="custom-control-label line-height-1-5 w-100" for="address<?php echo $i; ?>">

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

                                                <div class="d-block">
                                                    <p class="font-medium m-0"> Target Audience name </p>
                                                </div>

                                                <div class="flex-start gap-2">
                                                    <a href="#" class="btn btn-link btn-sm p-1" data-toggle="modal" data-target="#">Edit</a>
                                                    <a href="#" class="btn btn-link btn-sm p-1" data-toggle="modal" data-target="#target-audience-details-modal">Details</a>
                                                    <a href="#" class="btn btn-link btn-sm p-1 text-danger " data-toggle="modal" data-target="#delete-target-audience-modal">
                                                        <i class="icon icon-trash"></i>
                                                    </a>
                                                </div>

                                            </div>

                                            <div class="row">

                                                <div class="col-md-6 mb-3 mb-lg-0">
                                                    <p class="m-0 small font-medium color-gray"> Categories </p>
                                                    <div class="flex-start gap-3">
                                                        <p class="m-0 show-lines-1"> Electronics , Games , PlayStation , Electronics , Games , PlayStation </p>
                                                        <a href="#" class="small color-gray w-60px"> and more</a>
                                                    </div>
                                                </div>

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

                                                    <div class="row">

                                                        <div class="col-md-6">
                                                            <div class="flex-start flex-lg-end">
                                                                <div class="flex-center flex-column align-items-center w-auto" style="width: fit-content !important;">
                                                                    <p class="m-0 small font-medium color-gray"> Gender </p>
                                                                    <p> Both </p>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="flex-start flex-lg-end">
                                                                <div class="flex-start flex-column align-items-start w-auto" style="width: fit-content !important;">
                                                                    <p class="m-0 small font-medium color-gray"> Age </p>
                                                                    <p> 16 - 35 Years </p>
                                                                </div>
                                                            </div>
                                                        </div>

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

                                        </label>

                                    </div>

                                <?php } ?>

                            </div> <!--  list -->


                            <div class="text-center">
                                <a href="#" class="btn btn-outline-primary" data-toggle="modal" data-target="#create-new-target-audience"> Create new Target Audience </a>
                            </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-3.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="target-audience-details-modal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

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

            <div class="modal-body">

                <div class="row mb-3">

                    <div class="col-md-4">
                        <div class="d-block">
                            <p class="m-0 small font-medium color-gray"> Target Audience Name </p>
                            <p class="m-0"> Electronics </p>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="d-block">
                            <p class="m-0 small font-medium color-gray"> Gender </p>
                            <p class="m-0"> Both </p>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="d-block">
                            <p class="m-0 small font-medium color-gray"> Gender </p>
                            <p class="m-0"> 16 - 35 Years </p>
                        </div>
                    </div>

                </div> <!-- row -->

                <div class="badge badge-outline-primary-faded justify-content-start h-auto w-100 gap-3 p-2 mb-3">

                    <div class="flex-start bg-white p-3 rounded-pill">
                        <i class="icon icon-heart icon-lg"></i>
                    </div>

                    <div class="d-flex flex-column justify-content-start align-items-start">
                        <p class="color-gray font-light mb-1"> Potential users </p>
                        <p class="base-text-color m-0 font-medium"> 3,563 user </p>
                    </div>

                </div>

                <div class="mb-3">

                    <p class="mb-1"> Categories </p>


                    <div class="see-all-data-wrapper">

                        <div class="data-wrapper flex-start gap-2 flex-wrap mb-2">

                            <?php foreach (range(0, 3) as $i) { ?>
                                <div class="badge badge-xs badge-outline-primary-faded">
                                    <div class="small">Mouse</div>
                                </div>

                                <div class="badge badge-xs badge-outline-primary-faded">
                                    <div class="small">Mouse Mouse</div>
                                </div>

                                <div class="badge badge-xs badge-outline-primary-faded">
                                    <div class="small">Mouse Mouse Mouse</div>
                                </div>
                            <?php } ?>

                        </div>

                        <a class="btn-link cursor-pointer see-all-data-button color-base-text"> See More <i class="icon-chevron-down icon icon-xs"></i> </a>

                    </div>

                </div>

                <div class="mb-3">

                    <p class="mb-1"> Nationalities </p>

                    <div class="see-all-data-wrapper">

                        <div class="data-wrapper flex-start gap-2 flex-wrap mb-2">

                            <?php foreach (range(1, 1) as $i) { ?>

                                <span class="badge badge-xs badge-outline-secondary gap-1">
                                    <img src="assets/img/flag-kuwait.png" class="w-20px h-15px border-radius-xxs">
                                    <span class="small"> Philippines </span>
                                </span>

                                <span class="badge badge-xs badge-outline-secondary gap-1">
                                    <img src="assets/img/flag-kuwait.png" class="w-20px h-15px border-radius-xxs">
                                    <span class="small"> Kuwait </span>
                                </span>

                                <span class="badge badge-xs badge-outline-secondary gap-1">
                                    <img src="assets/img/flag-kuwait.png" class="w-20px h-15px border-radius-xxs">
                                    <span class="small"> Egypt </span>
                                </span>

                            <?php } ?>

                        </div>

                        <a class="btn-link cursor-pointer see-all-data-button color-base-text"> See More <i class="icon-chevron-down icon icon-xs"></i> </a>

                    </div>

                </div>

                <div class="mb-3">
                    <p class="mb-1"> Location </p>

                    <div class="map-wrapper w-100 mb-3">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109180.1246013278!2d29.872313206025073!3d31.224084473648595!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14f5c310e1d19295%3A0xc973dcd1396e7e2c!2sElite%20Hospital!5e0!3m2!1sen!2seg!4v1758197044579!5m2!1sen!2seg" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div><!-- map-wrapper -->

                </div>

                <div class="mb-3">
                    <p class="mb-1"> Location </p>

                    <div class="row">

                        <div class="col-md-4">
                            <div class="d-block">
                                <p class="m-0 small font-medium color-gray"> country </p>
                                <p> Kuwait </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="d-block">
                                <p class="m-0 small font-medium color-gray"> governorate </p>
                                <p> Hawwali </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="d-block">
                                <p class="m-0 small font-medium color-gray"> Area </p>
                                <p> Hawalli </p>
                            </div>
                        </div>

                    </div> <!-- row -->

                </div>

                <div class="modal-buttons flex-end text-center gap-3">
                    <button class="btn btn-outline-primary"> Close </button>
                </div>

            </div> <!-- modal-body -->

        </div> <!-- modal-content -->

    </div> <!-- modal-dialog -->

</div> <!-- modal -->

<div class="modal fade" id="delete-target-audience-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-body">

                <div class="mb-3 text-center">
                    <img src="assets/img/delete.svg" class="w-70px">
                </div>

                <h6 class="bold text-center mb-3"> Are you sure you want to delete this target audience </h6>
                <p class="text-center color-gray"> Once you hit the delete button, there's no way to recover it, Take a moment to think about it and make sure you're 100% sure before you proceed </p>

                <div class="modal-buttons text-center">
                    <button class="btn btn-danger w-100 mb-2" data-dismiss="modal"> Delete </button>
                    <button class="btn btn-outline-primary w-100" data-dismiss="modal"> Cancel </button>
                </div>

            </div>




        </div> <!-- modal-content -->
    </div> <!-- modal-dialog -->
</div> <!-- modal -->



<div class="modal fade" id="delete-post-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-body">

                <div class="mb-3 text-center">
                    <img src="assets/img/delete.svg" class="w-70px">
                </div>

                <h6 class="bold text-center mb-3"> Delete Post </h6>
                <p class="text-center color-gray"> Are you sure that you want to delete this post entirely ? </p>

                <div class="modal-buttons text-center">
                    <button class="btn btn-danger w-100 mb-2" data-dismiss="modal"> Delete </button>
                    <button class="btn btn-outline-primary w-100" data-dismiss="modal"> Cancel </button>
                </div>

            </div>




        </div> <!-- modal-content -->
    </div> <!-- modal-dialog -->
</div> <!-- modal -->