<?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="row d-flex justify-content-between align-items-center mb-3">

                        <div class="col-sm-3 d-flex justify-content-center justify-content-sm-start align-items-center mb-2 mb-sm-0">
                            <p class="mb-1"> Post manager </p>
                        </div>


                        <div class="form-group m-0 input-with-start-icon">
                            <div class="relative">
                                <input type="text" class="form-control" placeholder="Search here">
                                <i class="icon icon-search start-icon icon-lg"></i>
                            </div>
                        </div>


                    </div>

                    <div class="custom-tabs-wrapper style4">

                        <div class="nav-tabs-wrapper">

                            <ul class="nav nav-tabs justify-content-start mb-3">

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm active" id="all-tab" data-toggle="tab" data-target="#all"> All </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="active-tab" data-toggle="tab" data-target="#active"> Active </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="pending-tab" data-toggle="tab" data-target="#pending"> Pending </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="finished-tab" data-toggle="tab" data-target="#finished"> Finished </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="rejected-tab" data-toggle="tab" data-target="#rejected"> Rejected </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="not-active-tab" data-toggle="tab" data-target="#not-active"> Not Active </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link nav-link-sm" id="paid-tab" data-toggle="tab" data-target="#paid"> Paid </button>
                                </li>

                            </ul>

                            <div class="tab-content" id="myTabContent">

                                <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">

                                    <div class="row row-gap-3">







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

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

                                                <div class="post-card-wrapper">

                                                    <div class="start mb-2">

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

                                                    </div>

                                                    <div class="end">

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

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


                                                    </div>

                                                </div>

                                            </div>

                                        <?php } ?>









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

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

                                                <div class="post-card-wrapper">

                                                    <div class="start">

                                                        <img src="assets/img/thumbs/500x500-00<?= $i + 1 ?>.jpg" class="post-image">

                                                        <div class="post-content">

                                                            <div class="start-top flex-end">
                                                                <span class="badge badge-xxs badge-dark-faded-opacity cursor-pointer"
                                                                    data-toggle="modal" data-target="#review-product">
                                                                    <i class="icon icon-eye me-2"></i>
                                                                    View Details
                                                                </span>
                                                            </div>

                                                            <div class="start-bottom">

                                                                <div class="flex-between">

                                                                    <div class="flex-start gap-3">
                                                                        <div class="flex-start gap-1"> <i class="icon icon-eye"></i> 1249 </div>
                                                                        <div class="flex-start gap-1"> <i class="icon icon-share-1"></i> 54 </div>
                                                                    </div>

                                                                    <span class="badge badge-xxs badge-cancelled"> Not Completed </span>

                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="end">

                                                        <p class="mb-1 show-lines-2 font-light"> U Green Robot V324 - Samsung 2024 version pl </p>

                                                        <div class="flex-between">

                                                            <div class="flex-start gap-2">
                                                                <img src="assets/img/thumbs/500x500-001.jpg" class="w-30px h-30px cover rounded-pill">
                                                                <p class="m-0 color-gray"> Samsung</p>
                                                            </div>

                                                            <div class="flex-start gap-1 color-danger">
                                                                <i class="icon icon-heart-fill"></i>
                                                                <p class="m-0"> 55 </p>
                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        <?php } ?>

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


                                </div>

                                <div class="tab-pane fade" id="active" role="tabpanel" aria-labelledby="active-tab">
                                    <div class="no-data">
                                        <img src="assets/img/no-data-folder.png" class="no-data-image">
                                        <p class="m-0"> No posts here </p>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="pending" role="tabpanel" aria-labelledby="pending-tab">
                                    <div class="no-data">
                                        <img src="assets/img/no-data-folder.png" class="no-data-image">
                                        <p class="m-0"> No posts here </p>
                                    </div>
                                </div>

                            </div>

                        </div> <!-- nav-tabs-wrapper -->

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

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

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

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

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

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

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

<div class="modal fade" id="review-product" tabindex="-1">

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

        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Post details </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="post-details-wrapper mb-4">

                        <div class="row">

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

                                <div class="post-preview-thumb mb-3">

                                    <div class="start mb-2">

                                        <img src="assets/img/thumbs/500x500-006.jpg" class="post-image">

                                        <div class="post-content">

                                            <div class="start-bottom">

                                                <div class="flex-end">

                                                    <span class="badge badge-xxs badge-cancelled"> Not Completed </span>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="end">

                                        <p class="mb-2 show-lines-2 font-light"> U Green Robot V324 - Samsung 2024 version pl U Green RobotGreen RobotGreen RobotGreen RobotGreen RobotGreen RobotGreen RobotGreen RobotGreen Robot </p>

                                        <div class="flex-between">

                                            <div class="flex-start gap-2">
                                                <img src="assets/img/thumbs/500x500-001.jpg" class="w-30px h-30px cover rounded-pill">
                                                <p class="m-0 color-gray"> Samsung</p>
                                            </div>

                                            <div class="flex-start gap-3">
                                                <div class="flex-start gap-1 color-gray font-light"> <i class="icon icon-eye"></i> 12495 </div>
                                                <div class="flex-start gap-1 color-gray font-light"> <i class="icon icon-share-fill"></i> 54 </div>
                                            </div>

                                        </div>

                                    </div>

                                </div> <!-- post-preview-thumb -->

                                <div class="flex-between">
                                    <p class="m-0"> Active State </p>

                                    <div class="d-flex">
                                        <div class="custom-switch-wrapper">
                                            <input type="checkbox" name="switch2" id="switch2" class="custom-checkbox" checked />
                                            <label for="switch2" class="checkbox-label"></label>
                                        </div>
                                    </div>

                                </div>



                                <div class="d-block">
                                    <p class="mb-1 color-gray"> Reason of Rejection </p>
                                    <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lore </p>
                                </div>










                            </div>

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

                                <div class="px-2">

                                    <div class="row row-gap-3">

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Status</p>
                                            <p class="mb-0">Finished</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Package</p>
                                            <p class="mb-0">Platinum</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Shares</p>
                                            <p class="mb-0">462</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Budget</p>
                                            <p class="mb-0">100.000 kwd</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Remaining Budget</p>
                                            <p class="mb-0">00 kwd</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Views</p>
                                            <p class="mb-0">462</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Commissions</p>
                                            <p class="mb-0">100.000 kwd</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Profit per share</p>
                                            <p class="mb-0">462</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Audiences</p>
                                            <p class="mb-0">100</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Location</p>
                                            <p class="mb-0">Kuwait</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Target audience</p>
                                            <p class="mb-0">asddasd</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Gender</p>
                                            <p class="mb-0">Both</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Age</p>
                                            <p class="mb-0">10 To 46</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Categories</p>
                                            <p class="mb-0">Shopping</p>
                                        </div>

                                        <div class="col-4">
                                            <p class="mb-0 color-gray">Nationalities</p>
                                            <p class="mb-0">All nationalities</p>
                                        </div>
                                    </div>


                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="flex-end w-100 gap-3">

                        <a href="#" class="btn min-w-170 btn-outline-primary" data-toggle="modal" data-target="#checkout-modal"> checkout </a>


                        <a href="#" class="btn min-w-170 btn-outline-primary" data-toggle="modal" data-target="#increase-budget-modal"> <i class="icon icon-budget-increase-2 me-2"></i> Increase budget </a>

                        <a href="profile-create-post-1.php" class="btn min-w-170 btn-primary-faded"> <i class="icon icon-edit me-2"></i> Edit post </a>


                        <a href="#" class="btn min-w-170 btn-primary" data-toggle="modal" data-target="#preview-post-modal"> Preview </a>

                        <a href="#" class="btn min-w-170 btn-outline-danger" data-toggle="modal" data-target="#delete-post-modal"> <i class="icon icon-trash me-2"></i> Delete </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<div class="modal fade" id="increase-budget-modal" tabindex="-1">

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

        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title center"> Increase budget </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="form-group mb-3">
                        <label> Number of Audience </label>
                        <input type="text" class="form-control" placeholder="Number of Audience">
                    </div>

                    <a href="#" class="btn btn-sm btn-gray mb-3"> Minimum Audience is 50 </a>

                    <div class="withdraw-box mb-3">

                        <p class="mb-3 color-gray font-light lead"> Total amount </p>

                        <div class="withdraw-amount-wrapper">

                            <p class="h3"> 15422</p>

                            <p class="withdraw-currency"> KWD </p>

                        </div><!-- withdraw-amount -->
                    </div><!-- withdraw-box -->

                    <div class="flex-end w-100 gap-3">
                        <a href="#" class="btn w-100 btn-outline-primary" data-dismiss="modal"> Later </a>
                        <a href="#" class="btn w-100 btn-primary"> Submit </a>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<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"> Are you sure you want to Delete this Post permanently </h6>

                <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="preview-post-modal" 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" data-dismiss="modal"> Done </a>

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

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

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

    </div>

</div>

<div class="modal fade" id="checkout-modal" tabindex="-1">

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

        <div class="modal-content">

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

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

                <div class="p-3">

                    <p class="mb-2"> Payment method </p>

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

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

                                <div class="flex-start gap-2 p-2 border-radius-sm base-border">
                                    <p class="m-0"> Balance </p>
                                    <p class="m-0 color-success bold"> 424.00 KWD </p>
                                </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">
                                    <img src="assets/img/knet.png" class="border-radius-xs h-20px me-1 ms-1">
                                    K net
                                </div>
                            </label>

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

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




                    <div class="mb-4">

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

                        <div class="summary-item flex-between mb-2 color-gray font-light">
                            <span> Number of target audience </span>
                            <span> 50 </span>
                        </div>
                        <div class="summary-item flex-between mb-2 color-gray font-light">
                            <span> Profit per share </span>
                            <span> 1.000 KWD </span>
                        </div>
                        <div class="summary-item flex-between mb-2 color-gray font-light">
                            <span> Subtotal </span>
                            <span> 50.000 KWD </span>
                        </div>

                        <div class="summary-item flex-between mb-2 color-gray font-light">
                            <span> Kashkom Fees </span>
                            <span> 9.000 KWD </span>
                        </div>


                        <div class="summary-item flex-between mt-3 pt-3 border-top">
                            <span class="h5 font-medium"> Total </span>
                            <span class="h5 font-medium"> 609.000 KWD </span>
                        </div>
                    </div>

                    <div class="flex-end w-100 gap-3">
                        <a href="#" class="btn w-100 btn-outline-primary" data-dismiss="modal"> Cancel </a>
                        <a href="#" class="btn w-100 btn-primary"> Confirm </a>
                    </div>

                </div>

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

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

    </div>

</div>