<?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 done">
                                    <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 done">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> target audience </span>
                                    <span class="show-sm"> information</span>
                                </a>

                                <a href="profile-create-store-3.php" class="step current">
                                    <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">

                            <div class="form-group mb-3">

                                <label class="main-label"> Account type </label>

                                <div class="custom-radio-wrapper">

                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input" checked="">
                                        <label class="custom-control-label" for="customRadioInline1">personal</label>
                                    </div>

                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioInline2">Corporate</label>
                                    </div>

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

                            </div>


                            <div class="form-group mb-3">

                                <label> Payment mode </label>

                                <select class="form-control mb-0">
                                    <option> 1 </option>
                                    <option> 2 </option>
                                    <option> 3 </option>
                                </select>
                            </div> <!-- form-group -->


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

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

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

                            <div class="form-group">
                                <label> IBan Code / Swift Code </label>
                                <input type="text" class="form-control" placeholder="IBan Code / Swift Code">
                            </div>


                            <div class="mb-3">
                                <p class="lead font-medium mb-0"> Documents </p>
                                <p class="m-0 color-gray font-light small"> Make sure the photo size is 250 * 250 PX , Allowed formats ( PNG - JPEG ) , Maximum 1 photo </p>
                            </div>

                            <div class="row">

                                <div class="col-lg-4 mb-3">
                                    <div class="upload-image-with-inside-thumbnail-wrapper upload-wrapper">
                                        <label for="upload-image1" class="cursor-pointer w-100 m-0">
                                            <img id="image-preview" src="assets/img/bg-white.svg" alt="Upload" class="img-fluid w-100 upload-thumbnail">

                                            <div class="upload-side">
                                                <div class="flex-center flex-column gap-1 color-primary">
                                                    <p class="mb-1 lead"> Civil Id front Copy </p>
                                                    <i class="icon icon-image icon-xxxl"></i>
                                                </div>
                                            </div>

                                        </label>
                                        <input type="file" id="upload-image1" class="upload-input" accept="image/*" hidden>
                                    </div> <!-- upload-image-with-inside-thumbnail-wrapper -->
                                </div> <!-- col-lg-4 -->

                                <div class="col-lg-4 mb-3">
                                    <div class="upload-image-with-inside-thumbnail-wrapper">
                                        <label for="upload-image2" class="cursor-pointer w-100 m-0">
                                            <img id="image-preview" src="assets/img/bg-white.svg" alt="Upload" class="img-fluid w-100 upload-thumbnail">

                                            <div class="upload-side">
                                                <div class="flex-center flex-column gap-1 color-primary">
                                                    <p class="mb-1 lead"> Civil Id back Copy </p>
                                                    <i class="icon icon-image icon-xxxl"></i>
                                                </div>
                                            </div>

                                        </label>
                                        <input type="file" id="upload-image2" class="upload-input" accept="image/*" hidden>
                                    </div> <!-- upload-image-with-inside-thumbnail-wrapper -->
                                </div> <!-- col-lg-4 -->

                                <div class="col-lg-4 mb-3">
                                    <div class="upload-image-with-inside-thumbnail-wrapper">
                                        <label for="upload-image3" class="cursor-pointer w-100 m-0">
                                            <img id="image-preview" src="assets/img/bg-white.svg" alt="Upload" class="img-fluid w-100 upload-thumbnail">

                                            <div class="upload-side">
                                                <div class="flex-center flex-column gap-1 color-primary">
                                                    <p class="mb-1 lead"> Memorandum of Association </p>
                                                    <i class="icon icon-image icon-xxxl"></i>
                                                </div>
                                            </div>

                                        </label>
                                        <input type="file" id="upload-image3" class="upload-input" accept="image/*" hidden>
                                    </div> <!-- upload-image-with-inside-thumbnail-wrapper -->
                                </div> <!-- col-lg-4 -->

                                <div class="col-lg-4 mb-3">
                                    <div class="upload-image-with-inside-thumbnail-wrapper">
                                        <label for="upload-image4" class="cursor-pointer w-100 m-0">
                                            <img id="image-preview" src="assets/img/bg-white.svg" alt="Upload" class="img-fluid w-100 upload-thumbnail">

                                            <div class="upload-side">
                                                <div class="flex-center flex-column gap-1 color-primary">
                                                    <p class="mb-1 lead"> Proof Document </p>
                                                    <i class="icon icon-image icon-xxxl"></i>
                                                </div>
                                            </div>

                                        </label>
                                        <input type="file" id="upload-image4" class="upload-input" accept="image/*" hidden>
                                    </div> <!-- upload-image-with-inside-thumbnail-wrapper -->
                                </div> <!-- col-lg-4 -->

                                <div class="col-lg-4 mb-3">
                                    <div class="upload-image-with-inside-thumbnail-wrapper">
                                        <label for="upload-image5" class="cursor-pointer w-100 m-0">
                                            <img id="image-preview" src="assets/img/bg-white.svg" alt="Upload" class="img-fluid w-100 upload-thumbnail">

                                            <div class="upload-side">
                                                <div class="flex-center flex-column gap-1 color-primary">
                                                    <p class="mb-1 lead"> Authorized Signature </p>
                                                    <i class="icon icon-image icon-xxxl"></i>
                                                </div>
                                            </div>

                                        </label>
                                        <input type="file" id="upload-image5" class="upload-input" accept="image/*" hidden>
                                    </div> <!-- upload-image-with-inside-thumbnail-wrapper -->
                                </div> <!-- col-lg-4 -->



                            </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-store-4.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'; ?>