@extends('layouts.admin.main')
@section('title','Campaign')
@section('style')
<link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">

@endsection
@section('rightbar-content')

<div class="breadcrumbbar">
  <div class="row align-items-center">
    <div class="col-md-5 col-lg-5">
      <h4 class="page-title">All Campaign</h4>
      <div class="breadcrumb-list">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{url('/')}}">{{ __('adminWords.home') }}</a></li>
          <li class="breadcrumb-item"><a href="#">{{ __('Campaign') }}</a></li>
        </ol>
      </div>
    </div> 
    
    <div class="col-md-3">
        {{-- <input type="text" name="search" id="search" class="form-control" placeholder="Search Campaign"> --}}
        
    </div>

    <div class="col-md-4">
        <button class="btn btn-danger create-campaign pull-right" data-toggle="modal" data-target="#campaignmodal"><i class="feather icon-plus mr-2"></i>Create Campaign</button>
    </div>
  </div>          
</div>


<div class="contentbar">
       <div class="row">
              
              <table class="table mt-10" id="bannertbl">
                     <thead>
                           <tr>
                               <th>S.No</th>
                               <th>Title</th>
                               <th>Image</th>
                               <th>Created At</th>
                               <th>Start Date</th>
                               <th>End Date</th>
                               <th>Status</th>
                               <th>Action</th>

                           </tr>
                     </thead>
                     <tbody>
                           @if(!empty($campaigns))
                           @foreach($campaigns as $key => $v)
                              <tr>
                                   <td>{{ $key + 1  }}</td>
                                   <td>{{ $v->title  }}</td>
                                   <td><img src="{{ asset('images/sites/'.$v->image) }}" style="width: 100px;"></td>
                                   <td>{{\Carbon\Carbon::parse($v->created_at)->diffForHumans()  }}</td>
                                    <td>{{ date('d-m-Y',strtotime($v->start_date))  }}</td>
                                    <td>{{ date('d-m-Y',strtotime($v->end_date))  }}</td>
                                    <td>
                                        @if($v->status == 1)
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-danger">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="#" data-id="{{$v->id}}" class="edit-campaign"><i class="feather icon-edit-2 text-success"></i></a>&nbsp
                                        <a href="{{ url('campaign/delete/'.$v->id) }}" class="program_delete"><i class="feather icon-trash text-danger"></i></a>
                                    </td>
                              </tr>
                        @endforeach
                        @endif
                     </tbody>
              </table>
       </div>
</div>

        <!-- Modal -->
        <div class="modal fade" id="campaignmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                   <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Campaign</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form action="{{url('campaign/save')}}" method="post" enctype="multipart/form-data">
                                @csrf

                                {{-- id hidden field --}}
                                <input type="hidden" name="id" id="campain_id">

                                <div class="modal-body">

                                    <div class="row">
                                        <div class="col-md-3">
                                            {{-- label title --}}
                                            <label for="title">Title <sup>*</sup></label>
                                        </div>
                                        <div class="col-md-9">
                                            {{-- input title --}}
                                            <input type="text" class="form-control" name="title" id="title" required>
                                        </div>
                                    </div>


                                  <div class="row">
                                    
                                         <div class="col-md-3">
                                                <label for="Bannerimage">Campaign Image <sup>*</sup></label>
                                         </div>

                                         <div class="col-md-9 image_display" >
                                            
                                            {{-- <input type="file" accept="" class="form-control campaign_image" name="image" id="Bannerimage"> --}}
                                            {{-- accept only image files --}}
                                            <input type="file" accept="*.png,*jpeg,*.jpg" class="form-control campaign_image" name="image" id="Bannerimage" required>
                                         </div>
                                  </div>

                                  {{-- description testarea --}}
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="description">Description</label>
                                        </div>
                                        <div class="col-md-9">
                                            <textarea name="description" id="description" cols="30" rows="10" class="form-control"></textarea>
                                        </div>
                                    </div>

                                    {{-- start date --}}
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="start_date">Start Date <sup>*</sup></label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="date" name="start_date" id="start_date" class="form-control" required>
                                        </div>
                                    </div>

                                    {{-- end date --}}
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="end_date">End Date <sup>*</sup></label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="date" name="end_date" id="end_date" class="form-control" required>
                                        </div>
                                    </div>

                                    {{-- status --}}
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="status">Status <sup>*</sup></label>
                                        </div>
                                      
                                            <div class="col-md-9 input-group">
                                                <select name="status" id="status" class="form-control" style="width: 100%" required>
                                                    <option value="1">Active</option>
                                                    <option value="0">Inactive</option>
                                                </select>
                                            </div>
                                    </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle"></i> Add</button>
                            </div>
                            </form>
                    </div>
            </div>
        </div>
@endsection

@section('script')

<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>      
    <script src="{{ asset('assets/js/mrcls-custom.js') }}"></script>  
    
<script>
$(function(){
    $('.edit-campaign').click(function(){
        var id = $(this).data('id');
        $.ajax({
            url: baseUrl + '/campaign/edit/' + id,
            type: 'GET',
            success: function(res){
                $('#title').val(res.title);
                $('#description').val(res.description);

                let start_date = res.start_date ? res.start_date.split(' ')[0] : '';
                let end_date = res.end_date ? res.end_date.split(' ')[0] : '';

                $('#start_date').val(start_date);
                $('#end_date').val(end_date);
                $('#status').val(res.status);
                $('#campain_id').val(res.id);

                $('.image_display').html(`<img src="${baseUrl}/images/sites/${res.image}" style="width: 100px;">
                                         <button type="button" class="btn btn-danger btn-sm remove_image">Remove</button>`);
                $('.campaign_image').removeAttr('required').css('display', 'none');

                $('#campaignmodal').modal('show');
            }
        })
    
    })

    $(document).on('click', '.remove_image', function(){
        $('.image_display').html(`<input type="file" accept="jpg,.png,.jpeg" class="form-control campaign_image" name="image" id="Bannerimage" required>`);
        $('.campaign_image').attr('required', 'required').css('display', 'block');
    })

    $('.create-campaign').click(function(){
        $('#title').val('');
        $('#description').val('');
        $('#start_date').val('');
        $('#end_date').val('');
        $('#status').val(1);
        $('#campain_id').val('');
        $('.image_display').html(`<input type="file" accept="jpg,.png,.jpeg" class="form-control campaign_image" name="image" id="Bannerimage" required>`);
        $('.campaign_image').attr('required', 'required').css('display', 'block');
    
    })


    // check validation from remote
    // start_date, end_date and status
    $('#start_date, #end_date, #status').change(function(){
        console.log('change, q');
        let start_date = $('#start_date').val();
        let end_date = $('#end_date').val();
        let status = $('#status').val();
        let id = $('#campain_id').val();
        let csrfToken = $('input[name="_token"]').attr('value');



        if(start_date && end_date && status){
            $.ajax({
                url: baseUrl + '/campaign/check-validation',
                type: 'POST',
                data: {start_date, end_date, status, id, "_token": csrfToken},
                dataType: 'JSON',
                success: function(res){
                    if(res.status == 1){
                        $('#campaignmodal').find('button[type="submit"]').removeAttr('disabled');
                    }else{
                        $('#campaignmodal').find('button[type="submit"]').attr('disabled', 'disabled');
                        Swal.fire({
                            icon: 'error',
                            title: res.msg,
                            text: res.message,
                        })
                    }
                }
            })
        }
    })


})

</script>



@endsection