@extends('user.layouts.template')

@section('style')
<style>
   /* Thumbnail image */
        .thumbnail {
            width: 300px;
            cursor: pointer;
            transition: 0.3s;
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 10000000 !important;
            padding-top: 60px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .modal-content {
            display: block;
            margin: auto;
            max-width: 90%;
            max-height: 80%;
            animation: zoom 0.3s;
        }

        @keyframes zoom {
            from {
                transform: scale(0.7);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .close {
            position: absolute;
            top: 30px;
            right: 40px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }



        i#openFullscreen {
            font-size: 26px;
            color: #353535;
            text-decoration: none !important;
        }

        a.fullscreen-build.mx-2 {
            text-decoration: none;
        }

        .offcanvas.offcanvas-end {
            width: 700px !important;
        }

        .form-label {
            margin-bottom: 0px;
            color: var(--bs-emphasis-color);
            font-size: 14px;
        }

        /*---Import Data Css---*/

        .import-title {
            font-size: 20px;
            color: #ea5e39;
            font-weight: 600;
        }

        .import-box {
            padding: 20px;
        }

        .import-para {
            font-size: 15px;
            color: black;
            padding: 10px 0px;
        }

        .downlo-btn {
            background: #ea5e39;
            padding: 8px;
            color: white;
            width: 150px;
            text-align: center;
            font-size: 15px;
            text-decoration: none;
            border-radius: 10px;
        }

        .upload-btn{
            background: #ea5e39;
            padding:8px;
            color:white;
            width:150px;
            text-align: center;
            font-size:15px;
            text-decoration: none;
            border-radius: 10px;
            position: relative;
            right:20px;
        }


        .hor-line {
            background: white !important;
            position: absolute;
            top: 0px;
            height: 10px;
        }

        .import-heading {
            color: white;
            font-size: 18px;
            font-weight: 400;
        }

        .import-heading-one {
            color: grey;
            font-size: 18px;
            font-weight: 400;
        }



        .dropdown-toggle.form-select {
            text-align: left;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
        }

        .dropdown-menu {
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
        }

        .dropdown-item input[type="checkbox"] {
            margin-right: 10px;
        }

        .dropdown-item input[type="checkbox"]:checked {
           accent-color: #ea5e39;
  
        }

        /*---Import Data Css Ends---*/
</style>
@endsection

@section('content')
<!-- Content Start -->
		 <div class="content__boxed">
                <div class="content__wrap">

                    <div id="page-titl">

                    </div>

                    <!--===========Select Property============-->

                    <div class="row">

                        <div class="col-lg-8 col-md-8 col-8">
                           
                        <form id="importProperty" action="{{ route('importPropertyExcel') }}" method="POST" enctype="multipart/form-data">
                            <div class="card import-box">
                                <h1 class="import-title mb-0 mt-0 py-0 pb-0">Upload Excel File</h1>

                                <p class="import-para">
                                    <span style="padding-right:25px;">Select and upload the excel file below to add the data to
                                    stackplanner</span>
                                    <input type="checkbox" class="importcheckbox" value="store" style="margin-right:5px;" checked>Create
                                    <input type="checkbox" class="importcheckbox" value="update" style="margin-right:5px;margin-left:5px;">Update
                                </p>
                                <div class="d-flex justify-content-between align-items-center">
                                <input type="file" id="file" name="file" placeholder="Upload File" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" class="form-control"/>
                                <input type="hidden" name="importtype" id="importtype" value="store">
                                <button type="submit" class="upload-btn" style="display:block;" data-type="store"><i class="ri-upload-fill"></i> Create</button>
                                <button type="submit" class="upload-btn" style="display:none;" data-type="update"><i class="ri-upload-fill"></i> Update</button>

                                </div>    
                            </div>
                        </form>

                        </div>

                        <div class="col-lg-4 col-md-4 col-4">
                            <div class="card import-box">

                                <h1 class="import-title mb-0 mt-0 py-0 pb-0">Download Template</h1>

                                <p class="import-para">Click the button below to download the template</p>

                                <a href="{{ asset('properties/propertyImport11.xlsx') }}" class="downlo-btn" download><i class="ri-download-fill"></i> Download</a>

                            </div>
                        </div>
                    </div>

                    <!-- Error Display -->
                     <div class="row mt-3">

                        <div class="col-lg-12 col-md-12 col-12">

                            <div class="card import-box">
                                <h1 class="import-title mb-0 mt-0 py-0 pb-0">Import Results</h1>

                                <p class="import-para">Import Results are displayed here ...</p>
                                <div class="d-flex justify-content-between align-items-center">
                                <div class="errorresponse"></div>

                                </div>    
                            </div>
                        </div>

                    </div>
                    <!-- End Error Display -->

                    <!--===========Edit Property============-->

                    <div class="row py-5">
                        <h2 class="import-heading-one">Want to edit a current Property ?</h2>
                        <hr style="background: grey; width:77%; position: relative; left:260px; bottom: 20px;">
                        <div class="col-lg-8 col-md-8 col-8">

                            <div class="card import-box">
                                <h1 class="import-title mb-0 mt-0 py-0 pb-0">Download Updated Template</h1>

                                <p class="import-para">To edit the current properties, select the updated template from
                                    the list below.</p>
                                <div class="d-flex justify-content-between align-items-center">

                                    <div class="dropdown w-100">
                                        <button class="form-select dropdown-toggle propbutton" type="button"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            Select Properties
                                        </button>
                                        <ul class="dropdown-menu w-100 proplist">
                                            @foreach($properties as $property)
                                            <li>
                                                <label class="dropdown-item">
                                                    <input type="checkbox" class="propcheckbox" name="properties[]" value="{{ $property->id }}"> {{ $property->name }}
                                                </label>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>

                                    <a href="#" class="downlo-btn mx-2 export"><i class="ri-download-fill"></i> Download</a>
                                    <div class="expexcel"></div>
                                </div>

                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4 col-4">
                        </div>
                        
                    </div>

                    <!-- End Export Property -->




                </div>
            </div>
            <!-- Content End -->
@endsection

@section('script')
<!-- Magic Zoom CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/magictoolbox/magiczoom/magiczoom.css">
<!-- Sweet Alert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
        $(document).ready(function () {
        var myTable =  $('#property-list').DataTable({
              "paging": true,             // Enable pagination
              "searching": true,          // Enable search box
              "ordering": true,           // Enable sorting
              "info": true,               // Show table info
              "lengthMenu": [8, 10, 25],  // Page size options
              "pageLength": 8,            // Default page size
  
              "columnDefs": [
                 { "type": "date-dd-mmm-yyyy", "targets": 5 } // Apply date sorting on column index 2
              ]
           });

        var allPages = myTable.rows().nodes().to$();

        

         $('#importProperty').on('submit', function (e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            $('div.errorresponse').empty();

            var formData = new FormData(this);

            if($('#file').val() == '') {
                Swal.fire('Please select a file');
               return false;
            }

            Swal.fire({
               title: 'Alert',
               text: 'Are you sure to import?',
               icon: 'info',
               showCancelButton: true,
               customClass: {
                  confirmButton: 'btn btn-danger',
                  cancelButton: 'btn btn-secondary'
               },
               confirmButtonText: 'Yes'
            }).then((result) => {
               if(result.isConfirmed) {
                  let editUrl = '{{ route("importPropertyExcel") }}';
                  toggleLoader();
                  $.ajax({
                     url: editUrl,
                     type: 'POST',
                     contentType: false,
                     processData: false,
                     headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                     },
                     data: formData,
                     success: function(response) {
                        toggleLoader();
                        //console.log(response.message);
                        let message = response.message;
                        let rowNo = response.rowNo;
                        let errorCount = response.errorCount;
                        let i = 0;
                        if (errorCount > 0) {
                           $('div.errorresponse').append(`<a href="{{ asset('storage/app/public/properties/import/exportPropertyIssues.xlsx') }}" class="btn btn-secondary" download>Download Excel</a>`)
                        }
                        $.each(message, function (index, value) {
                           $('div.errorresponse').append('<div class="row mt-2"><p style="color:black;font-weight:bold;">Row: '+rowNo[i]+'</p>');
                           $.each(value, function(index1, value1) {
                              $('div.errorresponse').append('<p style="color:red;">'+value1+'</p>');
                           });
                           $('div.errorresponse').append('</div>');
                           i++;
                        });
                        if(response.status == true) {
                            setTimeout(() => {            
                                Swal.fire('Imported Successfully');
                            }, 1000);
                        }else{
                            setTimeout(() => {            
                                Swal.fire("Error While Importing!");
                            }, 1000);
                        }
                        //location.reload();
                    },
                    error: function(xhr) {
                         setTimeout(() => {            
                             Swal.fire("Error While Importing!");
                         }, 1000);
                        toggleLoader();
                        const errors = xhr.responseJSON.errors;
                        Swal.fire(errors);
                        console.log(errors);
                     }
                  });
               }
            });
         });

         $('.export').on('click', function () {
            var properties = Array();
            $('.expexcel').empty();

            $('.proplist').find('input[type="checkbox"]:checked').each(function () {
                properties.push($(this).val());
            });

            if (properties.length > 0) {
            $.ajax({
                url: '{{ route("exportPropertyExcel") }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: { properties:properties },
                success: function (response) {
                    console.log(response.message);
                    if (response.status) {
                        $('.expexcel').append(`<a href="{{ asset("storage/app/public/properties/import/exportPropertyUpdate.xlsx") }}" download class="btn btn-sm"><button class="expbtn">Download</button></a>`);
                        $('.expbtn').click();
                        $('.expexcel').empty();
                    }
                },
                error: function (xhr) {
                    console.log(xhr.responseText);
                }
            });
        }
        });

        $(".importcheckbox").on("click", function () {
            if($(this).is(':checked')) {
                $(".importcheckbox").not(this).prop("checked", false);
            }
            
            $("#importtype").val($(this).val());
            $(".upload-btn").css('display', 'none');

            if($(this).val() == 'store') {
                $(".upload-btn[data-type='store']").css('display', 'block');
            } else {
                $(".upload-btn[data-type='update']").css('display', 'block');
            }
        });

        $('.propcheckbox').on('click', function () {
            let text = $(this)[0].nextSibling.nodeValue.trim();
            let value = $('.propbutton').text();

            if ($('.propcheckbox:checked').length == 0) {
                $('.propbutton').text('Select Properties');
            } else if ($('.propcheckbox:checked').length == 1) {
                value = value.replace('Select Properties', '');
                $('.propbutton').text(value + text + ', ');
            } else {
                let newValue = value.replace((text + ','), '');
                $('.propbutton').text(newValue);
            }
        });
        });
     </script>
@endsection