@extends('admin.layouts.admin')

 @section('content')
     <!-- End Navbar -->
     <div class="project-block">
         <div class="container-fluid">
             <div class="row">
                 <div class="col-12">
                    
                     <div class="common-title">
                         <h2>Projects</h2>
                     </div>
                     <div class="projects-top-block">
                         <div class="projects-top-block-title">
                             <h4>Highlight Projects ( Set 4 projects that will be shown on the
                                     homepage )</h4>
                             <p><span id="countprojectdata"></span>/4 added</p>
                         </div>
                         <!-- Card header -->
                         <div class="project-img-middle">
                             <div id="projectdisplaydata" class="project-img-block">
                             </div>
                         </div> 
                     </div>
                     <div class="table-block-common">
                         <!-- Card header -->
                         <div class="top-title-block-table">
                             <div class="top-title-block-table-left common-btn-admin">
                                 @if (isset($module_name))
                                     <h5 class="sdial-darkbox-subtitle-text20">Portfolio Projects</h5>
                                 @endif
                                 <a href="{{ $module_route . '/create' }}" class="btn btn-yellow-admin">
                                     <i class="fas fa-plus me-2"></i>
                                     <span>
                                         @if (isset($module_name))
                                             Add {{ $module_name }}
                                         @endif
                                     </span>
                                 </a>
                             </div>
                             <span class="selectfilter">
                                 <img src="/assets/img/filter-icon.svg" />
                             </span>
                         </div>
                         <div class="table-common-block">
                             <div class="table-responsive">
                                 <table class="table table-flush" id="datatable-basic">
                                     <thead class="thead-light">
                                         <tr>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                                 Cover
                                             </th>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                                 Title
                                             </th>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                                 Year built & location
                                             </th>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                                 Category
                                             </th>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                                 Client company
                                             </th>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7 width-changes-disc">
                                                 Description
                                             </th>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                                 Status
                                             </th>
                                             <th class="text-secondary text-xxs font-weight-bolder opacity-7 center-block">
                                                 Action
                                             </th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>
                 </div>
             </div> 
         </div>
     </div>
     <!-- The Modal -->
     <div id="myModal1" class="modal myModal1 common-modal-block">
         <!-- Modal content -->
         <div class="modal-content">
             <div class="modal-header">
                 <h2>Set Highlight Project</h2>
                 <a href="#" class="rmvmodel11">
                     <img src="/assets/img/close-icon-modal.svg" alt="close-icon">
                 </a>
             </div>
             <div class="modal-body">
             <form method="POST" action="{{ route('project-new.set-highlight') }}">
                 @csrf

                  <div class="form-group">
                         <label>Project</label>
                         <select name="projectid" class="form-control" required>
                             <option value="">Select Project</option>
                             @foreach ($projects as $pj)
                                 <option value="{{ $pj->id }}">{{ $pj->name }}</option>
                             @endforeach
                         </select>
                         <input type="hidden" value="" id="orderno" name="orderno">
                     </div> 
                 <div class="modal-footer-block">
                         <span class="btn btn-cancel mb-0 rmvmodel">Cancel</span>
                         <button type="submit" class="btn mb-0 common-modal">Save</button>
                     </div>
                  
             </form>
             </div>
         </div>
     </div>
     <!-- The Modal -->
     <div id="myModal2" class="modal myModal2 common-modal-block filter-modal-block">
         <!-- Modal content -->
         <div class="modal-content"> 
             <div class="modal-header">
                 <h2>Filters</h2>
                 <a href="#" class="rmvfiltermodel">
                     <img src="/assets/img/close-icon-modal.svg" alt="close-icon">
                 </a>
             </div>
             <div class="modal-body">
                 <h4>Type</h4>
                 <div class="form-block-check">
                     <div class="form-check">
                         <input class="form-check-input filter-type-id" type="checkbox" name="type" value="multifamily"
                             id="multifamily" checked />
                         <label class="form-label" for="multifamily"><span>Multi-family</span></label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input filter-type-id" type="checkbox" name="type" value="workforce"
                             id="workforce" checked />
                         <label class="form-label" for="workforce"><span>Workforce</span></label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input filter-type-id" type="checkbox" name="type" value="commerical"
                             id="commerical" checked />
                         <label class="form-label" for="commerical"><span>Commerical</span></label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input filter-type-id" type="checkbox" name="type" value="singlefamily"
                             id="singlefamily" checked />
                         <label class="form-label" for="singlefamily"><span>Single-family</span></label>
                     </div>
                 </div>
             </div> 
             <div class="modal-footer-block">
                 <p>
                     {{-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd"
                             d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM10 9C10.5128 9 10.9355 9.38604 10.9933 9.88338L11 10V14C11 14.5523 10.5523 15 10 15C9.48716 15 9.06449 14.614 9.00673 14.1166L9 14V10C9 9.44771 9.44771 9 10 9ZM11.01 6C11.01 5.44772 10.5623 5 10.01 5L9.88338 5.00673C9.38604 5.06449 9 5.48716 9 6C9 6.55228 9.44771 7 10 7L10.1266 6.99327C10.624 6.93551 11.01 6.51284 11.01 6Z"
                             fill="#58A35C" />
                     </svg> --}}
                     <span id="total-match">0 matches found</span>
                 </p>
                 <button class="common-modal btn savefilter">Save Filters</button>
             </div>
         </div>
     </div>
 @endsection

 @push('js')
     <script>
         $(document).ready(function(){
            //get project list
            $.ajax({
                type: 'GET',
                url: "{!! url('admin/project/all/getprojectlist') !!}",
                dataType: 'json',
                success: function(data) {
                    let html = '';
                    $.each(data?.data, function(index, item) {
                        html += '<div class="col-projects-block">\n\
                                                                                <div class="col-projects-block-inner"> ';
                        if (item.getimage != null) {
                            html += '<div class="preview-img-div box-img">\n\
                                                                                            <img src=' + item.getimage + '>\n\
                                                                                        </div>\n\
                                                                                        <h5>' + item.getname + '</h5>';
                        } else {
                            html += '<h6 id="myBtn" data-id=' + item.orderno +
                                ' class="text-primary mb-0 selectprojectclass">Select a project</h6>';
                        }
                        html += '</div>';
                        if (item.projectid != null) {
                            html += '<button type="button"><span class="removeHighlight" data-val=' + item
                                .id + '>Remove</span> </button>';
                        }
                        html += '</div> <br>';
                    }); 
                    if (html != "") {
                        $("#projectdisplaydata").append(html);
                    }
                    
                    if (data.count>=0) { 
                        $("#countprojectdata").html(data.count);
                    }
                }
            });
        });

         var oTable = $('#datatable-basic').DataTable({
             "pageLength": 10,
             processing: true,
             serverSide: true,
             language: {
                searchPlaceholder: "Search",
                sEmptyTable: "No projects match.",
                info: "_START_ - _END_ of _MAX_",
             },
            //  oLanguage: {
            //     sEmptyTable: "No projects match."
            //  },
             "ajax": {
                 "url": "{!! $module_route . '/datatable' !!}",
                 "data": function(d) {
                     d.type_id = $('input[name="type"]:checked').serializeArray();
                 },
             },
             columns: [{
                     data: 'image_url',
                     address: 'image_url',
                     orderable: false,
                     searchable: false,
                     class: 'img-block-td',
                     name: 'image_url',
                     "render": function(data, type, full, meta) {
                         return "<img src=\"" + data +
                             "\" height=\"40\" width=\"40\" class=\"img-circle\" onError=\"ImgError(this);\" />";
                     }
                 },
                 {
                     data: 'name',
                     name: 'name',
                     class: 'dark-balck-td',
                     "width": "15%",
                 }, 
                 {
                    data: null,   
                    "orderable": false,
                    "searchable": false,
                    "render": function(o) { 
                             var str = '';
                             if(o.year!=null)
                             {
                                str += o.year; 
                             } 
                             str +='<br>';
                             if(o.location!=null)
                             {
                                str += o.location;
                             } 
                             return str;
                     }
                 },
                 {
                     data: 'type',
                     address: 'type'
                 },
                 {
                     data: 'company',
                     name: 'company'
                 },
                 {
                     data: 'description',
                     name: 'description',
                     class: 'text-overlap-block-disc',
                     "width": "30%",
                     render: function(data, type, row) {
                        return '<p class="render-block-p-disc">'+data+'</p>';
                     }
                 },
                 {
                     data: null, 
                     "orderable": false,
                     "searchable": false,
                     "render": function(o) {
                         if (o.status == '1') {
                             return '<lable class="btn btn-default">Invisible</lable>';
                         } else {
                             return '<lable class="btn btn-primary">Visible</lable>';
                         }

                     }
                 },
                 {
                     data: null,
                     class: 'center-block',
                     "orderable": false,
                     "searchable": false,
                     "render": function(o) {
                         var str = "";
                         str +=
                             '<div class="custom-dropdwon-table link-dropdown"><div class="d-flex"><div class="dropdown"><button class="btn dost-icon-btn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></button><div class="dropdown-menu" aria-labelledby="dropdownMenu2">';
                         str += '<a class="dropdown-item" href="{{ $module_route }}/' +
                             o.id + '/edit"><button class="edit-button"  type="button">Edit</button></a>';
                         str +=
                             '<a href="javascript:void(0);" class="deleteRecord dropdown-item" val="' +
                             o.id + '"><button class="delete-button" type="button">Delete</button></a>';
                         str +=
                             '<a href="javascript:void(0);" class="updateRecord dropdown-item" val="' +
                             o.id + '"><button class="make-button" type="button">';
                         if (o.status == "1") {
                             str += "Make Visible";
                         } else {
                             str += "Make Invisible";
                         }
                         str += '</button></a></div></div></div></div>';
                         return str;
                     }
                 }
             ],
             order: [
                 [1, "DESC"],
             ], 
             drawCallback: function(data) {
                if(this.fnSettings().fnRecordsTotal() == 0)
                 {
                    $("#datatable-basic_info").html('');
                 }
             },
         });

        function getdata()
        {
            var alltype = []; 
            // Initializing array with Checkbox checked values
            $("input[name='type']:checked").each(function(){
                alltype.push(this.value);
            });  
            $.ajax({
                type: "POST",
                url: "{{ url('admin/project') }}/getProjectCount",
                data: {
                            "_token": window.Laravel.csrfToken,
                            "type_id":alltype
                        }, 
                success: function(data) {  
                    if(data.count==0)
                    { 
                        $('#total-match').html('No projects match');
                    }
                    else
                    {
                        $('#total-match').html(data.count+' matches found');
                    }
                }, 
            });  
        }
        $('.filter-type-id').change(function() {  
            getdata();
        });

         jQuery(document).on('click', '.savefilter', function(event) {  
             $(".myModal2").hide(); 
             getdata();
             oTable.draw(false);
         });

         jQuery(document).on('click', '.selectprojectclass', function(event) {
             var orderno = $(this).attr('data-id');
             $("#orderno").val(orderno);
             $(".myModal1").show();
         });
         jQuery(document).on('click', '.rmvmodel', function(event) {
             $(".myModal1").hide();
         });
         jQuery(document).on('click', '.selectfilter', function(event) {
            getdata();
             $(".myModal2").show();
         });
         jQuery(document).on('click', '.rmvfiltermodel', function(event) {
             $(".myModal2").hide();
         });
         jQuery(document).on('click', '.removeHighlight', function(event) {
             var textSwal = "";
             textSwal = "Are you sure want to remove this highlighted project ?";
             var id = $(this).attr('data-val');
             swal({
                    //  title: "Are you sure?",
                     text: textSwal,
                     type: "warning",
                     showCancelButton: true,
                     confirmButtonColor: "#DD6B55",
                     confirmButtonText: "Yes!",
                     cancelButtonText: "No, cancel!"
                 })
                 .then(function() {
                     $.ajax({
                         url: "{{ url('admin/project') }}/" + id + "/rmvhighlight",
                         type: 'POST',
                         data: {
                             "_token": window.Laravel.csrfToken
                         },
                         success: function(data) {
                            // fnToastSuccess(data['message']);
                             window.location.reload();
                             oTable.draw(false);
                         },
                         error: function(xhr, status, error) {
                             if (xhr.responseJSON && xhr.responseJSON.message != "") {
                                 swal("ohh snap!", xhr.responseJSON.message, "error");
                             } else {
                                 swal("ohh snap!", "Something went wrong", "error");
                             }
                             ajaxError(xhr, status, error);
                         }
                     });
                 }, function(dismiss) {})
         });

         //delete Record
         jQuery(document).on('click', '.deleteRecord', function() {
            var textSwal = "";
            textSwal = "Are you sure you want to delete the project?";
            var id = $(this).attr('val'); 
            swal({ 
                    text: textSwal,
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, Delete",
                    cancelButtonText: "No",
                })
                .then(function() {
                    $.ajax({ 
                        url: "{{ url('admin/project') }}/" + id +"/delete-project",
                        type: 'GET',
                        data: {
                            "_token": window.Laravel.csrfToken
                        },
                        success: function(data) { 
                            oTable.draw(false);
                        },
                        error: function(xhr, status, error) {
                            if (xhr.responseJSON && xhr.responseJSON.message != "") {
                                swal("ohh snap!", xhr.responseJSON.message, "error");
                            } else {
                                swal("ohh snap!", "Something went wrong", "error");
                            }
                            ajaxError(xhr, status, error);
                        }
                    });
                }, function(dismiss) {});
         });
        //  jQuery(document).on('click', '.deleteRecord', function(event) {
        //      var id = $(this).attr('val');
        //      var deleteUrl = "{!! $module_route !!}/" + id;
        //      var isDelete = deleteRecordByAjax(deleteUrl, "{{ $module_name }}", oTable);
        //  });
         //update Record
         jQuery(document).on('click', '.updateRecord', function() {
             var textSwal = "";
             textSwal = "Are you sure want to update status ?";
             var id = $(this).attr('val');
             swal({
                    //  title: "Are you sure?",
                     text: textSwal,
                     type: "warning",
                     showCancelButton: true,
                     confirmButtonColor: "#DD6B55",
                     confirmButtonText: "Yes!",
                     cancelButtonText: "No, cancel!"
                 })
                 .then(function() {
                     $.ajax({
                         url: "{{ url('admin/project') }}/" + id + "/project-supdate",
                         type: 'POST',
                         data: {
                             "_token": window.Laravel.csrfToken
                         },
                         success: function(data) {
                           //  fnToastSuccess(data['message']);
                             oTable.draw(false);
                         },
                         error: function(xhr, status, error) {
                             if (xhr.responseJSON && xhr.responseJSON.message != "") {
                                 swal("ohh snap!", xhr.responseJSON.message, "error");
                             } else {
                                 swal("ohh snap!", "Something went wrong", "error");
                             }
                             ajaxError(xhr, status, error);
                         }
                     });
                 }, function(dismiss) {

                 });
         });
         $(document).ready(function() { 
            $('select.form-control').select2({  
                placeholder: "Select role",
                allowClear: true,
                minimumResultsForSearch: -1 
            });
           });
     </script>
 @endpush