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

                    <div class="flex-between h-40px mb-3">

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

                    </div>

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

                        <div class="start">

                            <div class="steps-wrapper">

                                <a href="profile-create-store-1.php" class="step current">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> Post Details </span>
                                    <span class="show-sm"> Details</span>
                                </a>

                                <a href="profile-create-store-2.php" class="step ">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> Business information </span>
                                    <span class="show-sm"> information</span>
                                </a>

                                <a href="profile-create-store-3.php" class="step">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> Package </span>
                                    <span class="show-sm"> Package</span>
                                </a>

                                <a href="profile-create-store-4.php" class="step">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> Post Review </span>
                                    <span class="show-sm"> Review</span>
                                </a>
                            </div>

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

                        <div class="center">

                            <p class="lead font-medium mb-2"> Cover photo </p>

                            <div class="upload-cover-and-logo-wrapper mb-5">

                                <div class="upload-store-cover-wrapper">

                                    <label for="upload-cover" class="cursor-pointer w-100 m-0">
                                        <img id="cover-preview" src="assets/img/store-cover.svg" alt="Upload Cover" class="img-fluid w-100 upload-thumbnail">
                                        <div class="upload-side">
                                            <div href="#" class="badge badge-light base-border border-primary badge-sm mb-2">
                                                <span class="color-primary flex-center gap-1">
                                                    <i class="icon icon-image icon-lg"></i>
                                                    upload store cover
                                                </span>
                                            </div>
                                            <p class="m-0 color-gray small"> Make sure the photo size is 376 * 125 PX </p>
                                            <p class="m-0 color-gray small"> Allowed formats ( PNG - JPEG )</p>
                                        </div>
                                    </label>

                                    <input type="file" id="upload-cover" class="upload-input" accept="image/*" hidden>

                                </div> <!-- upload-store-cover-wrapper -->


                                <div class="upload-store-logo-wrapper">

                                    <label for="upload-logo" class="cursor-pointer m-0">
                                        <img src="assets/img/store-logo.svg" alt="Upload Cover" class="img-fluid upload-thumbnail">
                                        <div class="upload-side w-100">
                                            <div class="flex-center flex-column w-100 color-primary">
                                                <i class="icon icon-image icon-lg mb-1"></i>
                                                <p class="m-0"> Store logo </p>
                                            </div>
                                        </div>
                                    </label>

                                    <input type="file" id="upload-logo" class="upload-input" accept="image/*" hidden>

                                </div> <!-- upload-store-logo-wrapper -->

                            </div><!-- upload-cover-and-logo-wrapper -->



                            <!-- start Store information -->
                            <p class="lead font-medium mb-2"> Store information </p>

                            <div class="form-group">
                                <label> Store Name (English) </label>
                                <input type="text" class="form-control" placeholder="Store Name (English) ">
                            </div>

                            <div class="form-group">
                                <label> إسم المتجر باللغة العربية </label>
                                <input type="text" class="form-control" placeholder="إسم المتجر باللغة العربية">
                            </div>

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

                            <div class="form-group">
                                <label> وصف المتجر باللغة العربية </label>
                                <textarea class="form-control" id="" rows="3" placeholder="وصف المتجر باللغة العربية"></textarea>
                            </div>

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




                            <!-- start Location -->

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

                            <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><!-- map-wrapper -->
                                <div class="custom-slider-range">

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

                                    <div class="output text-center mt-3">
                                        <span id="map-value"></span>
                                    </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="p-5 text-center">
                                    مش عارفين لسه هنا مفروض يكون في ايه
                                </div>

                            </div>







                            <!-- start Contact -->

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


                            <div class="form-group">
                                <label> Address (English) </label>
                                <input type="text" class="form-control" placeholder="Address (English)">
                            </div>

                            <div class="form-group">
                                <label> العنوان باللغة العربية </label>
                                <input type="text" class="form-control" placeholder="العنوان باللغة العربية">
                            </div>

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

                            <div class="form-group">

                                <label>Phone number</label>

                                <div class="relative">

                                    <input type="text" class="form-control input-with-country-code" placeholder="Phone Number" required="">

                                    <div class="country-code-container">
                                        <select class="d-none" name="country" id="country">
                                            <option value="001"> 001 </option>
                                            <option value="002"> 002 </option>
                                            <option selected value="003"> 003 </option>
                                        </select>
                                        <div class="dropdown">
                                            <button class="reset-btn dropdown-toggle" type="button" id="choose-country-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <img alt="" src="assets/img/flag-kuwait.png" /> +001
                                            </button>
                                            <div class="dropdown-menu choose-country-list" aria-labelledby="choose-country-btn">
                                                <a data-value="1" class="dropdown-item" href="#"><img alt="" src="assets/img/flag-kuwait.png" /> +001 </a>
                                                <a data-value="2" class="dropdown-item " href="#"><img alt="" src="assets/img/flag-ksa.png" /> +002 </a>
                                                <a data-value="3" class="dropdown-item " href="#"><img alt="" src="assets/img/flag-uae.png" /> +003 </a>
                                            </div>
                                        </div> <!-- dropdown -->
                                    </div><!-- country-code-container -->

                                </div>

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

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

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

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

                        <div class="end">

                            <div class="row">

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

                                <div class="col-6">
                                    <div class="flex-end w-100 gap-3">
                                        <a href="#" class="btn btn-primary-faded"> Save & Exit </a>
                                        <a class="btn btn-primary" data-toggle="modal" data-target="#edit-phone-otp-modal"> 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'; ?>










<!-- Modal -->
<div class="modal fade" id="edit-phone-otp-modal" tabindex="-1">

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

        <div class="modal-content">

            <div class="modal-body">


                <div class="d-block mb-4">
                    <h3 class="bold mb-2"> Enter your OTP </h3>
                    <p class="lead font-light"> Enter the 6 digits code that you received on <br /> your phone : <span class="bold"> +965237262562 </span> </p>
                </div>

                <div class="activate-inputs-container">

                    <div class="activate-inputs sm mb-3">
                        <input class="num1" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num2" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num3" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num4" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num5" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                        <input class="num6" type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
                    </div><!-- activate-inputs -->

                </div>

                <p class="text-center color-danger mb-2"> Please enter the correct digits </p>

                <div class="count-down-numbers-wrapper text-center mb-2">
                    <p class="lead m-0"> Send code Again (
                        <span class="black" id="minutes">02</span>
                        <span class="black" id="colon">:</span>
                        <span class="black" id="seconds">00</span>
                        )
                    </p>
                </div> <!-- count-down-numbers-wrapper -->

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

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