@extends('layouts.app')

@section('styles')

    <!-- Data table css -->
    <link href="{{URL::asset('assets/plugins/datatable/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css')}}"  rel="stylesheet">
    <link href="{{URL::asset('assets/plugins/datatable/responsivebootstrap4.min.css')}}" rel="stylesheet" />

    <!---Tabs css-->
    <link href="{{ URL::asset('assets/plugins/tabs/tabs-style.css') }}" rel="stylesheet" />

    <!--Select2 css -->
    <link href="{{ URL::asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />

    <!-- Datetime Picker css-->
    <link rel="stylesheet" href="{{ URL::asset('assets/plugins/datetime-picker/bootstrap-datetimepicker.min.css') }}">

    <!-- File Uploads css-->
    <link href="{{ URL::asset('assets/plugins/fileuploads/css/dropify.css') }}" rel="stylesheet" type="text/css" />

    <!--Mutipleselect css-->
    <link rel="stylesheet" href="{{ URL::asset('assets/plugins/multipleselect/multiple-select.css') }}">

    <!-- Jquery UI -->
    <link rel="stylesheet" href="{{ URL::asset('assets/js/jquery-ui.css') }}">

    <style>
        .vat-label-error{
          color: red !important;
        }
        input[type="text"]::placeholder {
            color: #babcc4; /* Replace with the color you want */
        }
        .sortable>div { float: left; }
		.draggable { 
			width: auto;
		    height: 35px;
		    padding: 0.5em;
		    background: #556270;
		    color: white;
		    margin: 5px;
		    text-align: center;
		    cursor: move;
		}
    </style>

@endsection

@section('content')

    <!-- page-header -->
    <div class="page-header">
        <ol class="breadcrumb">
            <!-- breadcrumb -->
            <li class="breadcrumb-item"><a href="{{ route('admin.domain.domain.upload') }}">หน้าหลัก</a></li>
            <li class="breadcrumb-item active" aria-current="page"><a
                    href="{{ route('admin.domain.domain.index') }}">Domain</a></li>
            <li class="breadcrumb-item active" aria-current="page">Domain Sort Form</li>
        </ol>

        <div class="ml-auto">

            <div class="input-group">

                <a href="{{ route('admin.domain.domain.index') }}" class="btn btn-primary text-white mr-2 btn-sm" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Back to domain price">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i> กลับไปหน้าราคาโดเมน
                </a>

            </div>

        </div>

    </div>
    <!-- End page-header -->

    <!-- row -->
    <div class="row">

        <div class="col-md-12">
            <form id="data-form" name="data-form" onsubmit="setSaveSort(); return false;" method="POST" enctype="multipart/form-data">
                @csrf

                <input type="hidden" id="id" name="id" value="{{ !empty($data->id) ? $data->id : '0' }}">
                <input type="hidden" id="domain_order" name="domain_order" value="{{ implode(',',$domain_sort) }}">

                <!-- Domain Information -->
                <div class="card">
                    <div class="card-header pb-0">
                        <h3 class="card-title">Domain Sort Information</h3>
                    </div>
                    <div class="card-body">
                        <div class="panel panel-primary">
                            <div class="row">


                                <div class="col-md-12" style="margin-top:10px;">
                                    <div class="form-group">
                                        <label class="form-label">จัดลำดับโดเมนที่แสดง กรุณาคลิกและลากโดเมนไปยังตำแหน่งที่ต้องการ โดเมนจะเรียงจากซ้ายไปขวา</label>
                                        <div class="sortable col-md-12">
											@foreach ($domain_sort as $v)
												<div id="{{ $v }}" class="draggable"  >{{ $v }}</div>
											@endforeach 
									    </div>
                                    </div>
                                </div>

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

                <!-- ! Payment Information -->
               
                <div class="col-md-12" style="margin-top:30px;">
                    <div class="form-group">
                        <div class="btn-list">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>
                            บันทึก</button>
                            <button onclick="mwz_redirect('{{ route('admin.domain.domain.index') }}');"
                            type="button" class="btn btn-warning"><i class="fa fa-undo"
                            aria-hidden="true"></i>ยกเลิก</button>
                        </div>
                    </div>
                </div>

            </div>

        </form>

    </div>

</div>
<!-- .row -->
        
@endsection('content')

@section('scripts')

   
    <!--Jquery Sparkline js-->
    <script src="{{ URL::asset('assets/plugins/vendors/jquery.sparkline.min.js') }}"></script>

    <!-- File uploads js -->
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify-demo.js') }}"></script>

    <!--Select2 js -->
    <script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/form-elements.js') }}"></script> -->

    <!--MutipleSelect js-->
    <script src="{{ URL::asset('assets/plugins/multipleselect/multiple-select.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/multipleselect/multi-select.js') }}"></script>

    <!--ckeditor js-->
    <script src="{{ URL::asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/formeditor.js') }}"></script> -->

    <!-- Datetimepicker js -->
    <script src="{{ URL::asset('assets/plugins/datetime-picker/moment.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datetime-picker/bootstrap-datetimepicker.min.js') }}"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{URL::asset('assets/plugins/datatable/js/jquery.dataTables.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/jszip.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/pdfmake.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/vfs_fonts.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.html5.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.print.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/dataTables.responsive.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/responsive.bootstrap4.min.js')}}"></script>
    <!-- <script src="{{URL::asset('assets/plugins/datatable/datatable-2.js')}}"></script> -->
    
    <!-- Notifications js -->
    <link href="{{URL::asset('assets/plugins/notify-growl/css/jquery.growl.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/notify-growl/css/notifIt.css')}}" rel="stylesheet" />
    <script src="{{URL::asset('assets/plugins/bootbox/bootbox.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/rainbow.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/jquery.growl.js')}}"></script>

    <!-- validator js -->
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>

    <!-- Tabs js -->
    <script src="{{ URL::asset('assets/plugins/tabs/jquery.multipurpose_tabcontent.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/plugins/tabs/tabs.js') }}"></script> -->

    <script src="{{ URL::asset('assets/plugins/typeahead/bootstrap3-typeahead.min.js') }}"></script>

    <!-- JSColor -->
    <script src="{{ URL::asset('assets/js/jscolor.js') }}"></script>

    <!-- Jquery UI -->
    <script src="{{ URL::asset('assets/js/jquery-ui.js') }}"></script>

    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js')  }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/domain.css') }}">
    <script src="{{ mix('js/domain.js') }}"></script>

    <script>
    	$(function(){
	    	$(".sortable").sortable({
				stop: function(event, ui) {
				    var idsInOrder = $(".sortable").sortable('toArray');
				    console.log(idsInOrder);
				    $('#domain_order').val(idsInOrder);
				}
			});
		});
    </script>

@endsection