@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: var(--bs-heading-color);
            padding: 10px 0px;
        }

        .downlo-btn {
            background: #ea5e39;
            padding: 8px 20px;
            color: white;
            /* width: 150px; */
            text-align: center;
            font-size: 15px;
            text-decoration: none;
            /* display: block; */
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 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;
            border: none;
            margin-left: 10px;
        }


        .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;
            background: var(--nf-mainnav-bg) !important;
            font-size: 15px;
            color: var(--bs-heading-color) !important;
        }

        .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">
                Property Management <i class="ri-arrow-right-s-line"></i> Property <i class="ri-arrow-right-s-line"></i>
                Import Property
            </div>

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

            <div class="row">

                <div class="col-lg-8 col-md-8 col-8 order-2">

                    <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>Add
                                @if($property_count != 0)
                                    <input type="checkbox" class="importcheckbox" value="update"
                                        style="margin-right:5px;margin-left:5px;">Update
                                @endif
                            </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> Add</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 d-none" id="error_section">

                <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>
            <div id="progress_div" class="mt-5">
                <!-- End Error Display -->
                <div class="progress my-3" style="height: 25px;">
                    <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-info"
                    style="width: 0%">
                    0%
                </div>
            </div>
            
            <p id="status-text">Waiting...</p>
        </div>

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

            <div class="row py-5 mt-5" id="export_section">
                <h2 class="import-heading-one">Want to edit a current Property ?</h2>
                <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 overflow-hidden" 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 align-items-center">
                                                <input type="checkbox" class="propcheckbox" name="properties[]"
                                                    value="{{ $property->id }}"><span>{{ $property->name }}</span>
                                            </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$();

            function pollStatus(jobId) {
                fetch(`/import-status/${jobId}`)
                    .then(res => res.json())
                    .then(data => {
                        let bar = document.getElementById("progress-bar");
                        let text = document.getElementById("status-text");

                        bar.style.width = data.progress + "%";
                        bar.innerHTML = data.progress + "%";
                        text.innerHTML = data.message;

                        if (data.progress < 100) {
                            setTimeout(() => pollStatus(jobId), 500);
                        }
                    });
            }

            $('#importProperty').on('submit', function (e) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                $('div.errorresponse').empty();
                $('#error_section').addClass('d-none').removeClass('d-block');
                document.getElementById("progress-bar").style.width = '0%';
                document.getElementById("progress-bar").innerHTML = '0%';
                document.getElementById("status-text").innerHTML = 'Waiting...';

                // $('#progress_div').addClass('d-none');
                $('#export_section').addClass('mt-5');

                var formData = new FormData(this);


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

                let alert_text = "";
                if ($(".upload-btn[data-type='store']").css(
                    'display') == 'none') {
                    alert_text = 'Update';
                } else {
                    alert_text = 'Import';
                }

                Swal.fire({
                    title: 'Alert',
                    text: 'Are you sure to ' + alert_text + '?',
                    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();
                        // $('#progress_div').removeClass('d-none');
                        pollStatus('{{ $jobId }}');

                        $.ajax({
                            url: editUrl,
                            type: 'POST',
                            contentType: false,
                            processData: false,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            data: formData,
                            success: function (response) {

                                console.log(formData.values());

                                // toggleLoader();
                                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(() => {
                                        if ($(".upload-btn[data-type='store']").css(
                                            'display') == 'none') {
                                            Swal.fire('Updated Successfully');
                                        } else {
                                            Swal.fire('Imported Successfully');
                                        }
                                    }, 1000);
                                } else {
                                    $('#error_section').addClass('d-block').removeClass('d-none');
                                    $('#export_section').removeClass('mt-5');
                                    setTimeout(() => {
                                        console.log(response.message === undefined)
                                        if (response.message || response.message !==
                                            undefined) {
                                            Swal.fire("Error While Importing!");
                                        } else {
                                            Swal.fire((response && response.length >
                                                1000 && response.slice(0,
                                                    200)) || response);
                                        }
                                    }, 1000);
                                }
                                //location.reload();
                                $('#file').val("");
                            },
                            error: function (xhr) {
                                // $('#progress_div').addClass('d-none');
                                // toggleLoader();
                                setTimeout(() => {
                                    var errors = xhr.responseJSON.errors;
                                    errMsg = '';
                                    if (xhr.responseJSON.errors || xhr.responseJSON
                                        .error) {
                                        errors = xhr.responseJSON.errors || xhr
                                            .responseJSON.error;
                                        if (typeof errors === 'string') {
                                            errMsg = errors;
                                        } else {
                                            Object.keys(errors).forEach(key => {
                                                errMsg += errors[key] +
                                                    '\n';
                                            });
                                        }
                                        Swal.fire(errMsg);
                                    } else {
                                        Swal.fire("Error While Importing!");
                                    }
                                }, 1000);
                                console.log(errors);
                                $('#file').val("");
                            }
                        });
                    }
                });
            });

            $('.export').on('click', function () {
                toggleLoader();
                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) {
                            toggleLoader();
                            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) {
                            toggleLoader();
                            swal.fire("Error While Exporting!");
                            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 () {
                if ($('.propcheckbox:checked').length > 0) {
                    let text = "";
                    $('.propcheckbox:checked').each(function () {
                        if (text == "") {
                            text += $(this)[0].parentElement.innerText;
                        } else {
                            text += ", " + $(this)[0].parentElement.innerText;
                        }

                        // check if length exceeds 60 chars
                        if (text.length > 70) {
                            text = text.substring(0, 70) + "...";
                        }

                    });
                    $('.propbutton').text(text);
                } else {
                    $('.propbutton').text('Select Properties');
                }
            });
        });
    </script>
@endsection