@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')

<!-- Start of Main Content -->
<div class="container-fluid">

	<!-- 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>{{ __('Campaign Offer') }}</b></h3>
                </div>
        </div>
    </div>

    {{-- Create Table Btn --}}

	<!-- DataTales -->
	<div class="card shadow mb-4">
		<div class="card-body">
            @include('alerts.alerts')
            <form action="{{route('back.setting.update')}}" method="POST">
                @csrf

                <div class="row">
                    
                    <div class="col-md-5">
                        <div class="form-group product-serch">
                            <label for="name">{{ __('Campaign Title') }} *</label>
                            <input type="text" required class="form-control" name="campaign_title" value="{{$setting->campaign_title}}" placeholder="{{__('Campaign Section Title')}}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group product-serch">
                            <label for="name">{{ __('Campaign Last Date Time') }} *</label>
                            <input type="text" required class="form-control" name="campaign_end_date" value="{{ $setting->campaign_end_date }}" placeholder="{{ __('Enter Date Time') }}" id="datetimepicker">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group product-serch">
                            <label for="campaign_status">{{ __('Status') }} *</label>
                            <select name="campaign_status" class="form-control" id="campaign_status">
                                <option value="1" {{$setting->campaign_status == 1 ? 'selected' : ''}} >{{ __('Publish') }}</option>
                                <option value="2" {{$setting->campaign_status == 2 ? 'selected' : ''}}>{{ __('Unpublish') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">{{__('Save')}}</button>
                        </div>
                    </div>
                </div>
            </form>
		</div>
	</div>

	<div class="card shadow mb-4">
        <div class="card-header">
            <h4 class="card-title">{{ __('Add Product to Campaign') }}</h4>
        </div>
        <div class="card-body">
            <div class="row">
       
                <form action="{{ route('back.campaign.store') }}" method="POST">
                    @csrf
 
                  
                        <div class="row ">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="item-select" class="form-label">{{ __('Select Product') }}</label>
                                    <div class="d-flex align-items-center">
                                        <select id="item-select" name="item_id" class="form-control flex-grow-1 me-2" style="width: 100%;">
                                            <option value="" disabled selected>{{ __('Type 5 characters to search') }}</option>
                                        </select>
                                        <button type="submit" class="btn btn-primary ml-4">{{ __('Add') }}</button>
                                    </div>
                                    @error('item_id')
                                        <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            
                          
                        </div>
                     
                    
                  
                </form>
             
              
                
            </div>
     
        </div>
       
		<div class="card-body">

            <table class="table table-bordered table-striped" id="admin-table" width="100%" cellspacing="0">

                <thead>
                    <tr>
                        <th>{{ __('Image') }}</th>
                        <th width="40%">{{ __('Name') }}</th>
                        <th>{{ __('sku') }}</th>
                        <th>{{ __('Price') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Show Home Page') }}</th>
                        <th>{{ __('Action') }}</th>
                    </tr>
                </thead>

                <tbody>
                    @if ($items->count() > 0)
                      @foreach ($items as $data)
                          <tr>
                              <td><img src="{{asset('assets/images/'.$data->item->photo)}}" alt=""></td>
                              <td>{{$data->item->name}}</td>
                              <td>{{$data->item->sku}}</td>
                              <td> {{ PriceHelper::adminCurrencyPrice($data->item->discount_price) }}</td>
                              <td>
                               
                                  @if($data->item->status == 0)
                               
                                    <span class="badge badge-danger">ปิดการใช้งาน</span>
                                    @else
                                
                                    <span class="badge badge-success">เปิดการใช้งาน</span>
                                    @endif

                                   
                            </td>
                              <td>
    
                                  @if($data->item->is_feature == 1)
                               
                                  <h3 class="badge badge-danger">ปิดการใช้งาน</h3>
                                  @else
                              
                                  <h3 class="badge badge-success">เปิดการใช้งาน</h3>
                                  @endif
                                  
                            </td>
                              <td>
                                <a class="btn btn-danger btn-sm " data-toggle="modal"
                                    data-target="#confirm-delete" href="javascript:;"
                                    data-href="{{ route('back.campaign.destroy',$data->id) }}">
                                    <i class="fas fa-trash-alt"></i>
                                </a>
                          </tr>
                      @endforeach
                    @else
                    <p class="d-block text-center">
                        {{ __('No Product Found') }}
                    </p>
                    @endif
                   
                    
                </tbody>

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

</div>

</div>
<!-- End of Main Content -->
{{-- DELETE MODAL --}}

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="confirm-deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

		<!-- Modal Header -->
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ __('Confirm Delete?') }}</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
		</div>

		<!-- Modal Body -->
        <div class="modal-body">
			{{ __('You are going to delete this item. All contents related with this item will be lost.') }} {{ __('Do you want to delete it?') }}
		</div>

		<!-- Modal footer -->
        <div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
			<form action="" class="d-inline btn-ok" method="POST">

                @csrf

                @method('DELETE')

                <button type="submit" class="btn btn-danger">{{ __('Delete') }}</button>

			</form>
		</div>

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

{{-- DELETE MODAL ENDS --}}



@endsection
@section('scripts')
    <script type="" src="{{asset('assets/back/js/select2.js')}}"></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>
    
    <script>
        $('#basic').select2({
			theme: "bootstrap"
		});
    </script>

<script>
    $(document).ready(function() {
        $('#item-select').select2({
            placeholder: "{{ __('Type 5 characters to search') }}",
            allowClear: true,
            minimumInputLength: 5,
            ajax: {
                url: "{{ route('back.campaign.searchProducts') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(item) {
                            return { id: item.id, text: item.name + ' (' + item.sku + ')' };
                        })
                    };
                },
                cache: true
            }
        });
    });
</script>

@endsection