<?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="profile-create-post-2.php" class="step done">
                                    <i class="icon-check"></i>
                                    target audience
                                </a>

                                <a href="profile-create-post-3.php" class="step done">
                                    <i class="icon-check"></i>
                                    Package
                                </a>

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

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

                        <div class="center">

                            <div class="card base-border mb-3">

                                <p class="font-medium lead mb-1"> Target Audience name </p>

                                <div class="d-block mb-2">
                                    <p class="m-0 small font-medium color-gray"> Categories </p>
                                    <p class="m-0"> Electronics, Games, PlayStation's, gaming Electronics, Games, PlayStation's, gaming </p>
                                </div>

                                <div class="flex-start">

                                    <div class="d-block w-80px">
                                        <p class="m-0 small font-medium color-gray"> Gender </p>
                                        <p class="m-0"> Both </p>
                                    </div>

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

                                </div>

                            </div>

                            <p class="font-medium mb-1 lead"> Package </p>


                            <div class="package-item card base-border mb-3">


                                <div class="flex-start gap-2 mb-1">
                                    <img src="assets/img/packages/package-4.png" class="w-50px h-50px cover package-image">
                                    <div class="d-block">
                                        <p class="font-bold m-0"> Premium </p>
                                        <p class="color-success m-0"> 500 Fils Per share </p>
                                    </div>
                                </div>

                                <div class="bg-gray-light p-2 base-border-radius flex-between">
                                    <span class="small"> Estimated number of Audience </span>
                                    <span class="color-primary"> 1250 </span>
                                </div>

                            </div>

                            <div class="mb-3">
                                <p class="font-medium mb-1 lead"> Preview your AD </p>
                                <a href="#" class="btn btn-outline-primary w-100" data-toggle="modal" data-target="#preview-post"> Preview AD </a>
                            </div>

                            <div class="mb-3">

                                <p class="font-medium mb-1 lead"> Payment method </p>

                                <div class="form-group radio-with-side-content">

                                    <div class="custom-control custom-radio side-content control-border mb-2">

                                        <input type="radio" id="customRadioBorder1" name="customRadioBorder" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioBorder1">
                                            <div class="flex-start">
                                                <i class="icon icon-wallet-checked icon-lg me-2 color-gray"></i>
                                                Wallet
                                            </div>
                                        </label>

                                        <div class="side-content-wrapper">

                                            <!-- success -->
                                            <div class="card base-border p-2">
                                                <p class="m-0">
                                                    <span class="font-medium me-2"> Balance </span>
                                                    <span class="font-medium color-success "> 542200 KWD </span>
                                                </p>
                                            </div>

                                            <!-- fail -->
                                            <div class="card base-border p-2">
                                                <p class="m-0">
                                                    <span class="font-medium me-2"> Balance </span>
                                                    <span class="font-medium color-danger "> 542200 KWD </span>
                                                </p>
                                                <p class="m-0 color=gray small"> Your balance doesn’t allow the transaction to be completed </p>
                                            </div>

                                        </div>

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

                                    <div class="custom-control custom-radio side-content    control-border mb-2">

                                        <input type="radio" id="customRadioBorder2" name="customRadioBorder" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioBorder2">
                                            <div class="flex-start">
                                                <img src="assets/img/k-net.png" class="w-20px h-15px me-2">
                                                K net
                                            </div>
                                        </label>


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

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

                            </div>


                            <div class="card base-border">

                                <p class="font-medium mb-1 lead"> Ad Summery </p>

                                <div class="flex-between color-gray mb-1">
                                    <p class="m-0"> Net total </p>
                                    <p class="m-0"> 300.000 KWD </p>
                                </div>

                                <div class="flex-between color-gray">
                                    <p class="m-0"> Kashkom Commission </p>
                                    <p class="m-0"> 9.000 KWD </p>
                                </div>

                                <hr />

                                <div class="flex-between">
                                    <p class="m-0 lead"> Total </p>
                                    <p class="m-0 lead"> 309.000 KWD </p>
                                </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="#" 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="preview-post" tabindex="-1">
    <div class="modal-dialog modal-sm">

        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> preview post </h5>
                <i class="icon icon-close-circle close-modal" data-dismiss="modal"></i>
            </div>

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

                <div class="p-3">

                    <div class="preview-video-wrapper mb-3">

                        <img src="assets/img/mobile-mockup.png" class="mockup-image">

                        <!-- if image -->
                        <img src="assets/img/preview-post-image.jpg" class="post-image">

                        <!-- if video -->
                        <div class="post-video-wrapper">
                            <video width="400" autoplay muted loop>
                                <source src="assets/video/post-2.mp4" type="video/mp4">
                            </video>
                        </div>

                    </div> <!-- preview-video-wrapper -->

                    <a href="#" class="btn btn-primary w-100"> Done </a>

                </div> <!-- p-3 -->

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

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

    </div>

</div>