@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>{{ __('Create Promotion') }}</b> </h3>
            <a class="btn btn-primary   btn-sm" href="{{route('back.promotion.index')}}"><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 class="admin-form tab-form" action="{{ route('back.promotion.store') }}" method="POST"
                enctype="multipart/form-data">
                @csrf
    <div class="row">
<input type='hidden' name='id_promotion' value="{{@$promotion->id}}" />
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <label for="name">{{ __('รายละเอียด') }} *</label>
                        <input type="text" name="Detail" class="form-control item-name"
                            id="name" placeholder="{{ __('Enter Name') }}"
                            value="{{@$promotion->detail}}" >
                            <input type="hidden" name="type_" 
                            value="{{@$promotion->type}}" >
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="form-group pb-0  mb-0">
                        <label class="d-block">{{ __('รูปภาพ') }} * {{@$promotion->photo}}</label>
                    </div>
                    <div class="form-group pb-0 pt-0 mt-0 mb-0">
                    <img class="admin-img lg" src="{{asset('assets/images/'.@$promotion->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 class="card">
                <div class="card-body">
                    <div class="form-group">
                        <label for="name">{{ __('Promotion') }} *</label>
                     <select name='promotion' class='form-control' onchange="promotion_(event.target.value);">
                        <option value="0"> - Select - </option>
                      <option value="1" >Buy To Get </option> -->
                      <!-- <option value="2"> Coupons</option> -->

                     <!-- </select>
                    </div>
                </div>
            </div> -->
        <div id='Buy To Get' >


            {{-- setpromotion --}}

            <div id='setpromotion'></div>

            {{-- setpromotion --}}

            <div class='row'>
                <div class='col-lg-12'> 
            <div class='buy_group' style='border:2px solid grey; border-radius:15px; padding:3%;'>
            <div class="card">
                <div class="card-body">
                    <label for="Buy To Get">{{ __('กลุ่ม โปรโมชั่น') }}</label>
               </div></div>
            <div class="card">
                <div class="card-body">
                    <label for="Buy To Get">{{ __('Category') }}</label>
                    <hr/>
                    <span id='category_select'></span>
                <input type='hidden' id='value_category' name='category_value' value="" >
            {{-- <select class="form-control select2" multiple="multiple" style="width: 100%;" onchange="Category_(event.target.value,1)"> --}}
                <select class="form-control " id='category__' style="width: 100%;" onchange="Category_(event.target.value,1)">
                <option  value='0' > - select all - </option>
                @foreach ($category as $c)
                 <option value='{{$c->id}}' id='category_id{{$c->id}}'> {{$c->name}} </option>
             @endforeach
            </select>
                </div>
            </div>
            <div class="card" >
                <div class="card-body">
                    <label for="">{{ __('Subcategory') }}</label>
                    <select class="form-control " id='subcate_element'    style="width: 100%;" onchange="SubCategory_(event.target.value,1);">
            <option  > - Select - </option>
            </select>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <label for="">{{ __('Brand') }}</label>
                    <select class="form-control" style="width: 100%;" id='brand__' onchange="Brand_(event.target.value,1);">
            <option value='0'> - select all - </option>
                @foreach (@$brand as $b)
                <option value='{{$b->id}}' >{{$b->name}}</option>
                @endforeach
            </select>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <label for="">{{ __('Name') }}</label>
                    <div class="input-group">
                    <input type="text" class="form-control" id='search__' placeholder="search......" aria-label="search" aria-describedby="button-addon2"  >
                            <button class="btn btn-outline-secondary" type="button" id="button-addon2" onclick="search_(null,1);">search</button>
                  </div>
                </div>
            </div>
           


            <div class="card">
                <div class="card-body" id='product_element'>
                    <label for="Buy To Get">{{ __('Products') }}</label>
                    <table  style="overflow-x:auto;" >
                   

                    <thead>
                        <tr>
                            
                            <th colspan="1" id='table-left' >สินค้าที่ซื้อ(ชิ้น)</th>
                            <th colspan="1" id='table-left'>
                                 @if(@$promotion->type == 1)
                                 {{__('สินค้าที่แถม(ชิ้น)')}} 
                                 @else 
                                 {{__('จำนวนราคา(มูลค่า)ที่ลด ')}} 
                                 @endif </th>
                            <th colspan="3" id='table-left'>ชื่อสินค้า</th>

                            @if(@$promotion->type == 1)
                            <th colspan="3" id='table-right'>หมวดหมู่</th>
                            <th colspan="3" id='table-right'>หมวดหมู่ย่อย</th>
                            <th colspan="3" id='table-right'>แบรนด์</th>
                            <th colspan="5" id='table-right'>ค้นหาชื่อ </th>
                            <th colspan="5" id='table-right'>ชื่อสินค้าที่แถม </th>
                            @endif
                         
                        </tr>
                    </thead>
                    <tbody>
                        @foreach(@$promotion->promotiondetail as $i)
                        <tr style='border:1px solid grey; padding:1%;'>
                        @if(@$promotion->type == 1)
                            <td > 
                            <input class='form-control ' type='number' name='buy_{{$i->item_id}}' placeholder="0" value="{{@$i->promotion_buy}}"  />
                                </td>
                            <td >
                            <input class='form-control' type='number' name='get_{{@$i->item_id}}' placeholder="0" value="{{@$i->promotion_get}}" />
                            </td>
                          
                        <td style='border:1px solid grey; ' colspan="3" >
                        <input type='hidden' value='{{$i->item_id}}' name='id[]'>
                            {{@$i->item_buy->name}}</td>


                         <td colspan="3">
                         <select class="form-control "  id='category__{{$i->item_id}}'  style="width: 100%;" onchange="Category_(event.target.value,2,{{$i->item_id}})">
                         <option selected value='0'> - Not - </option>  
                         
                            @foreach ($category as $c)
                            <option value='{{$c->id}}'  
                                @if($c->id == @$i->item_promotion->category->id) selected @endif
                                > {{$c->name}} </option>
                        @endforeach
                         </td>   
                         <td colspan="3">
                         <select class="form-control " id='subcate_element_p{{$i->item_id}}'  style="width: 100%;" onchange="SubCategory_(event.target.value,2,{{$i->item_id}});">
                         <option selected value='0'> - Not - </option>   
                         <option value='{{@$i->item_promotion->subcategory->id}}' selected>{{@$i->item_promotion->subcategory->name}} </option>
                        </select>
                        </td>  
                         <td colspan="3">
                         <select class="form-control" style="width: 100%;"  id="brand__{{$i->item_id}}"  onchange="Brand_(event.target.value,2,{{$i->item_id}});">
                            @if(@$i->item_promotion->brand->id != null)
                            <option value='{{@$i->item_promotion->brand->id}}' selected>{{@$i->item_promotion->brand->name}}</option>  
                            @endif
                            <option selected value='0'> - Not - </option>   
                            @foreach (@$brand as $b)
                            <option value='{{$b->id}}' >{{$b->name}}</option>
                            @endforeach
                        </select>
                         </td>  
                         <td colspan="5">

                    <div style='display:flex;'>
                    <input type="text" class="form-control" id='search__{{$i->item_id}}' placeholder="search......" aria-label="search"  aria-describedby="button-addon2" 
                    onkeyup="search_(event.target.value,2,'{{$i->item_id}}');" >
                    

                    </div>

                    </td>
                          
                          
                <td colspan="3">
                <select class="form-control" id="product_element_p{{$i->item_id}}" name='product_element_p{{$i->item_id}}'  style="width: 100%;" >
                <option value='0' > - Not - </option>   
                
                @foreach (@$item as $ii)
                    <option value='{{$ii->id}}' 
                        @if(@$ii->id == @$i->item_promotion->id)
                        selected 
                        @endif
                        >{{$ii->name}}</option>
                    @endforeach
                </select>
                </td>  




                         @else 
                         <td >
                            <input class='form-control' id='number_form' type='number' name='buy_{{$i->item_id}}' placeholder="0" value="{{@$i->promotion_buy}}" step='1' />
                                </td>
                          
                            <td >
                                <div style='display:flex'>
                            <input class='form-control' id='number_form' type='number' name='discount_{{@$i->item_id}}' placeholder="0" value="{{@$i->promotion_discount}}" step='1' />
                            <select name='type_discount_{{@$i->item_id}}' class='form-select form-sm'>
                                <option  value='percent' @if($i->discount_type == 'percent') selected @endif> % </option>
                                <option value ='bath' @if($i->discount_type == 'bath') selected @endif> บาท </option>

                        </select>

                        </div>

                            </td>
                        <td colspan="3" style='border:1px solid grey;'><input type='hidden' value='{{$i->item_id}}' name='id[]'>  
                        {{@$i->item_buy->name}}
                    </td>

                         @endif
                        </tr>
                        @endforeach                   
                    </tbody>
                    </table>
       
                </div>
            </div>
            </div>
          </div>
 
        
        




        </div>



<br></hr><br>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body" style="display:flex;"; >
                    <button type="submit" class="btn btn-secondary mr-2">{{ __('Save') }}</button>
                    {{-- <button type="submit" class="btn btn-info save__edit">{{ __('Save & Edit') }}</button> --}}
                </div>
            </div>



        </div>

    </div>
</form>


</div>

</div>
<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script>
    $('.select2').select2({
        tags: true,
        maximumSelectionLength: 100000,
        tokenSeparators: [',', ' '],
        placeholder: " <-- Select -- >",
        //minimumInputLength: 1,
        //ajax: {
       //   url: "you url to data",
       //   dataType: 'json',
        //  quietMillis: 250,
        //  data: function (term, page) {
        //     return {
        //         q: term, // search term
        //    };
       //  },
       //  results: function (data, page) {
       //  return { results: data.items };
      //   },
      //   cache: true
       // }
    });
</script>

<script>
 

 function Category_(e,t,id){

    fullpath = window.location.origin+'/admin/promotion/create';
    
        var value = e;
        var type_ = '{{@$promotion->type}}';

        $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})
    $.ajax({
        url: fullpath+'/'+type_+'/category',
        type: "post",
        data: {
            value : value,
       



        },
        success: function (response) {
    if(t == 1){
      $('#subcate_element').html(response);
    }else{
        $('#subcate_element_p'+id).html(response);
    }



                $.ajax({
                    url: fullpath+'/'+type_+'/product',
                    type: "post",
                    data: {
                        value : value,
                        value2 : null,
                        type:t,
                        



                    },
                    success: function (response) {

            if(t == 1){
                $('#product_element').html(response);
            }else{
                $('#product_element_p'+id).html(response);
            }


                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus,errorThrown);
                    }
                });



        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus,errorThrown);
        }
    });

 }


function SubCategory_(e,t,id){
    fullpath = window.location.origin+'/admin/promotion/create';
    var type_ = '{{@$promotion->type}}';
    if(t == 1){
        var value2 = e;
        var value = document.getElementById('category__').value;
        var value3 = document.getElementById('brand__').value;
        var value4 = document.getElementById('search__').value;
    }else{
        var value2 = e;
      
        var value = document.getElementById('category__'+id).value;
  
        var value3 = document.getElementById('brand__'+id).value;
        
        var value4 = document.getElementById('search__'+id).value;
    }
  
        
        $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})
    $.ajax({
        url: fullpath+'/'+type_+'/product',
        type: "post",
        data: {
            value : value,
            value2 : value2,
            value3 : value3,
            value4:value4,
            type:t,


        },
        success: function (response) {

            if(t == 1){
            $('#product_element').html(response);
            }else{
                $('#product_element_p'+id).html(response);
            }



            // price_
            // var flashsale = $('#subcate').append(response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus,errorThrown);
        }
    });
    }

    function Brand_(e,t,id){
        fullpath = window.location.origin+'/admin/promotion/create';
        var type_ = '{{@$promotion->type}}';
    if(t == 1){
        var value3 = e;
        var value = document.getElementById('category__').value;
        var value2 = document.getElementById('subcate_element').value;
        var value4 = document.getElementById('search__').value;
    }else{
        var value3 = e;
        var value = document.getElementById('category__'+id).value;
        var value2 = document.getElementById('subcate_element_p'+id).value;
        var value4 = document.getElementById('search__'+id).value;
    }
      
   

        $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})
    $.ajax({
        url: fullpath+'/'+type_+'/product',
        type: "post",
        data: {
            value : value,
            value2 : value2,
            value3 : value3,
            value4:value4,
            type:t,



        },
        success: function (response) {

            if(t == 1){
            $('#product_element').html(response);
            }else{
            $('#product_element_p'+id).html(response);
            }




            // price_
            // var flashsale = $('#subcate').append(response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus,errorThrown);
        }
    });
    }


    function search_(e,t,id){
        fullpath = window.location.origin+'/admin/promotion/create';
        var type_ = '{{@$promotion->type}}';
   
    if(t == 1){
    var value4 = document.getElementById('search__').value;
    var value = document.getElementById('category__').value;
        var value2 = document.getElementById('subcate_element').value;
        var value3 = document.getElementById('brand__').value;
    
    }else{
        var value4 = e;
        var value = document.getElementById('category__'+id).value;
        var value2 = document.getElementById('subcate_element_p'+id).value;
        var value3 = document.getElementById('brand__'+id).value;
      
    }
      

     


        $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})
    $.ajax({
        url: fullpath+'/'+type_+'/product',
        type: "post",
        data: {
            value : value,
            value2 : value2,
            value3 : value3,
            value4:value4,
            type:t,



        },
        success: function (response) {

            if(t == 1){
            $('#product_element').html(response);
            }else{
            $('#product_element_p'+id).html(response);
            }




            // price_
            // var flashsale = $('#subcate').append(response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus,errorThrown);
        }
    });
    }

</script>
@endsection