@extends('client.layouts.client')
@section('content')
@section('title', 'Đặt hàng')
 
<style>
    .ribbon {
        font-weight: 800; /* Chữ đậm hơn */
        font-size: 18px;
        color: #8000ff !important; /* Màu tím nổi bật */
        background-color: #f3e9ff !important; /* Nền tím nhạt (tuỳ chọn) */
        padding: 10px 20px;
        border-radius: 0.375rem;
        display: inline-block;
    }
</style>

<div class="row">
    <div class="col-lg-7">
        <div class="card  ">
            <div class="card-header">
                 <div class="ribbon ribbon-primary ribbon-clip">KHỞI TẠO ĐƠN HÀNG</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='fa fa-thumbtack'></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">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="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">Dịch vụ</label>
                                <select id="provider_server" name="provider_server" class="form-select"
                                    onchange="checkPriceLt()">
                                    <option value=""
                                        data-html="<span class=''><i class='fa fa-thumbtack'></i>&ensp;Dịch vụ</span>">
                                        Dịch
                                        vụ</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>


@endsection
@section('script')
    
<script src="/theme/lamtilo/services.js"></script>
   
<script src="/theme/lamtilo/order.js"></script>

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