<?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  mb-3">
                    <div class="flex-between h-40px">

                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Edit post</li>
                        </ol>

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




                <div class="d-block">


                    <div class=" card step mb-4">


                        <h5 class="mb-2"> Post Details</h5>


                        <p class="lead font-medium mb-0"> Assets </p>

                        <div class="form-group mb-4 upload-with-thumbnails-container mb-4">

                            <div class="mb-4">
                                <button class="btn btn-outline-primary upload-btn upload-button-section">
                                    <a href="#" class="btn btn-action btn-action-sm btn-primary-faded mb-1">
                                        <i class="icon icon-image"></i>
                                    </a>
                                    Upload Assets
                                </button>
                                <input id="upload" class="upload-with-thumbnails d-none" type="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" />
                            </div><!-- upload-button-section -->

                            <div class="thumbnails-list-wrapper mb-3">

                                <div class="one-thumbnail-wrapper">

                                    <div class="one-thumbnail default" data-default-view-translation="العرض الافتراضي">

                                        <img src="assets/img/thumbs/500x500-001.jpg" />

                                        <div class="loading-container">
                                            <div class="loader sm"></div>
                                        </div>

                                    </div>
                                </div>

                                <div class="one-thumbnail-wrapper text-center">

                                    <div class="one-thumbnail is-loading" data-default-view-translation="العرض الافتراضي">

                                        <img src="assets/img/thumbs/500x500-001.jpg" />


                                        <div class="loading-container">
                                            <div class="loader sm"></div>
                                        </div>
                                    </div>

                                </div>

                                <div class="one-thumbnail-wrapper text-center">

                                    <div class="one-thumbnail" data-default-view-translation="العرض الافتراضي">

                                        <img src="assets/img/thumbs/500x500-001.jpg" />

                                        <div class="video-icon">
                                            <img class="play-icon" src="assets/img/play-white.png" />
                                        </div>

                                        <div class="loading-container">
                                            <div class="loader sm"></div>
                                        </div>

                                    </div>

                                    <a href="#" class="btn btn-action btn-action-sm btn-danger-faded"> <i class="icon icon-trash"></i> </a>

                                </div>

                                <div class="one-thumbnail-wrapper text-center">

                                    <div class="one-thumbnail" data-default-view-translation="العرض الافتراضي">

                                        <img src="assets/img/thumbs/500x500-001.jpg" />



                                        <div class="loading-container">
                                            <div class="loader sm"></div>
                                        </div>
                                    </div>

                                    <a href="#" class="btn btn-action btn-action-sm btn-danger-faded"> <i class="icon icon-trash"></i> </a>

                                </div>

                                <div class="one-thumbnail-wrapper text-center">

                                    <div class="one-thumbnail" data-default-view-translation="العرض الافتراضي">

                                        <img src="assets/img/thumbs/500x500-001.jpg" />



                                        <div class="loading-container">
                                            <div class="loader sm"></div>
                                        </div>
                                    </div>

                                    <a href="#" class="btn btn-action btn-action-sm btn-danger-faded"> <i class="icon icon-trash"></i> </a>

                                </div>

                            </div>

                            <input id="primary-asset-id" type="text" placeholder="primary asset id" class="d-none">

                            <span class="badge badge-sm badge-secondary-faded">
                                <i class="icon icon-info me-2"></i>
                                Maximum 5 photos and 4 videos
                            </span>

                            <span class="badge badge-sm badge-danger-faded">
                                <i class="icon icon-info me-2"></i>
                                You have hit the maximum number of images
                            </span>

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

                        <p class="lead font-medium mb-2"> Post Details </p>

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

                        <div class="form-group">
                            <label> Description </label>
                            <textarea class="form-control" id="" rows="3" placeholder="Description"></textarea>
                        </div>

                        <div class="form-group">
                            <label> Keywords </label>


                        </div>

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

                            <label> Including link </label>

                            <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>
                                        Product Page
                                    </div>
                                </label>

                                <div class="side-content-wrapper">
                                    <select class="select2 w-100" multiple="multiple" data-placeholder="Select Product">
                                        <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> <!-- 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">
                                        <i class="icon icon-wallet-checked icon-lg me-2 color-gray"></i>
                                        Store Page
                                    </div>
                                </label>

                                <div class="side-content-wrapper">
                                    <select class="select2 w-100" multiple="multiple" data-placeholder="Select Store">
                                        <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> <!-- custom-radio -->

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

                                <input type="radio" id="customRadioBorder3" name="customRadioBorder" class="custom-control-input">
                                <label class="custom-control-label" for="customRadioBorder3">
                                    <div class="flex-start">
                                        <i class="icon icon-wallet-checked icon-lg me-2 color-gray"></i>
                                        External link
                                    </div>
                                </label>
                                <div class="side-content-wrapper">

                                    <div class="form-group m-0">
                                        <input type="text" class="form-control" placeholder="Link">
                                    </div>

                                </div>


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

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

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

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

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

                    </div>




                    <div class=" card step mb-4">

                        <h5 class="mb-2"> Target audience </h5>


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

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


                            <?php for ($i = 0; $i < 2; $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>





                    <div class=" card step mb-4">

                        <h5 class="mb-2"> Post Review </h5>

                        <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 mb-4">

                            <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 class="flex-end">
                            <a href="#" class="btn btn-primary"> Save </a>
                        </div>

                    </div>





                </div>



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

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

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

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

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