@extends('guard.layouts.app')
@section('content')
@section('title', 'Đặt hàng Nhanh')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<div class="row">
    <div class="col-lg-7">
        <div class="card  ">
            <div class="card-header">
                <div class="ribbon ribbon-primary ribbon-clip">Đặt hàng Nhanh</div>
            </div>
            <div class="card-body">
                <form action="{{ route('api.create.order') }}" method="POST" lamtilo-request="order">
                    <div class="row" data-select2-id="select2-data-5407-kul0">
                        <div class="col-lg-4">
                            <div class="">
                                <label class="form-label" data-lang="Social media">Nền tảng</label>
                                <select id="social" name="social" class="form-select">
                                    <option value="0"
                                            data-html="<span class=''><i class='ph-duotone ph-package'></i>&ensp;Nền tảng</span>">
                                        Nền tảng
                                    </option>
                                    @foreach ($social as $item)
                                        <option value="{{ $item->id.'_' }}{{ $item->slug }}"
                                                data-html="<span class=''><img src='{{ $item->image }}' class='rounded' style='width: 20px; height: 20px; margin-right: 10px;' />{{ $item->name }}</span>">
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>

                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="" data-select2-id="select2-data-5542-4i82">
                                <label class="form-label" data-lang="Category">Dịch Vụ</label>
                                <select name="service" id="service" class="form-select ">
                                    <option value="0"
                                            data-html="<span class=''><i class='ph-duotone ph-hard-drives'></i>&ensp;Dịch Vụ</span>">
                                        Dịch Vụ
                                    </option>
                                </select>


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

                    <input type="hidden" name="provider_package" id="provider_package" value="">

                    <div class="row">

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



                            <div class="">
                                <label class="form-label" data-lang="Service">Máy Chủ</label>
                                <select id="provider_server" name="provider_server" class="form-select"
                                        onchange="checkPriceLt()">
                                    <option value=""
                                            data-html="<span class=''><i class='ph-duotone ph-atom'></i>&ensp;Máy Chủ</span>">
                                        Máy Chủ
                                        </option>
                                </select>
                            </div>
                        </div>
                    </div>






                    <div class="mb-3">
                        <label class="form-label" data-lang="Link">Link</label>
                        <input type="text" onchange="checkPriceLt()" class="form-control ipt-link" name="object_id"
                               id="object_id" placeholder="Nhập link hoặc ID tuỳ các máy chủ">
                    </div>

                    <div class=" mb-3">
                        <div class="">
                            <label class="form-label" data-lang="Link">Mã giảm giá(nếu có)</label>
                            <input type="text"  class="form-control ipt-link" name="voucher"
                                   id="voucher" placeholder="Nhập mã giảm giá(nếu có)">
                        </div>
                    </div>

                    <div class="mb-3 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="{{ asset('assets/pack-lamtilo/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="{{ asset('assets/pack-lamtilo/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="{{ asset('assets/pack-lamtilo/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="{{ asset('assets/pack-lamtilo/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="{{ asset('assets/pack-lamtilo/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="{{ asset('assets/pack-lamtilo/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="{{ asset('assets/pack-lamtilo/reaction/angry.png') }}" alt="image"
                                         class="d-block ml-2 rounded-circle" width="30">
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class=" " 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-3" 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" onkeyup="checkPriceLt()" class="form-control ipt-quantity" name="quantity"

                                   placeholder="Số lượng cần lên" inputmode="text" id="quantityInput">
                            <span class="input-group-text fw-bold text-primary charge amount_te" id="quantity_amount"> 0VND
                            </span>
                        </div>
                    </div>



                    <div class="form-group mb-3 comments" id="comments_type" style="display: none;">
                        <label for="comments" class="form-label">
                            <p>Nội dung bình luận: <span id="counter_comment" class="badge bg-success py-1">0</span></p>

                            <div class="alert alert-danger text-danger mt-1 mb-0" id="">
                                - Mỗi comment một dòng<br>- Các ngôn từ bị cấm: dm|đm|đ m|d m|địt mẹ|dit
                                me|lol|lừađảo|conchó|trảtiền|mấtdạy|lừa đảo| con chó|trả tiền|mất dạy|lua dao|con
                                cho|tra tien|mat day
                            </div>
                        </label>
                        <textarea class="form-control" name="comments" id="comments" rows="5"
                                  placeholder="Nhập nội dung bình luận" onkeyup="checkPriceLt()"></textarea>
                    </div>

                    <div class="form-group mb-3 minute" id="minute_type" style="display: none;">
                        <label for="minute" class="form-label">
                            <p>Số phút</p>
                        </label>
                        <select name="minutes" class="form-select" onchange="checkPriceLt()">
                            <option value="15">15 phút</option>
                            <option value="30">30 phút</option>
                            <option value="60">60 phút</option>
                            <option value="90">90 phút</option>
                            <option value="120">120 phút</option>
                            <option value="150">150 phút</option>
                            <option value="180">180 phút</option>
                            <option value="210">210 phút</option>
                            <option value="240">240 phút</option>
                            <option value="270">270 phút</option>
                            <option value="300">300 phút</option>
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-md-12" id="time_type" style="display: none;">
                            <div class="form-group mb-3">
                                <label for="duration" class="form-label">Thời gian:</label>
                                <select name="duration" id="duration" class="form-select" onchange="checkPriceLt()">
                                    <option value="7">7 Ngày</option>
                                    <option value="15">15 Ngày</option>
                                    <option value="30">30 Ngày</option>
                                    <option value="60">60 Ngày</option>
                                    <option value="90">90 Ngày</option>
                                    <option value="120">120 Ngày</option>
                                    <option value="150">150 Ngày</option>
                                    <option value="180">180 Ngày</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3" id="posts_type" style="display: none;">
                                <label for="posts" class="form-label">Số bài viết:</label>
                                {{-- <input type="number" class="form-control" id="posts" name="posts"
                                        onkeyup="checkPriceLt()" value="5" placeholder="Nhập thời gian"> --}}
                                <select name="posts" id="posts" class="form-select">

                                    <option value="5">5 Bài viết</option>
                                    <option value="10">10 Bài viết</option>
                                    <option value="20">20 Bài viết</option>
                                    <option value="30">30 Bài viết</option>
                                    <option value="40">40 Bài viết</option>
                                    <option value="50">50 Bài viết</option>
                                    <option value="60">60 Bài viết</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="form-group mb-3">
                        <label for="note" class="form-label">
                            Ghi chú:
                        </label>
                        <textarea class="form-control" name="note" id="note" rows="3"
                                  placeholder="Nhập ghi chú nếu cần"></textarea>
                    </div>


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

            </div>

        </div>
    </div>



    <div class="col-lg-5">
        <div class="card  ">
            <div class="card-body text-primary text-center"><span class="fs-6 fw-bold" id="name_sv" name="name_sv"  ></span></div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card  ">
                    <div class="card-body  text-center"><span class="fs-3 fw-bold" id="min" name="min"  ></span></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card  ">
                    <div class="card-body  text-center"><span class="fs-3 fw-bold" id="max" name="max"  ></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card " readonly="">
            <div class="card-body">
                <div id="description" name="description"></div>
            </div>

        </div>








    </div>

    <script src="/theme/lamtilo/services.js?t=123"></script>

    <script src="/theme/lamtilo/order.js?t=123"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        const confirmPayment = "{{ site('confirm_payment') }}";
    </script>

    @endsection
    @section('script')

@endsection