@extends('layouts.site.master')
@section('content')
<div class="container">
    <div class="row mx-0 mt-5 w-100">
        @include('site.panel.sidebar')
        <div class="col-9 p-2">
            <div class="p-2 shadow-sm bg-white main-radius">
                <div class="p-2">
                    <p class="bold side-title position-relative max-w">
                        افزودن سفارش
                    </p>
                </div>
                <div class="row m-0 w-100">
                    <div class="col-4 p-2">
                        <label class="text-start w-100 font-14 mb-1 dark-gray light">
                            نوع مدیریت
                        </label>
                        <div class="position-relative">
                            <select class="login-input font-13 pointer border main-radius dark-gray w-100" id="exampleSelect">
                                <option value="1">با مدیریت</option>
                                <option value="2">بدون مدیریت</option>
                            </select>
                            <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2" src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">
                        </div>
                    </div>
                    <div class="col-4 p-2">
                        <label class="text-start w-100 font-14 mb-1 dark-gray light">
                            انتخاب اکانت
                        </label>
                        <div class="position-relative">
                            <select class="login-input font-13 pointer border main-radius dark-gray w-100" id="exampleSelect">
                                <option value="1">اکانت قبلی</option>
                                <option value="2">ساخت اکانت جدید</option>
                            </select>
                            <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2" src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">
                        </div>
                    </div>
                    <div class="col-4 p-2">
                        <label class="text-start w-100 font-14 mb-1 dark-gray light">
                            نام حساب
                        </label>
                        <div class="position-relative">
                            <input class="w-100 main-radius border login-input font-13" placeholder="مثلا: اشتراک بلند مدت" type="text">
                        </div>
                    </div>
                    <div class="col-4 p-2">
                        <label class="text-start w-100 font-14 mb-1 dark-gray light">
                            مبلغ شارژ<span class="ms-1 mint-green">(تومان)</span>
                        </label>
                        <div class="position-relative">
                            <input class="w-100 main-radius border login-input font-13" placeholder="مثلا: ۱۸۹,۰۰۰ تومان" type="text">
                        </div>
                    </div>
                    <div class="col-4 p-2">
                        <div class="row m-0 w-100">
                            <div class="col-4 p-0">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    تبدیل<span class="ms-1 mint-green">(دلار)</span>
                                </label>
                                <div class="position-relative">
                                    <select class="login-input font-13 pointer border main-radius dark-gray w-100" id="exampleSelect">
                                        <option value="1">دلار</option>
                                        <option value="2">درهم</option>
                                        <option value="2">ین</option>
                                        <option value="2">پوند</option>
                                    </select>
                                    <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2" src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">
                                </div>
                            </div>
                            <div class="col-4 p-0">
                                <label class="text-white w-100 font-14 mb-1 light">
                                    cv
                                </label>
                                <div style="height: 47.5px;" class="align-content-center">
                                    <i class="bi-arrow-left font-18 d-flex justify-content-center light-gray opacity-50"></i>
                                </div>
                            </div>
                            <div class="col-4 p-0">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    به<span class="ms-1 mint-green">(تومان)</span>
                                </label>
                                <div class="position-relative">
                                    <select class="login-input font-13 pointer border main-radius dark-gray w-100" id="exampleSelect">
                                        <option selected value="1">تومان</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-4 p-2">
                        <label class="text-white w-100 font-14 mb-1 light">
                            cv
                        </label>
                        <p class="m-0 align-content-center text-center font-15 border main-radius" style="height: 47.5px;">
                            ۱۷۸,۸۹۰,۰۰۰ <span class="bold mint-green ms-1 font-12">تومان</span>
                        </p>
                    </div>
                    <div class="col-12 p-2">
                        <p class="font-12 lh-lg m-0 light-gray light">
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می </p>
                    </div>
                </div>
                <div class="p-2">
                    <p class="bold side-title position-relative max-w">
                        نحوه پرداخت
                    </p>
                </div>
                <div class="row m-0 w-100">
                    <div class="col-6 p-2">
                        <label class="active-pay pointer w-100 border main-radius p-3 position-relative" for="radioOption">
                            <i class="bi-globe Charcoal-gray fs-3 d-flex justify-content-center"></i>
                            <p class="mt-3  mb-0 font-14 Charcoal-gray text-center">
                                پرداخت اینترنتی
                            </p>
                            <input class="pay-radio opacity-0 d-none" type="radio" id="radioOption" name="radioGroup">
                            <i class="bi-check-circle-fill font-18 d-flex justify-content-center mint-green mt-3"></i>
                        </label>
                    </div>
                    <div class="col-6 p-2">
                        <label class="bg-body pointer w-100 border main-radius p-3 pay-bef-af position-relative" for="radioOption">
                            <i class="bi-credit-card Charcoal-gray fs-3 d-flex justify-content-center"></i>
                            <p class="mt-3  mb-0 font-14 Charcoal-gray text-center">
                                کارت به کارت
                            </p>
                            <input class="pay-radio opacity-0 d-none" type="radio" id="radioOption" name="radioGroup">
                            <i class="bi-dot font-18 d-flex justify-content-center text-white mt-3"></i>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection