@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-8 col-lg-8">
      <h4 class="page-title">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>          
</div>

<div class="contentbar">
       <div class="row">
              <div class="col-md-12">
                    <div class="card-header">    
                            <div class="text-right">   
                                <button class="btn btn-primary" data-toggle="modal" data-target="#bannermodal">Create Campaign</button>
                            </div>                                 
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h5 class="card-title mb-0">All Campaigns</h5>
                                </div>
                            </div>
                        </div>
              </div>

              <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>{{ $v->created_at  }}</td>
                                    <td>{{ $v->start_date  }}</td>
                                    <td>{{ $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="{{ url('campaign/edit/'.$v->id) }}" class="btn btn-primary btn-sm">Edit</a>
                                        <a href="{{ url('campaign/delete/'.$v->id) }}" class="btn btn-danger btn-sm">Delete</a>
                                    </td>
                              </tr>
                        @endforeach
                        @endif
                     </tbody>
              </table>
       </div>
</div>



        <!-- Modal -->
        <div class="modal fade" id="bannermodal" 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
                            <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-7">
                                            {{-- 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-7">
                                                 <input type="file" class="form-control" name="image" id="Bannerimage" required>
                                         </div>
                                  </div>

                                  {{-- description testarea --}}
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label for="description">Description <sup>*</sup></label>
                                        </div>
                                        <div class="col-md-7">
                                            <textarea name="description" id="description" cols="30" rows="10" class="form-control" required></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-7">
                                            <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-7">
                                            <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-7 input-group">
                                                <select name="status" id="status" class="form-control" style="width: 100%">
                                                    <option value="1">Active</option>
                                                    <option value="0">Inactive</option>
                                                </select>
                                            </div>
                                    </div>
                                    









                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Save</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 src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.buttons.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

        <script>

$(document).ready(function () {
    $('#bannertbl').DataTable({
        "lengthChange":false,
        "searching":false,
    });
});

        </script>
@endsection