@extends('master.back')
@section('styles')
 
<link rel="stylesheet" href="{{asset('assets/back/css/select2.css')}}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Bootstrap Datetimepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- Bootstrap Datetimepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

@endsection


@section('content')
{{-- <script src="{{asset('assets/back/js/select2.js')}}"></script>
<link href="{{asset('assets/back/css/select2.css')}}" rel="stylesheet" /> --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div class="">

    <!-- Page Heading -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h3 class="mb-0 bc-title"><b>{{ __('แก้ไขโปรโมชั่นซื้อแถม') }}</b> </h3>
                <a class="btn btn-primary btn-sm" href="{{route('back.promotion.index2')}}"><i class="fas fa-chevron-left"></i> {{ __('Back') }}</a>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="row">
        <div class="col-lg-12">
            @include('alerts.alerts')
        </div>
    </div>
    <!-- Nested Row within Card Body -->
    <form  action="{{ route('back.promotion.edit2_submit') }}" method="POST" enctype="multipart/form-data">
        @csrf
        {{-- <div class="row">
            <div class="col-lg-12"> --}}
                <div class="card">
                    <div class="card-body"> 
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="hidden" name="promotion_buyget_id" value="{{ $pro->id }}">
                                    <label for="name">{{ __('รายละเอียด') }} *</label>
                                    <input type="text" name="Detail" class="form-control item-name" id="name" placeholder="{{ __('Enter Name') }}" value="{{ $pro->detail }}">
                                    {{-- <input type="hidden" name="type_" value="{{@$type_}}"> --}}
 
                                  
                                        <div class="row">
                                         
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                <label for="name">{{ __('วันที่เปิด') }} *</label>
                                                <input type="text" required class="form-control datetimepicker" name="start_date" value="{{$pro->start_date}}"  >
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                <label for="name">{{ __('วันที่ปิด') }} *</label>
                                                <input type="text" required class="form-control datetimepicker" name="end_date" value="{{$pro->end_date}}"   >
                                                </div>
                                            </div>
    
    
                                            
                                        </div>
                                    
                                   
 
                                   
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group pb-0 mb-0">
                                    <label class="d-block">{{ __('รูปภาพ') }} *</label>
                                    <div class="form-group pb-0 pt-0 mt-0 mb-0">
                                        <img class="admin-img lg" src="{{asset('assets/images/promotion2/'.$pro->photo)}}" >
                                    </div>
                                    <div class="form-group position-relative ">
                                        <label class="file">
                                            <input type="file"  accept="image" class="upload-photo" name="photo"
                                                id="file"  aria-label="File browser example">
                                            <span
                                                class="file-custom text-left">{{ __('Upload Image...') }}</span>
                                        </label>
                                        <br>
                                        <span class="mt-1 text-info">{{ __('Image Size Should Be 000 x 000. or square size') }}</span>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-body"> 
                        <div class="text-center">
                            <h3 class="mb-0 bc-title"><b>{{ __('รายละเอียดโปรโมชัน') }}</b> </h3>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12" >
                                <div class="text-right">
                                    <button type="button" class="btn btn-primary" onclick="addentry()" >{{ __('เพิ่ม') }}</button>
                                  </div>
                                <table class="table table-bordered table-striped" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>{{ __('หัวข้อการซื้อ') }}</th>
                                            <th>{{ __('รายการสินค้า') }}</th>
                                            <th>{{ __('หน่วยการซื้อ') }}</th>
                                            <th>{{ __('จำนวนเงิน/จำนวนชิ้น') }}</th>
                                            <th>{{ __('รายการของแถม') }}</th>
                                            <th>{{ __('จำนวนชิ้นของแถม') }}</th>
                                            <th>{{ __('จัดการ') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody">
                                        @foreach ($pro_detail as $key => $item)
                                            <tr id='rows{{$key}}'>
                                                <td> 
                                                    <input type='hidden' name='id[]' value='{{$item->id}}'>
                                                    <select class='form-control' name='buy_type[]' id='buy_type_{{$key}}' onchange='change_type({{$key}})'>
                                                        <option value=''>โปรดเลือกหัวข้อการซื้อ</option>
                                                        <option value='category' {{ $item->buy_type == 'category' ? 'selected' : '' }}>Category</option>
                                                        {{-- <option value='sub_category' {{ $item->buy_type == 'sub_category' ? 'selected' : '' }}>Sub-Category</option> --}}
                                                        <option value='brand' {{ $item->buy_type == 'brand' ? 'selected' : '' }}>Brand</option>
                                                        {{-- <option value='chield' {{ $item->buy_type == 'chield' ? 'selected' : '' }}>Chield</option> --}}
                                                        <option value='items' {{ $item->buy_type == 'items' ? 'selected' : '' }}>รายชิ้น</option>
                                                    </select>
                                                </td> 
                                                <td> 
                                                    @if($item->buy_type != 'items')
                                                        <div id='product_element_{{$key}}'>
                                                            <select class='form-control select2' name='type_detail[]' id='type_detail_{{$key}}'>
                                                                <option value=''>โปรดเลือกหัวข้อการซื้อ</option>
                                                                @if ($item->buy_type == 'category')
                                                                    @foreach ($category as $category_item)
                                                                        <option value='{{$category_item->id}}' {{ $item->type_detail == $category_item->id ? 'selected' : '' }}>{{$category_item->name}}</option>
                                                                    @endforeach
                                                                @elseif ($item->buy_type == 'sub_category')
                                                                    @foreach ($sub_category as $sub_category_item)
                                                                        <option value='{{$sub_category_item->id}}' {{ $item->type_detail == $sub_category_item->id ? 'selected' : '' }}>{{$sub_category_item->name}}</option>
                                                                    @endforeach
                                                                @elseif ($item->buy_type == 'brand')
                                                                    @foreach ($brand as $brand_item)
                                                                        <option value='{{$brand_item->id}}' {{ $item->type_detail == $brand_item->id ? 'selected' : '' }}>{{$brand_item->name}}</option>
                                                                    @endforeach
                                                                @elseif ($item->buy_type == 'chield')
                                                                    @foreach ($chield as $chield_item)
                                                                        <option value='{{$chield_item->id}}' {{ $item->type_detail == $chield_item->id ? 'selected' : '' }}>{{$chield_item->name}}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                        <input type="hidden" name="product_search[]" value="">
                                                        <input type="hidden" name="product_search_id[]" value="">
                                                    @elseif($item->buy_type == 'items')
                                                        <input type="hidden" name="type_detail[]" value="">
                                                        <div id='auto_{{$key}}' >
                                                            <input type='text' class='form-control' id='product_search_{{$key}}' name='product_search[]' placeholder='พิมพ์ชื่อสินค้า 5 ตัวอักษร' onkeyup='product_search(event, {{$key}})' autocomplete='off' value='{{$item->productBuy->name}}'>
                                                            <input type='hidden' id='product_search_id_{{$key}}' name='product_search_id[]' value='{{$item->product_search}}'>
                                                        </div>
                                                    @endif
                                                </td>
                                                <td> 
                                                    <select class='form-control' name='baht_piece[]' id='baht_piece_{{$key}}'>
                                                        <option value=''>โปรดเลือกหน่วยการซื้อ</option>
                                                        <option value='price' {{ $item->baht_piece == 'price' ? 'selected' : '' }}>บาท</option>
                                                        <option value='qty' {{ $item->baht_piece == 'qty' ? 'selected' : '' }}>ชิ้น</option>
                                                    </select> 
                                                </td>
                                                <td>  <input type='number' class='form-control' name='buy_qty[]' id='buy_qty_{{$key}}' min='0' value='{{$item->buy_qty}}'></td>
                                                <td> 
                                                     
                                                    <input type='text' class='form-control' name='free_product[]' id='free_product_{{$key}}' placeholder='พิม์ชื่อสินค้า 5 ตัวอักษร' onkeyup='free_product(event, {{$key}})' autocomplete='off' value='{{@$item->productFree->name}}'>
                                                    <input type='hidden'  name='free_product_id[]' id='free_product_id_{{$key}}' value='{{$item->free_product}}'>
                                                </td>
                                                <td> <input type='number' class='form-control' name='free_qty[]' id='free_qty_{{$key}}' min='0' value='{{$item->free_qty}}'></td>
                                                <td> <button type='button' class='btn btn-danger' onclick='delentry({{$key}})'>ลบ</button></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <button type="submit" class="btn btn-primary">{{ __('Submit') }}</button>
                </div>
            {{-- </div>
        </div> --}}
    </form>
</div>
<style>
    #number_form {
        width: 80px;
    }
</style>
{{-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> --}}
   <!-- CSS สำหรับ jQuery UI -->

 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
   

 


<script>
    $('basic').select2({
        theme: "bootstrap"
    });
</script>


<script>
    var row = {{count($pro_detail)}};

    function addentry (){
        list = "<tr id='rows"+row+"'>";
        list += "<input type='hidden' class='form-control' name='id[]'  >";
        list += "<td> <select class='form-control' name='buy_type[]' id='buy_type_"+row+"' onchange='change_type("+row+")' >";
        list += "<option value=''>โปรดเลือกหัวข้อการซื้อ</option>";
        list += "<option value='category'>Category</option>";
        list += "<option value='sub_category'>Sub-Category</option>";
        list += "<option value='brand'>Brand</option>";
        list += "<option value='chield'>Chield</option>";
        list += "<option value='items'>รายชิ้น</option>";
        list += "</select></td>";

        list += "<td> <div id='product_element_"+row+"'>";
        list += "<select class='form-control select2' name='type_detail[]' id='type_detail_"+row+"'>";
        list += "<option value=''>โปรดเลือกหัวข้อการซื้อ</option>";
        list += "</select> </div>";

        list += "<div id='auto_"+row+"' style='display: none'>";
        list += "<input type='text' class='form-control' id='product_search_"+row+"' name='product_search[]' placeholder='พิมพ์ชื่อสินค้า 5 ตัวอักษร' onkeyup='product_search(event, "+row+")' autocomplete='off'>";
        list += "<input type='hidden' id='product_search_id_"+row+"' name='product_search_id[]'>";
        list += "</div></td>";

        list += "<td> <select class='form-control' name='baht_piece[]' id='baht_piece_"+row+"'>";
        list += "<option value=''>โปรดเลือกหน่วยการซื้อ</option>";
        list += "<option value='price'>บาท</option>";
        list += "<option value='qty'>ชิ้น</option>";
        list += "</select></td>";

        list += "<td> <input type='number' class='form-control' name='buy_qty[]' id='buy_qty_"+row+"' min='0' ></td>";
        list += "<td> <input type='text' class='form-control' name='free_product[]' id='free_product_"+row+"' placeholder='พิมพ์ชื่อสินค้า 5 ตัวอักษร' onkeyup='free_product(event, "+row+")' autocomplete='off'>";
        list += "<input type='hidden'  name='free_product_id[]' id='free_product_id_"+row+"' ></td>";
        list += "<td> <input type='number' class='form-control' name='free_qty[]' id='free_qty_"+row+"' min='0'></td>";
        list += "<td> <button type='button' class='btn btn-danger' onclick='delentry("+row+")'>ลบ</button></td>";
        list += "</tr>";

        $('#tbody').append(list);
        row++;
    }

    function change_type(id){
        var value = $('#buy_type_'+id).val();
        // $('#type_detail_'+id).html('');

        if(value == 'category'){
            $('#product_element_'+id).show();
            $('#auto_'+id).hide();
            $('#product_search_' +id).val('');
            let category = @json($category);
            let html = '';
                html += '<option value=""> โปรดเลือก category </option>';
            category.forEach(element => {
                html += '<option value="'+element.id+'">'+element.name+'</option>';
            });
            $('#type_detail_'+id).html(html);
        }else if(value == 'brand'){
            $('#product_element_'+id).show();
            $('#auto_'+id).hide();
            $('#product_search_' +id).val('');

            let brand = @json($brand);
            let html = '';
                html += '<option value=""> โปรดเลือก brand </option>';
            brand.forEach(element => {
                html += '<option value="'+element.id+'">'+element.name+'</option>';
            });
            $('#type_detail_'+id).html(html);
        }else if(value == 'chield'){
            $('#product_element_'+id).show();
            $('#auto_'+id).hide();
            $('#product_search_' +id).val('');

            let chield = @json($chield);
            let html = '';

            html += '<option value=""> โปรดเลือก chield </option>';
            chield.forEach(element => {
                html += '<option value="'+element.id+'">'+element.name+'</option>';
            });
            $('#type_detail_'+id).html(html);
        }else if(value == 'sub_category'){
            $('#product_element_'+id).show();
            $('#auto_'+id).hide();
            $('#product_search_' +id).val('');

            let sub_category = @json($sub_category);
            let html = '';
            html += '<option value=""> โปรดเลือก sub_category </option>';
            sub_category.forEach(element => {
                html += '<option value="'+element.id+'">'+element.name+'</option>';
            });
            $('#type_detail_'+id).html(html);
        }else if(value == 'items'){
            $('#product_element_'+id).hide();
            $('#auto_'+id).show();
            $('#type_detail_'+id).val('');
        }else{
            $('#product_element_'+id).show();
            $('#auto_'+id).hide();
            $('#product_search_' +id).val('');
            $('#type_detail_'+id).val('');
        }
    }

    function product_search (e, id) {
        var value = e.target.value;
        $('#product_search_' +id).autocomplete({
            source: function(request, response) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                })
                $.ajax({
                    url: '{{route('back.promotion.search.item')}}',
                    type: "post",
                    data: {
                        value: value,
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item.name,
                                value: item.name,
                                data_value: item.id
                            }
                        }));
                    }
                });
            },
            minLength: 5,
            open: function() {
                var $ul = $(this).autocomplete("widget");
                $ul.css("max-height", "200px");
                $ul.css("overflow-y", "auto");
                $ul.css("overflow-x", "hidden");
            },
            select: function(event, ui) {
                console.log(ui);
                $('#product_search_id_'+id).val(ui.item.data_value);
            }
        });
    }

    function free_product (e, id) {
        var value = e.target.value;
        $('#free_product_' +id).autocomplete({
            source: function(request, response) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                })
                $.ajax({
                    url: '{{route('back.promotion.search.item')}}',
                    type: "post",
                    data: {
                        value: value,
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item.name,
                                value: item.name,
                                data_value: item.id
                            }
                        }));
                    }
                });
            },
            minLength: 5,
            open: function() {
                var $ul = $(this).autocomplete("widget");
                $ul.css("max-height", "200px");
                $ul.css("overflow-y", "auto");
                $ul.css("overflow-x", "hidden");
            },
            select: function(event, ui) {
                $('#free_product_id_'+id).val(ui.item.data_value);
            }
        });
    }

    function delentry(id){
        $('#rows'+id).remove();
    }

    $(document).ready(function() {
        
        
        $('.select2').select2({
            tags: true,
            maximumSelectionLength: 100000,
            tokenSeparators: [',', ' '],
            placeholder: " <-- Select -- >",
        });

    
    });

  
</script>

  <script type="text/javascript">
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'DD/MM/YYYY HH:mm', // กำหนดรูปแบบวันที่และเวลา
            sideBySide: true,  // แสดงตัวเลือกวันและเวลาคู่กัน
            showClose: true,   // แสดงปุ่มปิด
            showClear: true,   // แสดงปุ่มล้างค่า
            showTodayButton: true, // แสดงปุ่มเลือกวันที่ปัจจุบัน
            icons: {
                time: 'fa fa-clock-o',
                date: 'fa fa-calendar',
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down',
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-sun-o',
                clear: 'fa fa-trash',
                close: 'fa fa-times'
            }
        });
    });
</script> 
 
@endsection