@extends('guard.layouts.app') @section('content') @section('title', 'Đặt hàng')
<div class="col-md-12">
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between py-3">
            <h5>Khởi tạo đơn hàng</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('api.create.order') }}" method="POST" lamtilo-request="order">
                @csrf
                <div class="row">
                    <!-- Nền tảng -->
                    <div class="col-md-4">
                        <div class="form-group mb-3">
                            <label class="form-label font-semibold">Nền tảng</label>
                            <select class="form-control font-semibold" id="platforms" name="platform">
                                @foreach (\App\Models\ServicePlatform::where('domain', env('APP_MAIN_SITE'))->where('status', 'active')->orderBy('order', 'asc')->get() as $platform)
                                    <option value="{{ $platform->id }}" data-image="{{ $platform->image }}">{{ $platform->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="mb-5" data-select2-id="select2-data-5542-4i82">
                            <label class="form-label" data-lang="Category">Phân loại</label>
                            <select name="service" id="service" class="form-select ">
                                <option value="0"
                                    data-html="<span class=''><i class='fa fa-thumbtack'></i>&ensp;Phân loại</span>">
                                    Phân loại
                                </option>
                            </select>


                        </div>
                    </div>
                </div>

                <input type="radio" id="serverserrvice" class="form-check-input" min="" max="" value="" price=""
                detail="" action="" hidden="" checked>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="mb-5">
                            <label class="form-label" data-lang="Service">Dịch vụ</label>
                            <select id="server_service" name="server_service" class="form-select">
                                <option value=""
                                    data-html="<span class=''><i class='fa fa-thumbtack'></i>&ensp;Dịch vụ</span>">Dịch
                                    vụ</option>
                            </select>
                        </div>
                        <div class="d-flex justify-content-center multi-rate mb-3">
					<i class="fa-solid fa-sack-dollar fa-bounce text-danger" aria-hidden="true"></i>
					<span data-lang="PRICE-PER" class="text-danger mx-2 fw-bolder">Giá Tiền Hiển Thị Trên Số Lượng 1</span>
					<i class="fa-solid fa-sack-dollar fa-bounce text-danger" aria-hidden="true"></i>
				</div>
                    </div>
                </div>





                <div class="mb-5">
                    <label class="form-label"><span data-lang="Thời gian hoàn thành trung bình">Thời gian hoàn thành
                            trung bình</span></label>
                    <input type="text" class="form-control ipt-avg-time" disabled="disabled" value="" name="timetb">
                    <span class="form-text fst-italic">* <span data-lang="Average time description">Thời gian trung bình hoàn thành số lượng 1000 của 10 đơn hàng gần nhất</span></span>
                </div>
                <div class="mb-5">
                    <label class="form-label" data-lang="Link">Link</label>
                    <input type="text" class="form-control ipt-link" name="link_order">
                </div>
                <div class="mb-5 "  id="quantity_type" style="display: none;">
                    <label class="form-label"><span data-lang="Quantity">Số lượng</span></label>
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" name="quantity"
                            placeholder="From 50 to 1000"
                            inputmode="text" id="quantityInput">
                        <span class="input-group-text fw-bold text-primary charge" id="quantity_amount"> 0 VND</span>
                    </div>
                </div>

                <div class="mb-5 "  id="minutes_type" style="display: none;">
                    <label class="form-label"><span data-lang="Quantity">Số phút</span></label>
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" name="minutes">

                    </div>
                </div>
                <div class="mb-5 reactions" id="reaction_type" style="display: none;">
                    <label class="form-label" data-lang="Comments (1 per line)">Cảm xúc</label>
                    <div class="">
                    <div class="form-check form-check-inline">
                            <label class="form-check-label " for="reaction0">
                                <input class="form-check-input checkbox d-none" type="radio"
                                    data-prices="101" id="reaction0" name="reaction"
                                    value="like" checked=""><img
                                    src="/assets/images/reaction/like.png" alt="image"
                                    class="d-block ml-2 rounded-circle" width="30">
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <label class="form-check-label " for="reaction1">
                                <input class="form-check-input checkbox d-none" type="radio"
                                    data-prices="100" id="reaction1" name="reaction"
                                    value="love"><img src="/assets/images/reaction/love.png"
                                    alt="image" class="d-block ml-2 rounded-circle"
                                    width="30">
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <label class="form-check-label " for="reaction2">
                                <input class="form-check-input checkbox d-none" type="radio"
                                    data-prices="100" id="reaction2" name="reaction"
                                    value="care"><img src="/assets/images/reaction/care.png"
                                    alt="image" class="d-block ml-2 rounded-circle"
                                    width="30">
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <label class="form-check-label " for="reaction3">
                                <input class="form-check-input checkbox d-none" type="radio"
                                    data-prices="100" id="reaction3" name="reaction"
                                    value="haha"><img src="/assets/images/reaction/haha.png"
                                    alt="image" class="d-block ml-2 rounded-circle"
                                    width="30">
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <label class="form-check-label " for="reaction4">
                                <input class="form-check-input checkbox d-none" type="radio"
                                    data-prices="100" id="reaction4" name="reaction"
                                    value="wow"><img src="/assets/images/reaction/wow.png"
                                    alt="image" class="d-block ml-2 rounded-circle"
                                    width="30">
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <label class="form-check-label " for="reaction6">
                                <input class="form-check-input checkbox d-none" type="radio"
                                    data-prices="100" id="reaction6" name="reaction"
                                    value="sad"><img src="/assets/images/reaction/sad.png"
                                    alt="image" class="d-block ml-2 rounded-circle"
                                    width="30">
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <label class="form-check-label " for="reaction7">
                                <input class="form-check-input checkbox d-none" type="radio"
                                    data-prices="100" id="reaction7" name="reaction"
                                    value="angry"><img
                                    src="/assets/images/reaction/angry.png" alt="image"
                                    class="d-block ml-2 rounded-circle" width="30">
                            </label>
                        </div>
                </div></div>

                <div class="mb-5 " id="speed_type" style="display: none;">
                    <label class="form-label" data-lang="speeds (1 per line)">Tốc độ</label>
                    <div class="">
                                                        <div class="mb-2">
                                                            <div class="form-check"> <input type="radio" id="speed1" class="form-check-input"
                                                        onchange="bill()" name="speed" value="1" price="0"><label class="form-check-label" for="speed1">Nhanh
                                                                    (lên nhanh thì sẽ bị
                                                                    nhanh tụt nhé.)</label></div>
                                                        </div>
                                                        <div class="mb-2">
                                                            <div class="form-check"><input type="radio" id="speed2" class="form-check-input"
                                                        onchange="bill()" name="speed" value="0" price="0"><label class="form-check-label" for="speed2">Chậm (nên chọn cho ổn định,
                                                                    sẽ không
                                                                    chậm lắm đâu nhé.)</label></div>
                                                        </div>
                                                    </div>
                </div>
                <div class="mb-5 " id="comment_type" style="display: none;">
                    <label class="form-label" data-lang="Comments (1 per line)">Bình luận (1 cmt 1 dòng)</label>
                    <textarea class="form-control txa-comment" rows="8" name="comment" ></textarea>
                </div>

                <div class="col mb-5">
                    <button type="submit" class="btn btn-primary btn-icon w-100" data-lang="Submit">Đặt Hàng</button>
                </div>
                </form>

            </div>

        </div>
    </div>
    <div class="col-lg-5">
        <div class="card card-flush  mb-5 border border-primary">
            <div class="card-body div-choose-service text-primary text-center"><span class="fs-3 fw-bold"
                    name="name_sv"></span></div>
        </div>
        <div class="row summary"></div>
        <div class="card card-flush  border border-primary">
            <div class="card-body div-description">
                <p name="description"></p>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-quantity-discount" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-4">
                <h5 class="modal-title" data-lang="Quantity Discount">Quantity Discount</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-0">
                <table class="table table-hover table-striped rounded align-middle gy-2 gs-5">
                    <thead>
                        <tr class="">
                            <th data-lang="Quantity">Quantity</th>
                            <th data-lang="Discount">Discount</th>
                            <th data-lang="New rate">New rate</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>





@endsection
@section('script')

@endsection