@extends('Admin/layout')
@section('title','Property Import')
@section('content')
@if(has_permission('Plot','Import'))
<div class="container-fluid">
    <div class="row">
        <div class="col-xxl-12">
            <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Property Import</h4>
                    <div class="flex-shrink-0">
                           @if(has_permission('Plot','Delete All'))
                           <div class="form-check form-switch form-switch-right form-switch-md">
                              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bs-example-modal-center">Delete All Property</button>
                           </div>
                           @endif
                     </div>
            </div>
            <!-- end card header -->
            <div class="card-body">
                <div class="live-preview">
                <form action="" method="POST" class="needs-validation" enctype="multipart/form-data" id="upload_form"  novalidate>
                {{ csrf_field() }}
                    <input type="hidden" name="actiontype" value="{{$actiontype}}"/>
                    <div class="row">

                                <div class="col-md-3">
                                    <div class="form-group mb-4">
                                    <label class="form-label">Upload Property Data <span class="text-danger">*</span></label>
                                        <div class="custom-file text-left">
                                            <input type="file" name="file" class="custom-file-input" id="customFile" value="{{$tmp_filename}}" accept=".csv" >
                                            <label class="custom-file-label" for="customFile">Choose Property file</label>
                                        </div>
                                        <p>Download Sample: <a href="{{env('APP_URL')}}/assets/SampleData/SamplePropertyData.csv">Download Here</a></p>
                                       
                                    </div>
                                </div>
                               
                                <div class="col-md-3" style="margin-top: 20px;">
                                    <div class="form-group mb-4">
                                        <!-- <button class="btn btn-secondary">OK</button> -->
                                    <input class="btn btn-primary" type="button" name="btn" value="Check & Verify"  id="checkfiledata" style="display:none;" >
                                     
                                    </div>
                                </div>

                                <div class="col-md-2" style="margin-top: 20px;display:none;" id="importbtn" >
                                    <div class="form-group mb-4" id="importbtnstatus" style="display:none;">
                                        <input type="button" name="btn1" value="import" class="btn btn-success" id="import">
                                    </div>
                                </div>

                        <!--end col-->
                       
                    </div>
                    
                    
                    <!--end row-->
                </form>
                <div class="row">
                            <form class="g-3" id="formId" action="{{route('visitportal.downloadExcelFile')}}">
                                @csrf
                                <input type="hidden" name="export" value="Export"/>
                                <!-- <button type="button" class="btn btn-primary" style="margin: 10px;" data-bs-toggle="modal" data-bs-target="#bs-example-modal-center-download">Download Excel File</button> -->
                                 <p style="margin: 10px;">Download Company, Associate, Scheme List: <span data-bs-toggle="modal" data-bs-target="#bs-example-modal-center-download"  class="text-primary" style="cursor:pointer;">Download Excel File</span></p>
                            </form>
                             <form class="g-3" id="formIdplotcategory" action="{{route('visitportal.downloadExcelFilePlotCategory')}}">
                                @csrf
                                <input type="hidden" name="export" value="Export"/>
                                <!-- <button type="button" class="btn btn-primary" style="margin: 10px;" data-bs-toggle="modal" data-bs-target="#bs-example-modal-center-download">Download Excel File</button> -->
                                  <p style="margin: 10px;">Download Plot Category/Facing/Shapes: <span data-bs-toggle="modal" data-bs-target="#bs-example-modal-center-plotcategorydownload"  class="text-primary" style="cursor:pointer;">Download Excel File</span></p>
                            </form>
                           
                    </div>
                </div>
                <div class="row text-danger">
                        <h3 class="text-danger">Note*</h3>
                        <p class="mb-0">1. Booking Date, Allotment Date, Apf Date must be valid date format (dd-mm-YYYY) only Ex. 15-01-2024 . Text are not allowed</p>
                        <p class="mb-0">2. Scheme Id, Associate Id must be validate from scheme sheet and associate sheet.</p>
                    </div>
            
            </div>
            </div>
        </div>
        <!-- end col -->
    </div>
    <div class="modal fade bs-example-modal-center-download" id="bs-example-modal-center-download" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-5">
                    <!-- <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                    </lord-icon> -->
                    <div class="mt-4">
                    <h4 class="mb-3">Are you sure want to download file.</h4>
                    <div class="hstack gap-2 justify-content-center">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">NO</button>
                        <a href="javascript:void(0);" onclick="downloadExcelFile()" class="btn btn-success">Yes</a>
                    </div>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
      <div class="modal fade bs-example-modal-center-plotcategorydownload" id="bs-example-modal-center-plotcategorydownload" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-5">
                    <!-- <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                    </lord-icon> -->
                    <div class="mt-4">
                    <h4 class="mb-3">Are you sure want to download file.</h4>
                    <div class="hstack gap-2 justify-content-center">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">NO</button>
                        <a href="javascript:void(0);" onclick="downloadExcelPlotCategoryFile()" class="btn btn-success">Yes</a>
                    </div>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="row">
        <div class="card display" style="display:none;">
            <div class="card-body" >
                <div class="row" >
                    <div class="col-md-3" >
                        <p style="color:#000; font-weight:bold;margin-bottom:0px;">Total Data : <span id="total_data">{{$total_data}}</span></p>
                    </div>
                    <div class="col-md-3">
                        <p style="color:blue; font-weight:bold;margin-bottom:0px;">Correct Data : <span id="correct_data">{{$correct_data}}</span></p>
                    </div>
                    <div class="col-md-6">
                        <p style="color:red; font-weight:bold;margin-bottom:0px;">Wrong Data : <span id="wrong_data">{{$wrong_data}}</span> 
                        <span onclick="downloadErrorFile()" style="color:green;cursor:pointer;">Download Error File</span>
                    </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card display" style="display:none;">
            <div class="card-body">
                <div class="table-responsive">
                    <h1 >Data List</h1>
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Scheme Id</th>
                                <th>Plot No</th>
                                <th>Booking Date</th>
                                <th>Allotment Date</th>
                                <th>Apf Date</th>
                                <th>Associate Id</th>
                                <th>Area</th>
                                <th>Brokeragable Size</th>
                                <th>Extra Commission</th>
                                <th>Party Name</th>
                                <th>Party Email</th>
                                <th>Party Phone</th>
                                <th>Comments</th>
                            </tr>
                        </thead>
                        <tbody id="table1">
                            
                        </tbody>
                        
                    </table>  
                </div>
            </div>
        </div>
    </div>

</div>

<div class="modal fade bs-example-modal-center" id="bs-example-modal-center" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-body text-center p-5">
            <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
            </lord-icon>
            <div class="mt-4">
               <h4 class="mb-3">Do you want to delete all plot?</h4>
               <div class="hstack gap-2 justify-content-center">
                  <button type="button" class="btn btn-light" data-bs-dismiss="modal">NO</button>
                  <a href="javascript:void(0);" onclick="deleteAllPlot()" class="btn btn-danger">Yes</a>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

<script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<script>
        $(document).ready(function(){
            $("#import").click(function(){    
                if (confirm('Are you sure want to import data')) {
                    uploadData(this.id);
                }  
            });
        });
        $(document).ready(function(){
            $("#checkfiledata").click(function(){   
               
                 uploadData(this.id);
            });
        });
        function uploadData(actionType){
           
            // $('#upload_form').on('submit', function(event){
                $("#overlay1").fadeIn(300);
                var fd = new FormData();
                var customFile = $('#customFile')[0].files;
                // Check file selected or not
                if(customFile.length > 0 ){
                fd.append('file',customFile[0]);
                }else{
                fd.append('file_url',$("#customFile").val());
                }

                fd.append('actionType',actionType);
                fd.append('_token',$('meta[name="csrf-token"]').attr('content'));
                event.preventDefault();
                $.ajax({
                    url:"{{route('visitportal.uploadPropertyData')}}",
                    method:"POST",
                    data:fd,
                    dataType:'json',
                    contentType:false,
                    cache:false,
                    processData:false,
                    beforeSend: function() {
                        $("#overlay1").fadeIn(300);
                    },
                    success:function(data)
                    {
                        
                        var tr;
                        $("#table1").empty();
                        
                        if(data.status == '400')
                        {
                            Toastify({
                                text: data.message,
                                className: "danger",
                                style: {
                                background: "linear-gradient(to right, #f06548, #f06548)",
                                }
                            }).showToast();
                      
                        return false;
                        }else if(data.status == '201'){
                            Toastify({
                                text: data.message,
                                className: "success",
                                style: {
                                    background: "linear-gradient(to right, #00b09b, #96c93d)",
                                }
                            }).showToast();
                            location.reload();
                        }
                        else
                        {
                            
                            var list = data.wrongPropertyData;    
                            if (list != null && list != undefined && list.length >0) {
                                $.each(list, function (index, item) {
                                    
                                    tr = $('<tr/ >');
                                    tr.append('<td>' + item[0] + '</td>');
                                    tr.append('<td>' + item[1] + '</td>');
                                    tr.append('<td>' + item[2] + '</td>');   
                                    tr.append('<td>' + item[3] + '</td>');    
                                    tr.append('<td>' + item[4] + '</td>');    
                                    tr.append('<td>' + item[5] + '</td>');
                                    tr.append('<td>' + item[6] + '</td>');
                                    tr.append('<td>' + item[7] + '</td>');   
                                    tr.append('<td>' + item[8] + '</td>');    
                                    tr.append('<td>' + item[9] + '</td>');    
                                    tr.append('<td>' + item[10] + '</td>');    
                                    tr.append('<td>' + item[11] + '</td>');    
                                    tr.append('<td>' + item[12] + '</td>');    
                                    tr.append('<td style="color:red;">' + item[13] + '</td>');
                                    $('#table1').append(tr);
                                })
                            }
                        
                            $("#total_data").text(data.total_data);
                            $("#correct_data").text(data.correct_data);
                            $("#wrong_data").text(data.wrong_data);
                            if(data.importbtnstatus == true){
                                $("#importbtnstatus").css('display', 'block');
                                $("#checkfiledata").css('display', 'none');
                            }
                            
                            $('.display').css('display', 'block');
                            $('#importbtn').css('display', 'block');
                        }
                    },
                    complete: function(){
                        setTimeout(function(){
                            $("#overlay1").fadeOut(300);
                        },500);
                    },
                });

            // });
            // $("#upload_form").submit();
        }
        </script>
      
	 
    <script>
        function downloadErrorFile(){
           var filedata = [];
           var myTab = document.getElementById('table1');
           
            // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
            for (i = 0; i < myTab.rows.length; i++) {
                
                // GET THE CELLS COLLECTION OF THE CURRENT ROW.
                var objCells = myTab.rows.item(i).cells;
                var tempData = [];
                // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
                for (var j = 0; j < objCells.length; j++) {
                    // info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
                    tempData[j] = objCells.item(j).innerHTML;
                }
                filedata.push(tempData);
                // info.innerHTML = info.innerHTML + '<br />';     // ADD A BREAK (TAG).
            }

                var searchModel = {errordata : filedata,  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')};
                
                
                event.preventDefault();
                $.ajax({
                    url:"{{route('visitportal.propertyDataexportCSVErrorFile')}}",
                    method:"POST",
                    data:JSON.stringify(searchModel),
                    dataType:'json',
                    // contentType:'text/csv',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    // cache:false,
                    // processData:false,
                    beforeSend: function() {
                        $('#loader').removeClass('hidden')
                    },
                    success:function(data)
                    {
                        
                    
                    },
                    complete: function(data){
                        
                        var responseText = data.responseText;
                        console.log(responseText);
                        
                         /*
                        * Make CSV downloadable
                        */
                        var downloadLink = document.createElement("a");
                        var fileData = ['\ufeff'+responseText];

                        var blobObject = new Blob(fileData,{
                            type: "text/csv;charset=utf-8;"
                        });

                        var url = URL.createObjectURL(blobObject);
                        downloadLink.href = url;
                        downloadLink.download = "PropertyDataErrorFile.csv";

                        /*
                        * Actually download CSV
                        */
                        document.body.appendChild(downloadLink);
                        downloadLink.click();
                        document.body.removeChild(downloadLink);
                        $('#loader').addClass('hidden')
                    },
                });
            // console.log(filedata);
        }

        function deleteAllPlot(){
            $.ajax({
                type:'DELETE',
                cache: false,
                url:"{{route('visitportal.plot-delete-all')}}",
                dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function(data) {
                    $('#bs-example-modal-center').modal('hide');
                    if(data.status == 'success'){
                        Toastify({
                            text: "Data delete successfully",
                            className: "success",
                            style: {
                            background: "linear-gradient(to right, #00b09b, #96c93d)",
                            }
                        }).showToast();
                    }else{
                        Toastify({
                            text: "Unable to delete data",
                            className: "danger",
                            style: {
                            background: "linear-gradient(to right, #f06548, #f06548)",
                            }
                        }).showToast();
                    }
                
                }
            });
        }

        $("#customFile").on('change',function() {
            $("#table1").empty();
            $('.display').css('display', 'none');
            $("#checkfiledata").css('display', 'block');
            $('#importbtnstatus').css('display', 'none');
        });
    </script>
    <script>
        function downloadExcelFile(){
            $("#formId").submit();
            
            $("#bs-example-modal-center-download").modal('hide')
        }

        function downloadExcelPlotCategoryFile(){
            $("#formIdplotcategory").submit();
            
            $("#bs-example-modal-center-plotcategorydownload").modal('hide')
        }
    </script>
@endif
@endsection