@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" />

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

<!-- Time picker css-->
<link href="{{URL::asset('assets/plugins/time-picker/jquery.timepicker.css')}}" rel="stylesheet" />

<!-- Date Picker css-->
<link href="{{URL::asset('assets/plugins/spectrum-date-picker/spectrum.css')}}" rel="stylesheet" />

<!-- 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')}}">



@endsection

@section('content')

<!-- page-header -->
<div class="page-header">
	<ol class="breadcrumb">
		<li class="breadcrumb-item">สินค้า</li>
        <li class="breadcrumb-item"><a href="{{ route('admin.product.relate.index') }}">สินค้าที่เกี่ยวข้อง</a></li>
		<li class="breadcrumb-item active" aria-current="page" data-sidebar="{{ route('admin.product.relate.index') }}">{{ !empty($product['data']->id) ? 'แก้ไขสินค้าที่เกี่ยวข้อง' : 'เพิ่มสินค้าที่เกี่ยวข้อง' }}</li>
	</ol>
</div>
<!-- End page-header -->

<!-- row -->
<div class="row">
	<div class="col-md-12">

		<div class="card">
			<div class="card-header pb-0">
				{{-- <h3 class="mb-0 card-title">ฟอร์มสินค้าที่เกี่ยวข้อง</h3> --}}
			</div>
			<div class="card-body">
				<form id="relate_frm" name="relate_frm" method="POST" onsubmit="setSaveProductRelate(); return false;" enctype="multipart/form-data" >
					@csrf
					<input type="hidden" name="id" value="{{ !empty($relate->id) ? $relate->id : '0' }}">
					<!-- tab -->
					<div class="tab_wrapper" id="product-relate-tab">
						<!-- Tabs -->
						<ul class="tab_list">
							<li class=""><img style="height: 16px;" src="{{ URL::asset('assets/images/flags/th.svg') }}" ></li>
							<li><img style="height: 16px;" src="{{ URL::asset('assets/images/flags/gb.svg') }}" ></li>
							<li>รายการสินค้า</li>
						</ul>
						<div class="content_wrapper">
							<!-- tab th -->
							<div class="tab_content active">
								<div class="card-body">
									<div class="row">
										
										<div class="col-md-12">
											<div class="form-group">
												<label class="form-label">ชื่อ (TH)</label>
												<input type="text" class="form-control" name="name_th" placeholder="ชื่อ" value="{{ !empty($relate->name_th) ? $relate->name_th :'' }}">
											</div>
										</div>
										
									</div>
								</div>
							</div>
							<!-- .tab th  -->
							<!-- tab en -->
							<div class="tab_content">
								<div class="card-body">
									<div class="row">
										
										<div class="col-md-12">
											<div class="form-group">
												<label class="form-label">ชื่อ (EN)</label>
												<input type="text" class="form-control" name="name_en" placeholder="ชื่อ" value="{{ !empty($relate->name_en) ? $relate->name_en :'' }}">
											</div>
										</div>
										
									</div>	
								</div>
							</div>
							<!-- .tab en -->

                            <!-- tab en -->
							<div class="tab_content">
								<div class="card-body">
									<div class="row">
										
										<div class="col-md-12">
                                            <div class="form-group">
                                                <label class="form-label">รายการสินค้า</label>
                                                <ul id="selected_products">
                                                    @if(!empty($relate['products']))
                                                    @foreach($relate['products'] as $product)
                                                                                                        <li id="added_product_{{$product->products[0]->id}}" class="list-group-item selected-product" data-id="{{$product->products[0]->id}}">
                                                    <div class="label-image"><img src="{{$img_src}}" /></div>
                                                    <div class="label-name"><span>{{$product->products[0]->name_th}} ({{$product->products[0]->id}})</span><span>Code :: {{$product->products[0]->code}}</span></div>
                                                    <a class="btn btn-outline-danger remove-selected-product" id="btn_added_{{$product->products[0]->id}}" onclick="removeSelectProducts({{$product->products[0]->id}})" href="javascript:void(0);"><i class="fa fa-trash"></i></a>
                                                    </li>
                                                    @endforeach
                                                    @endif
                                                </ul>
                                                <button type="button" onclick="showUnselectProducts();" class="btn btn-success mt-4"><i class="fa fa-add"></i> เพิ่มสินค้าในรายการ</button>
                                            </div>
                                        </div>
										
									</div>	
								</div>
							</div>
							<!-- .tab en -->
                            
						</div>
					</div>
					<!-- .tab -->

                    <div class="col-md-12">
                        <div class="row">

                            <!-- status -->
                            <div class="col-md-12 pt-4">
                                <div class="form-group">
                                    <label class="form-label">สถานะ</label>
                                    <div class="form-check form-check-inline">
                                        @if ( empty($relate->status) || $relate->status == 1  )
                                        <input class="form-check-input" type="radio" name="status" id="status_enable" value="1" checked="checked">
                                        @else
                                        <input class="form-check-input" type="radio" name="status" id="status_enable" value="1" >
                                        @endif
                                        <label class="form-check-label" for="status_enable">เปิด</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        @if ( !empty($relate->status) && $relate->status != 1  )
                                        <input class="form-check-input" type="radio" name="status" checked="checked" id="status_disable" value="0">
                                        @else
                                        <input class="form-check-input" type="radio" name="status" id="status_disable"  value="0">
                                        @endif
                                        <label class="form-check-label" for="status_disable">ปิด</label>
                                    </div>
                                </div>
                            </div>
                            <!-- .status -->

                            <div class="col-md-12 ">
                                <div class="form-group mb-1">
                                    <div class="btn-list">
                                        <button type="submit" class="btn btn-primary"><i class="fa fa-save mr-1"></i> บันทึก</button>
                                        <button onclick="mwz_redirect('{{ route('admin.product.relate.index') }}');" type="button" class="btn btn-warning"><i class="fa fa-undo mr-1" aria-hidden="true"></i> ย้อนกลับ</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    
				</form>
			</div>
		</div>
	</div>
</div>
<!-- .row -->	

<div id="ModalUnselectProducts" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">สินค้า</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table id="unselect-product-datatable" class="table table-bordered key-buttons text-nowrap" >
                        <thead>
                            <tr>
                                <th class="border-bottom-0" width="5%">id</th>
                                <th class="border-bottom-0" width="30%">รูป</th>
                                <th class="border-bottom-0" width="60%">ชื่อ</th>
                                <th class="border-bottom-0" width="5%">เพิ่ม</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                {{-- <button type="button" class="btn btn-primary">Confirm</button> --}}
            </div>
        </div>
    </div>
</div>

@endsection('content')

@section('scripts')

<style>
    ul#selected_products {
        display: inline-block;
        width: 100%
    }
    li.selected-product {
        width: 32%;
        display: inline-flex;
    }
    .label-image{
        width: 20%;
        display: inline-flex;
    }
    .label-image > img,.product-image > img {
        height: 40px;
    }
    .label-name {
        display: inline-block;
        padding: 0 10px;
        width: 75%;
    }
    .label-name > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .label-name span{
        display: block;
    }
    a.remove-selected-product {
        float: right;
        padding: 2px 8px;
        line-height: 1.5;
        height: 30px;
        margin-top: 5px;
    }
</style>

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

<!-- sortable -->
<script src="{{URL::asset('assets/plugins/sortable/Sortable.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>

<!--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>

<!--tinymce js-->
<script src="{{URL::asset('assets/plugins/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/tinymce/tinymce.min.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>

<!-- tab -->
<script src="{{URL::asset('assets/plugins/tabs/jquery.multipurpose_tabcontent.js')}}"></script>
<link href="{{URL::asset('assets/plugins/tabs/tabs-style.css')}}" rel="stylesheet" />

<!-- google map picker -->
<script src="{{URL::asset('assets/plugins/google-place-picker/PlacePicker.js')}}"></script>

<!-- multifile upload -->
{{-- <script src="{{URL::asset('assets/plugins/plupload-2.3.7/js/plupload.full.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/plupload-2.3.7/js/jquery.ui.plupload/jquery.ui.plupload.min.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/product.css') }}">
<script src="{{ mix('js/product.js')  }}"></script>

@endsection