@push('styles') 
@endpush
<div class="row">
    <div class="col-md-12 col-xl-12 col-xxl-8">
        <div class="form-group"> 
           <label>Type*</label>
            <div>
                <div class="ht-radio">
                    <div class="form-check">
                        {{ Form::radio('type', 'multifamily', isset($result) && isset($result->type) && $result->type == 'multifamily' ? true : null, ['id' => 'perc', 'class' => '', 'autocomplete' => 'off']) }}
                        <label class="form-check-label" for="perc">
                            Multi-Family
                        </label>
                    </div>
                    <div class="form-check">
                        {{ Form::radio('type', 'workforce', isset($result) && isset($result->type) && $result->type == 'workforce' ? true : null, ['id' => 'dolr', 'class' => '', 'autocomplete' => 'off']) }}
                        <label class="form-check-label" for="dolr">
                            Workforce
                        </label>
                    </div>
                    <div class="form-check">
                        {{ Form::radio('type', 'commerical', isset($result) && isset($result->type) && $result->type == 'commerical' ? true : null, ['id' => 'dolr1', 'class' => '', 'autocomplete' => 'off']) }}
                        <label class="form-check-label" for="dolr1">
                            Commerical
                        </label>
                    </div>
                    <div class="form-check">
                        {{ Form::radio('type', 'singlefamily', isset($result) && isset($result->type) && $result->type == 'singlefamily' ? true : null, ['id' => 'dolr2', 'class' => '', 'autocomplete' => 'off']) }}
                        <label class="form-check-label" for="dolr2">
                            Single-Family
                        </label>
                    </div> 
                </div> 
            </div>
            <input type="hidden" id="aftertype">
            @if ($errors->has('type'))
               <span  class="text-danger error-message-custom">{{ $errors->first('type') }}</span>
            @endif
        </div> 
       
        <div class="row">
            <div class="form-group col-lg-5 col-md-12">
                <label>Name of project*</label>
                <div>
                    {{ Form::text('name', null, ['id' => 'name', 'class' => 'form-control']) }}
                    @if ($errors->has('name'))
                        <span class="text-danger error-message-custom">{{ $errors->first('name') }}</span>
                    @endif
                </div>
            </div>
            <div class="form-group col-lg-3 col-md-12">
                <label>Year Built*</label>
                <div>
                    {{ Form::text('year', null, ['id' => 'year', 'class' => 'form-control','placeholder'=>'YYYY']) }}
                    @if ($errors->has('year'))
                        <p class="text-danger">{{ $errors->first('year') }}</p>
                    @endif
                    <span class="text-danger error-message-custom" id="erryear"></span>
                </div>
            </div>
            <div class="form-group label-static-form col-lg-3 col-md-12">
                <label>Total floor area*</label>
                <div>
                   <p class="lable-static">sq. ft.</p>
                    {{ Form::text('floorarea', null, ['id' => 'floorarea', 'class' => 'form-control']) }}
                    @if ($errors->has('floorarea'))
                        <span class="text-danger error-message-custom">{{ $errors->first('floorarea') }}</span>
                    @endif 
                    <span class="text-danger error-message-custom" id="errfloorarea"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-lg-4 col-md-6">
                <label>Client Company*</label>
                <div>
                    {{ Form::text('company', null, ['id' => 'company', 'class' => 'form-control']) }}
                    @if ($errors->has('company'))
                        <span class="text-danger error-message-custom">{{ $errors->first('company') }}</span>
                    @endif
                </div>
            </div>
            <div class="form-group col-lg-4 col-md-6">
                <label>Location*</label>
                <div>
                    {{ Form::text('location', null, ['id' => 'location', 'class' => 'form-control']) }}
                    @if ($errors->has('location'))
                        <span class="text-danger error-message-custom">{{ $errors->first('location') }}</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-12 col-lg-8">
                <label>Description*</label>
                <div>
                    {{ Form::textarea('description', null, ['id' => 'description', 'class' => 'form-control']) }}
                    @if ($errors->has('description'))
                        <span class="text-danger error-message-custom">{{ $errors->first('description') }}</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="flex-block-label">
           <div class="form-group mb-0">
               <label>Photo*(up to 7)</label>
           </div>  
            <div class="row">
               <input type="hidden" id="afterimage">
               @if ($errors->has('image'))
                   <p class="text-danger error-message-custom">{{ $errors->first('image') }}</p>
               @endif 
            </div> 
            <div class="flex-block-upload-main-scroll"> 
               <div class="@if(isset($result)) flex-block-upload-main @endif ">
                <div class="form-block-img-cus">
                   <label class="form__container" id="upload-container">
                       <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M25.3334 17.3333C24.9798 17.3333 24.6407 17.4738 24.3906 17.7238C24.1406 17.9739 24.0001 18.313 24.0001 18.6666V19.1733L22.0267 17.2C21.33 16.5087 20.3883 16.1208 19.4067 16.1208C18.4252 16.1208 17.4835 16.5087 16.7867 17.2L15.8534 18.1333L12.5467 14.8266C11.8402 14.1541 10.9022 13.779 9.92675 13.779C8.95133 13.779 8.01326 14.1541 7.30675 14.8266L5.33341 16.8V9.33332C5.33341 8.97969 5.47389 8.64056 5.72394 8.39051C5.97399 8.14046 6.31313 7.99998 6.66675 7.99998H16.0001C16.3537 7.99998 16.6928 7.85951 16.9429 7.60946C17.1929 7.35941 17.3334 7.02027 17.3334 6.66665C17.3334 6.31303 17.1929 5.97389 16.9429 5.72384C16.6928 5.47379 16.3537 5.33332 16.0001 5.33332H6.66675C5.60588 5.33332 4.58847 5.75474 3.83832 6.50489C3.08818 7.25504 2.66675 8.27245 2.66675 9.33332V25.3333C2.66675 26.3942 3.08818 27.4116 3.83832 28.1617C4.58847 28.9119 5.60588 29.3333 6.66675 29.3333H22.6667C23.7276 29.3333 24.745 28.9119 25.4952 28.1617C26.2453 27.4116 26.6667 26.3942 26.6667 25.3333V18.6666C26.6667 18.313 26.5263 17.9739 26.2762 17.7238C26.0262 17.4738 25.687 17.3333 25.3334 17.3333ZM6.66675 26.6667C6.31313 26.6667 5.97399 26.5262 5.72394 26.2761C5.47389 26.0261 5.33341 25.6869 5.33341 25.3333V20.5733L9.20008 16.7066C9.39596 16.52 9.65617 16.4159 9.92675 16.4159C10.1973 16.4159 10.4575 16.52 10.6534 16.7066L14.8801 20.9333L20.6134 26.6667H6.66675ZM24.0001 25.3333C23.9982 25.5886 23.914 25.8364 23.7601 26.04L17.7467 20L18.6801 19.0666C18.7757 18.9691 18.8898 18.8916 19.0157 18.8387C19.1416 18.7858 19.2768 18.7585 19.4134 18.7585C19.55 18.7585 19.6852 18.7858 19.8111 18.8387C19.9371 18.8916 20.0512 18.9691 20.1467 19.0666L24.0001 22.9466V25.3333ZM30.2801 5.71998L26.2801 1.71998C26.1533 1.5986 26.0037 1.50344 25.8401 1.43998C25.5155 1.30663 25.1514 1.30663 24.8267 1.43998C24.6631 1.50344 24.5136 1.5986 24.3867 1.71998L20.3867 5.71998C20.2624 5.8443 20.1638 5.99189 20.0965 6.15432C20.0293 6.31675 19.9946 6.49084 19.9946 6.66665C19.9946 7.02172 20.1357 7.36225 20.3867 7.61332C20.6378 7.86439 20.9783 8.00544 21.3334 8.00544C21.6885 8.00544 22.029 7.86439 22.2801 7.61332L24.0001 5.87998V13.3333C24.0001 13.6869 24.1406 14.0261 24.3906 14.2761C24.6407 14.5262 24.9798 14.6666 25.3334 14.6666C25.687 14.6666 26.0262 14.5262 26.2762 14.2761C26.5263 14.0261 26.6667 13.6869 26.6667 13.3333V5.87998L28.3867 7.61332C28.5107 7.73829 28.6582 7.83748 28.8206 7.90517C28.9831 7.97286 29.1574 8.00771 29.3334 8.00771C29.5094 8.00771 29.6837 7.97286 29.8462 7.90517C30.0087 7.83748 30.1561 7.73829 30.2801 7.61332C30.4051 7.48937 30.5042 7.3419 30.5719 7.17942C30.6396 7.01694 30.6745 6.84267 30.6745 6.66665C30.6745 6.49063 30.6396 6.31636 30.5719 6.15388C30.5042 5.9914 30.4051 5.84393 30.2801 5.71998Z" fill="#87898B"/>
                       </svg>
                       <p>Upload Photo</p>
                       <input name="image[]" class="form__file" id="upload-files" type="file" accept="image/*" multiple="multiple"/>
                   </label>
                   <div class="form__files-container" id="files-list-container"></div>
                   <div class="flex-block-upload">
                   <div class="set-cover-img-block">
                     <div class="set-cover-img-block-inner" id="oldimagedisplaydata"> 
                     </div> 
                   </div>
               </div> 
               </div> 
               </div> 
               </div> 
        </div> 

        <input type="hidden" name="isdraft" value="" id="isdraft">
        <input type="hidden" id="latitude" name="latitude" class="form-control">
        <input type="hidden" name="longitude" id="longitude" class="form-control">
        <input type="hidden" name="stateShortName" id="stateShortName" class="form-control">
        <input type="hidden" name="country" id="country" class="form-control"> 
    </div>
    <div class="col-md-12 form-group edit-btn-block">
        <span type="submit" id="btn-save-as-draft"
            class="btn corwil-admin-theme-btn-tab corwil-admin-theme-cancel-btn cancel-btn mb-0">Save as Draft</span>
        <button type="submit" id="publish" class="btn common-modal mb-0" type="submit">Publish</button>
    </div>
</div> 
<input type="hidden" value="{{$imagecount}}" id="imagecount"> 
<input type="hidden" value="{{$cyear}}" id="cyear">
<input type="hidden" value="{{$pid}}" id="projectid">
<input type="hidden" id="removededfiles" value="" name="removededfiles">
<input type="hidden" id="iscoverset" value="" name="iscoverset"> 
<input type="hidden" id="imagecountnew" value="{{$imagecount}}" name="imagecountnew">
@push('js') 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=places&callback=initAutocomplete" async></script>
<script>
   let autocomplete;
   /* ------------------------- Initialize Autocomplete ------------------------ */
   function initAutocomplete() {
       // const input = document.getElementById("location");
       // autocomplete = new google.maps.places.Autocomplete(input);
       // autocomplete.addListener("place_changed", onPlaceChange)

       var input = document.getElementById('location');
       var options = {
           types: ['(cities)'],
           //componentRestrictions: {'country': 'us'} 
       }; 
       var autocomplete = new google.maps.places.Autocomplete(input, options);  
       google.maps.event.addListener(autocomplete, 'place_changed', function () {
           var myString = $('#location').val(); 
           myString = myString.substring(0, myString.lastIndexOf(","));
           $("#location").val(myString);
       });
   }
   /* --------------------------- Handle Place Change -------------------------- */
   function onPlaceChange() {
       const place = autocomplete.getPlace(); 
       $('#address_line_2').val(place.name);
       $('#latitude').val(place.geometry['location'].lat());
       $('#longitude').val(place.geometry['location'].lng());

       $("#latitudeArea").removeClass("d-none");
       $("#longtitudeArea").removeClass("d-none");
       addressAutoFillHandler(place);
   }

   function addressAutoFillHandler(data) {
       if (!data.address_components) return;
       for (let address of data.address_components) {
           let addressType = address.types[0];
           switch (addressType) {
               case "locality":
                   $('#city').val(address.short_name);
                   break;
               case "postal_code":
                   $('#zipcode').val(address.long_name);
                   break;
               case "administrative_area_level_1":
                   $('#state').val(address.long_name);
                   $('#stateShortName').val(address.short_name);
                   break;
               case "country":
                   $('#country').val(address.short_name);
                   break;
           }
       }
   }
</script>  
<script  type="text/javascript">
   $(document).ready(function() { 
       var projectid = $('#projectid').val();
       getoldimglist(projectid);
       $.validator.addMethod('maxupload', function(value, element, param) {  
           var length = $(".js-remove-image").length; console.log("length",length);
           return length > param ? false : true; 
       });  
       
       jQuery(document).on('keyup', '#floorarea', function(event) {  
           var floorarea = $("#floorarea").val();  
           $("#floorarea").val(floorarea.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")); 
       });
       
       var cyr = $("#cyear").val();   
       var imagecount = $("#imagecount").val(); 
     
       $("#form_validate").validate({
           ignore: [],
           errorElement: 'p',
           errorClass: 'text-danger',
           normalizer: function(value) {
               return $.trim(value);
           },
           rules: {
               type: {
                   required: true
               },
               name: {
                   required: true,
               },
               description: {
                   required: true,
               },
               location: {
                   required: true
               }, 
               company:{
               required: true
               },
               year:{
               required: true,
               number: true, 
               maxlength: 4,
               minlength: 4,
               min: 1,
               max: cyr,
               },
               floorarea:{ 
               required: true,
               number: true,   
               },
               'image[]': { 
                   maxupload: function() {      
                       @if(isset($result))  
                           return (7 - imagecount); 
                       @else
                           return 7;
                       @endif  
                   },
                   required:  function() { 
                    var imagecountnew = $("#imagecountnew").val();
                    console.log("imagecountnew",imagecountnew); //imagecount<0
                    //    @if(isset($result))  
                    //        return false;
                    //    @else
                    //        return true;
                    //    @endif   
                    if(imagecountnew==0)
                    {
                        return true;
                    } 
                    else
                    {
                        return false;
                    }
                   }, 
               }, 
           }, 
           messages: { 
           'image[]':{
                   maxupload : "You can only upload a maximum of 7 images", 
                   required: "Atleast one image is required.",
           },
           description: {
                   required: "Description is required.",
           },
           location: {
                   required: "Location is required.",
           },
           name: {
                   required: "Name of project is required.",
           },
           type: {
                   required: "Type is required.",
           },
           company: {
                   required: "Client Company is required.",
           },
           floorarea: {
               required: "Floor area is required.",
               pattern: 'Please enter a valid number.',
           },
           year: {
               required: "Year is required.",
               maxlength: 'Please enter a valid 4-digit year.',
               minlength: 'Please enter a valid 4-digit year.',
               min: 'Please enter a valid year that is not in the future.',
               max: 'Please enter a valid year that is not in the future.',
           }
           },
           errorPlacement: function(error, element) {
           if (element.attr("name") === "type") 
           {
               error.insertAfter("#aftertype");
           } 
           else if (element.attr("name") === "image[]") 
           {
               error.insertAfter("#afterimage");
           } 
           else 
           {
               error.insertAfter(element);
           }
           },
           submitHandler:function(form){
               console.log('success',form);
               
               $("#publish").attr('disabled',true);
               $("#btn-save-as-draft").attr('disabled',true);
               form.submit();
           }
       }); 
       
       $('#btn-save-as-draft').on('click', function() {
            $('#isdraft').val('1');
            $("#form_validate").submit();  
       });
       $('#publish').on('click', function() { 
            $('#isdraft').val('0');
            $("#form_validate").submit(); 
       });

       jQuery(document).on('click','.rmvimage',function(){   
           var id = $(this).attr('data-val');
            $.ajax({
                type:'POST',
                url: "{{ url('admin/project') }}/" + id + "/rmvimage",
                data: {
                    "_token": window.Laravel.csrfToken
                },
                success:function(data) { console.log("data.imagecount",data.imagecount);
                   $("#oldimagedisplaydata").empty();
                   $("#imagecountnew").val(data.imagecount);
                   getoldimglist(projectid);
                }
            });
        });   

       jQuery(document).on('click','.setcover',function(){   
           var id = $(this).attr('data-val');
            $.ajax({
                type:'POST',
                url: "{{ url('admin/project') }}/" + id + "/setcover",
                data: {
                    "_token": window.Laravel.csrfToken
                },
                success:function(data) {
                    $('.coverset').addClass('d-none');
                    $('.isoldcover').addClass('d-none'); 
                    $('.defaultsetcover').removeClass('d-none');
                    $('.imgcoverset').removeClass('d-none');
                    $("#oldimagedisplaydata").empty(); 
                    getoldimglist(projectid);
                }
            });
        });   
    function getoldimglist(projectid)
    {    
        //get role list
        $.ajax({
            type: 'POST',
            url: "{{ url('admin/project') }}/" + projectid + "/getoldimglist", 
            dataType: 'json',
            data: {
                "_token": window.Laravel.csrfToken
            },
            success: function(data) { 
            let html = ''; 
            $.each(data?.data, function(index, item) {   
                html += '<div class="flex-block-inner"><div class="img-block"><img src=' + item.image + '></div>\n\
                            <div class="set-cover-img-text">';
                                if (item.iscover == '1')
                                {
                                    html += '<span class="isoldcover">Cover Photo</span> &nbsp;&nbsp;\n\
                                    <button type="button"><span class="defaultsetcover setcover d-none"\n\
                                    data-val="'+item.id+'">Set cover </span> </button>';
                                }  
                                else
                                {
                                    html += ' <button type="button"><span class="isoldsetcover setcover" data-val="'+item.id+'">Set cover </span> </button>';
                                }
                                html += '<button type="button"><span class="rmvimage" data-val="'+item.id+'"> <img src="/assets/img/delete-icon.svg" alt="icon"> </span> </button>\n\
                            </div></div>';   
            });
                if (html != "") {
                  //  $("#imagecount").val(data.data.length);
                    $("#oldimagedisplaydata").append(html); 
                }
            }
        }); 
    }
   });
</script>
<script>
   const INPUT_FILE = document.querySelector('#upload-files');
   const INPUT_CONTAINER = document.querySelector('#upload-container');
   const FILES_LIST_CONTAINER = document.querySelector('#files-list-container');
   const FILE_LIST = [];
   let UPLOADED_FILES = []; 

   const multipleEvents = (element, eventNames, listener) => {
   const events = eventNames.split(' ');
   
       events.forEach(event => {
           element.addEventListener(event, listener, false);
       });
   };

   const previewImages = () => {
       FILES_LIST_CONTAINER.innerHTML = '';
       if (FILE_LIST.length > 0) {   
            var i = 0;
            
           FILE_LIST.forEach((addedFile, index) => {
               
           const content = `
           <div class="form__image-container-flex">
                <div class="form__image-container js-remove-image" data-id="${addedFile.name}" data-index="${index}">
                   <img class="form__image" src="${addedFile.url}" alt="${addedFile.name}"> 
                    </div> 
                <div class="flex-block-cover-img">
                    <p class="d-none coverset" id="iscover${index}">Cover Photo</p>   
                    <p data-id="${addedFile.name}" id="imgcoverset" data-index="${index}" class="flex-link-block imgcoverset iscover${index}">Set cover </p>
                    <a id="deleteimage" data-index="${index}" data-id="${addedFile.name}" class="delete-icon"><img src="/assets/img/delete-icon.svg" alt="icon"> </a>
                </div>
                </div>
           `; 
             

           FILES_LIST_CONTAINER.insertAdjacentHTML('beforeEnd', content);
           i++;

           var imagecount = $("#imagecount").val();  
           if(imagecount==0 && index==0)
           { 
                $('.coverset').removeClass('d-none'); 
                $('.imgcoverset').addClass('d-none');
                $('#iscoverset').val(addedFile.name);
           }
          
           });
       } else {
           INPUT_FILE.value= "";
       }
   }

   const fileUpload = () => {
        if (FILES_LIST_CONTAINER) {
            multipleEvents(INPUT_FILE, 'click dragstart dragover', () => {
            INPUT_CONTAINER.classList.add('active');
            });
        
            multipleEvents(INPUT_FILE, 'dragleave dragend drop change blur', () => {
            INPUT_CONTAINER.classList.remove('active');
            });
        
            INPUT_FILE.addEventListener('change', () => {
            const files = [...INPUT_FILE.files];
            
            files.forEach(file => {
                const fileURL = URL.createObjectURL(file);
                const fileName = file.name;
                if (!file.type.match("image/")){
                alert(file.name + " is not an image");
                } else {
                const uploadedFiles = {
                    name: fileName,
                    url: fileURL,
                };

                FILE_LIST.push(uploadedFiles);
                }
            });
                
            previewImages();
            UPLOADED_FILES = document.querySelectorAll(".js-remove-image");
            removeFile();
            }); 
        }
   };

   const removeFile = () => {
   UPLOADED_FILES = document.querySelectorAll(".delete-icon");
   
   if (UPLOADED_FILES) {
       UPLOADED_FILES.forEach(image => {
       
       image.addEventListener('click', function() {
       
        const fileIndex = $(this).attr('data-index');
        
        const fileid = this.getAttribute('data-id'); 
        
            $('#removededfiles').val(function(i,val) { 
                return val + (!val ? '' : ', ') + fileid;
            }); 
        
           FILE_LIST.splice(fileIndex, 1); 
           var imagecount = $("#imagecount").val();  
             
            if(FILE_LIST.length==(7-imagecount))
            { 
                $("#upload-files-error").html('');
            }
            else
            if(FILE_LIST.length==7)
            { 
                $("#upload-files-error").html('');
            }
           previewImages();
           removeFile();
       });
       });
   } else {
       [...INPUT_FILE.files] = [];
   }
   };

   fileUpload();
   removeFile();

   $(document).ready(function() {   
        $(document).on("click", "#imgcoverset", function () {   
           $('.coverset').addClass('d-none');
           $('.isoldcover').addClass('d-none'); 
           $('.defaultsetcover').removeClass('d-none');
           $('.imgcoverset').removeClass('d-none');
            var fileid = this.getAttribute('data-id');   
            var index = this.getAttribute('data-index'); 
            $('#iscoverset').val(fileid);
            $('#iscover'+index).removeClass('d-none');
            $('.iscover'+index).addClass('d-none');
        });
    });
</script>
@endpush