@extends('layouts.app')
  
        @section('styles')

          @endsection

            @section('content')
              
            <style>
.switch {
  po  sition: relative;
  display: inline-block;
  width: 60px;
  he  ight: 34px;
}

.swi  tch input { 
  opacity: 0;
  width: 0;
  he  ight: 0;
}

.sli  der {
  position: absolute;
  cursor: pointer;
  to  p: 0;
  left: 0;
  right: 0;
  bo  ttom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  tr  ansition: .4s;
}

.sli  der:before {
  position: absolute;
  content: "";
  he  ight: 26px;
  width: 26px;
  left: 4px;
  bo  ttom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  tr  ansition: .4s;
}

inpu  t:checked + .slider {
  background-color: #1c1c1c;
}
  
input:focus + .slider {
  box-shadow: 0 0 1px #1c1c1c;
}  

input:checked + .slider:before {
  -w  ebkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}  

/* Rounded sliders */
.sli  der.round {
  border-radius: 34px;
}
  
.slider.round:before {
  border-radius: 50%;
}  
</style>

                               <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Package</h1>
                                  <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/admin/dashboard">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Package</li>
                                    </ol>
                                  </div>
                            </div>
                            <!-- PAGE-HEADER END -->
  
                            <!-- ROW-1 OPEN -->
                            @canany(['package-create','package-edit'])
                              <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                          <div class="card-header">
                                            <h3 class="card-title">Add Package</h3>
                                        </div>
                                          <div class="card-body">
                                                <form method="POST" id="createproductForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                      <input id="package_id" name="package_id" type="hidden" value="">
                                                    
                                                    @csrf
                                                  <div class="form-row">
                                                       <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Category *</label>
                                                              <select data-parsley-required-message="Category Name Required" class="form-control"  name="category" id="category" required>
                                                            <option value="">--  Choose Category  --</option>
                                                            @foreach ($data['category'] as $category)
                                                                  <option value="{{$category->category_id}}">{{$category->category_name}}</option>
                                                            @endforeach
                                                            </select>
                                                              
                                                    </div>

                                                       <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Package Type *</label>
                                                              <select data-parsley-required-message="Package Type Required" class="form-control"  name="type" id="type" required>
                                                            <option value="">--  Choose Type  --</option>
                                                            @foreach ($data['type'] as $typ)
                                                                  <option value="{{$typ->type_id}}">{{$typ->type_name}}</option>
                                                            @endforeach
                                                            </select>
                                                              
                                                    </div>
                                           
  
                                                    
                                                <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Package Title *</label>
                                                        <input data-parsley-required-message="Package Title  Required" type="text" class="form-control" name="package" id="package"
                                                            value="" required>
                                                            
                                                 </div>

                                                    
                                                <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Location *</label>
                                                        <input pattern="[a-zA-Z]+" data-parsley-required-message="Location  Required" type="text" class="form-control" name="location" id="location"
                                                            value="" required>
                                                            
                                                 </div>
                                                    
                                                <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Total Days *</label>
                                                        <input data-parsley-required-message="Total Days  Required" type="text" class="form-control" name="total_days" pattern="[0-9]*" id="total_days"
                                                            value="" required>
                                                            
                                                 </div>

                                                <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Total Nights *</label>
                                                        <input data-parsley-required-message="Total Nights  Required" type="text" class="form-control" name="total_nights" pattern="[0-9]*" id="total_nights"
                                                            value="" required>
                                                            
                                                 </div>

                                                <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Maximum People Allowed *</label>
                                                        <input data-parsley-required-message="Maximum people Allowed  Required" type="text" class="form-control" name="max_people" id="max_people"
                                                            value="" required>
                                                            
                                                 </div>

                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Title Image  ({{str_replace(',', 'x', env('PACKAGEIMAGESIZE'))}}px) *</label>
                                                <input type="file" data-parsley-required-message="Title image required" required="required" class="form-control custom-input-file" name="title_service_image" id="title_service_image" value="" >
                                            </div>

                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Image 1 ({{str_replace(',', 'x', env('PACKAGEIMAGESIZE'))}}px) </label>
                                                <input type="file" class="form-control custom-input-file" name="image1" id="image1" value="" >
                                            </div>

                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Image 2 ({{str_replace(',', 'x', env('PACKAGEIMAGESIZE'))}}px) </label>
                                                <input type="file" class="form-control custom-input-file" name="image2" id="image2" value="" >
                                            </div>

                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Image 3 ({{str_replace(',', 'x', env('PACKAGEIMAGESIZE'))}}px) </label>
                                                <input type="file" class="form-control custom-input-file" name="image3" id="image3" value="" >
                                            </div>

                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Image 4 ({{str_replace(',', 'x', env('PACKAGEIMAGESIZE'))}}px) </label>
                                                <input type="file" class="form-control custom-input-file" name="image4" id="image4" value="" >
                                            </div>

                                            <div class="col-lg-4 mb-3" style="display: flex;flex-flow: column;">
                                                <label for="validationTooltip01">Features *</label>
                                                    <select data-parsley-required-message="Features Required" class="form-control" multiple="multiple" name="features[]" id="features" required>
                                                        @foreach ($data['features'] as $feat)
                                                            <option value="{{$feat->feature_id}}">{{$feat->feature_name}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>

        
                                            <div class="col-xl-12 mb-3">
                                                <label for="validationTooltip02">Package Description</label>
                                                <textarea  class="form-control newsummernote" name="service_desc" id="service_desc" value=""></textarea>
                                            </div>
                
                                                 
                                                </div>




                            
                                                @can('package-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('/admin/add_packages')}}', 'createproductForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('package-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('{{url('/admin/update_packages')}}', 'createproductForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                                                @endcan
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             @endcanany
                            <!-- /ROW-1 CLOSED -->

                               <!-- Row -->
                    @can('package-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">View Packages</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">Category</th>
                                                        <th class="wd-15p border-bottom-0">Type</th>
                                                        <th class="wd-15p border-bottom-0">Package</th>
                                                        <th class="wd-15p border-bottom-0">Image</th>
                                                        <th class="wd-15p border-bottom-0">Added By</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan 
                        <!-- End Row -->

                         <!-- Modal -->
               


                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete</h5>
                                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the Package ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                                        <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>


                         {{-- #########################View Modal################################### --}}
<div class="modal fade show" id="largemodal" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
            <div class="modal-dialog modal-lg " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Package Details</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of View Modal############################ --}}

                        
                        

            @endsection
              @section('scripts')  

              <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>


{{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
    <!-- INTERNAL SUMMERNOTE Editor JS -->
    <script src="{{asset('assets/plugins/summernote/summernote1.js')}}"></script>


<script type="text/javascript">
$(document).ready(function() {
    setTimeout(function(){ $('#features').multipleSelect(); },1200)
});
</script>

    <script type="text/javascript">
        jQuery((function(e){"use strict";
            $(document).ready((function(){
                $('.newsummernote').summernote({
                    height: 300,
                    callbacks: {
                        onImageUpload: function(files) {
                            var current_id = $(this).attr('id');
                            uploadImage(files[0], current_id);
                        }
                    }
                });
            }))
        }));
    </script>

    <script>
            
      
      

      var token = $("meta[name=csrf-token]").attr("content");  
    var admin_route="/{{env('ADMIN_ROUTE')}}";
    var datatable_name="table_datatable";
    var coloumn_data=['package_id','category_name','type_name','package_name','package_id','name','package_id'];
    var coloumn_array=[];
    for (let i = 0; i <coloumn_data.length; i++) {
        coloumn_array.push({"data": ""+coloumn_data[i]+"", "name": ""+coloumn_data[i]+""});
    }
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,coloumn_data.length-1],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,1,2,3,4,5,6]},
           {"className": "text-left", "targets": []},
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  admin_route+"/packages_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns":coloumn_array,
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          var created_at=aData.created_at.substring(0, 10);
          if(aData.main_image=="" || aData.main_image==null){aData.main_image="no_image.png";}
          var image='<a href="/uploads/package_img/'+aData.main_image+'" target="_blank"><img style="width:90px; height:30px" src="/uploads/package_img/'+aData.main_image+'"></a>';
            //View Function
            var action=action+'&nbsp;<button title="View"  onclick=view('+aData.package_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';
            //Edit Action 
            @can('package-edit')
            var action=action+'&nbsp;<button title="Edit"  onclick=edit('+aData.package_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
            @endcan
            //Delete Action
            @can('package-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.package_id+')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            // if(aData.product_active_status==0){
            //     var checked="checked";
            // }
            // else{
            //      var checked="";
            // }
            
            $('td:eq(0)', nRow).html(index);
            $('td:eq(4)', nRow).html(image);
            $('td:eq(6)', nRow).html(action).addClass('text-center');
           
         
 }
 });

// //        // #################### Edit Section ############################
                function edit(id){
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: admin_route+'/edit_packages',
                    success: function (result) {
                        $('#category').val(result.product.category_id);
                        $('#package').val(result.product.package_name);
                        $('#type').val(result.product.type_id);
                        $('#location').val(result.product.location);
                        $('#total_days').val(result.product.duration_days);
                        $('#total_nights').val(result.product.duration_nights);
                        $('#max_people').val(result.product.peoples_limit);
                        var features_allnew=result.features;
                        $select = $("#features");
                        setTimeout(function () {
                            var permission_array = [];
                            $.each(features_allnew, function (index, feat_list) {
                                var iNum = parseInt(feat_list.feat_id);
                                permission_array.push(iNum);
                            });
                            $select.multipleSelect();
                            $select.multipleSelect("setSelects", permission_array);
                        },700);
                        $('#service_desc').summernote('reset');
                        $('#service_desc').summernote('code',result.product.package_description);
                        $("#title_service_image").attr("required", false);
                        $('#package_id').val(result.product.package_id);

      
            



                         $('#create_btn').hide();
                         $('#update_btn').show();
                         $('#back-to-top').click();
                        // #######################END##########################
                        }
                })
                }
// //       // #################### End Of Edit Section ####################
// //      // #################### Delete Section ##########################
                    function delete_modal(id){
                    $('#package_id').val(id);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#package_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: admin_route+'/delete_packages',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
// //      // #################### End Of Delete Section ##################

        // #########################View Section ##########################
        function view(id){
            $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: admin_route+'/view_packages',
                        success: function (result) {    
                           $('#view_modal_body').html(result);
                           $('#largemodal').modal('show');
                        }
                    })
        }
        // ###############################################################


        </script>
        
            <!-- FILE UPLOADES JS -->
    <script src="{{asset('assets/plugins/fileuploads/js/fileupload.js')}}"></script>
    <script src="{{asset('assets/plugins/fileuploads/js/file-upload.js')}}"></script>

    <!-- INTERNAL Bootstrap-Datepicker js-->
    <script src="{{asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>

    <!-- INTERNAL File-Uploads Js-->
    <script src="{{asset('assets/plugins/fancyuploder/jquery.ui.widget.js')}}"></script>
    <script src="{{asset('assets/plugins/fancyuploder/jquery.fileupload.js')}}"></script>
    <script src="{{asset('assets/plugins/fancyuploder/jquery.iframe-transport.js')}}"></script>
    <script src="{{asset('assets/plugins/fancyuploder/jquery.fancy-fileupload.js')}}"></script>
    <script src="{{asset('assets/plugins/fancyuploder/fancy-uploader.js')}}"></script>

    <!-- SELECT2 JS -->
    <script src="{{asset('assets/plugins/select2/select2.full.min.js')}}"></script>
    <script src="{{asset('assets/js/select2.js')}}"></script>

    <!-- BOOTSTRAP-DATERANGEPICKER JS -->
    <script src="{{asset('assets/plugins/bootstrap-daterangepicker/moment.min.js')}}"></script>
    <script src="{{asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>

    <!-- INTERNAL Bootstrap-Datepicker js-->
    <script src="{{asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.js')}}"></script>

    <!-- INTERNAL Sumoselect js-->
    <script src="{{asset('assets/plugins/sumoselect/jquery.sumoselect.js')}}"></script>

    <!-- TIMEPICKER JS -->
    <script src="{{asset('assets/plugins/time-picker/jquery.timepicker.js')}}"></script>
    <script src="{{asset('assets/plugins/time-picker/toggles.min.js')}}"></script>

    <!-- INTERNAL intlTelInput js-->
    <script src="{{asset('assets/plugins/intl-tel-input-master/intlTelInput.js')}}"></script>
    <script src="{{asset('assets/plugins/intl-tel-input-master/country-select.js')}}"></script>
    <script src="{{asset('assets/plugins/intl-tel-input-master/utils.js')}}"></script>

    <!-- INTERNAL jquery transfer js-->
    <script src="{{asset('assets/plugins/jQuerytransfer/jquery.transfer.js')}}"></script>

    <!-- INTERNAL multi js-->
    <script src="{{asset('assets/plugins/multi/multi.min.js')}}"></script>

    <!-- DATEPICKER JS -->
    <script src="{{asset('assets/plugins/date-picker/date-picker.js')}}"></script>
    <script src="{{asset('assets/plugins/date-picker/jquery-ui.js')}}"></script>
    <script src="{{asset('assets/plugins/input-mask/jquery.maskedinput.js')}}"></script>

    <!-- COLOR PICKER JS -->
    <script src="{{asset('assets/plugins/pickr-master/pickr.es5.min.js')}}"></script>
    <script src="{{asset('assets/js/picker.js')}}"></script>

    <!-- MULTI SELECT JS-->
    <script src="{{asset('assets/plugins/multipleselect/multiple-select.js')}}"></script>
    <script src="{{asset('assets/plugins/multipleselect/multi-select.js')}}"></script>

    <!-- FORMELEMENTS JS -->
    <script src="{{asset('assets/js/formelementadvnced.js')}}"></script>
    <script src="{{asset('assets/js/form-elements.js')}}"></script>
        
        @endsection