@extends('layouts.contentLayoutMaster')

@php
    $breadcrumbs = [[['link' => route('imports.guardians'), 'name' => "استيراد أولباء الامور"]],['title'=> 'إستيراد ملفات أولياء الأمور']];
@endphp


@section('title', 'استيراد - اولياء الامور')

@section('vendor-style')
    <!-- vendor css files -->

@endsection

@section('page-style')

@endsection

@section('content')

    @component('components.forms.formCard',['title' => ' ملفات أولياء الأمور'])

        {!! Form::open(['route' => ['imports.guardians.store'], 'method' => 'POST', 'onsubmit' => 'showLoader()', 'enctype' => 'multipart/form-data', 'id' => 'guardian-form']) !!}


        <x-ui.divider>إعداد ملف أولياء الأمور</x-ui.divider>
        <div class="mb-1 mb-sm-0">
            <p>1- يجب عليك اولا استخدام هذا الملف وتعبئته ببيانات اولياء الامور:</p>
            <a class="btn btn-primary" href="{{route('imports.file.download','guardians')}}"> تنزيل الملف</a>
        </div>
        <x-ui.divider>إستيراد ملف أولياء الأمور</x-ui.divider>


        <div class="mb-1 mb-sm-0">
            <p>2- اختر ملف اولياء الامور:</p>

            <input class="form-control" name="file" type="file" id="formFile" accept=".xlsx, .xls, .csv" required placeholder="اختر ملف اولياء الأمور"/>
        </div>
        @error('file')
            <span class="invalid-feedback text-danger">{{$message}}</span>
        @enderror

        <div class="col-12 text-center mt-2">

            <x-inputs.submit>رفع الملفات</x-inputs.submit>
        </div>

        @if(session()->has('jobId_guardians'))
            <input type="hidden" name="jobID" id="jobID_guardian" value="{{ session()->get('jobId_guardians') }}">
        @endif

        {!! Form::close() !!}

        <div class="row text-center mt-2 ms-1 me-1 d-flex justify-content-center align-items-center" id="feedback_result" style="display: none!important">
            <x-ui.divider>نتيجة معالجة الملف</x-ui.divider>
            <div class="col-6">
                <section id="basic-progress">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">إحصائيات المعالجة :</h4>
                                </div>
                                <div class="card-body">
                                    <div class="demo-vertical-spacing">
                                        <div class="progress-wrapper">
                                            <div id="example-caption-1"> اجمالي الصفوف التي تم معالجتها <span id="totalRowsSpan"></span></div>
                                            <div class="progress progress-bar-primary">
                                                <div id="totalRows" class="progress-bar" role="progressbar" aria-valuemax="100" aria-describedby="example-caption-1"></div>
                                            </div>
                                        </div>
                                        <div class="progress-wrapper">
                                            <div id="example-caption-2"> الصفوف التي تم اضافتها <span id="totalSuccessSpan"></span></div>
                                            <div class="progress progress-bar-success">
                                                <div id="totalSuccess" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" aria-describedby="example-caption-2"></div>
                                            </div>
                                        </div>
                                        <div class="progress-wrapper">
                                            <div id="example-caption-3"> الصفوف التي فشلت اضافتها <span id="totalFailSpan"></span></div>
                                            <div class="progress progress-bar-danger">
                                                <div id="totalFail" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" aria-describedby="example-caption-3"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="col-6">
                <p>تم معالجة الملف اضغط هنا لتحميل النتيجة</p>
                <form action="{{route('feedback.file.download')}}"  id="download_feedback">
                    @method('GET')
                    <input name="url" id="feedback_url" type="hidden">
                    <a onclick="downloadFeedback()" class="btn btn-success">
                        تحميل النتيجة
                    </a>
                </form>
            </div>
        </div>


    @endcomponent

@endsection

@section('vendor-script')
    <!-- vendor files -->
@endsection
@section('page-script')
    <!-- Page js files -->
    <script>
        $('#guardian-form').on('submit', function(event) {
            showLoader()
        });

        function downloadFeedback(){
            showLoader()
            $('#download_feedback').submit()
        }

        $(document).ready(function() {
            showLoaderWithMessage('جاري معالجة الملف رجاء الانتظار ...')
            intervalId =  setInterval(function() {
                input = $('#jobID_guardian').val()
                if(!input)
                {
                    clearInterval(intervalId);
                    hideLoader()
                }
                url = "/admin_dashboard/feedback/"+input
                $.get(url , function(data) {
                    var feedback =data.feedback;

                    if(feedback) {
                        if(feedback.isFail){
                            clearInterval(intervalId);
                            hideLoader()
                            showAlert('حدث مشكلة اثناء المعالجة','error','center')
                        }else if(feedback.isFinished){
                            hideLoader()
                            $('#feedback_url').val(feedback.url)
                            $('#feedback_result').show();
                            clearInterval(intervalId);
                            total = feedback.totalProcessedRows;
                            processed = feedback.totalProcessedRows;
                            success = feedback.totalSuccess;
                            fail = feedback.totalFail;

                            proccessedPercentage = Math.floor((processed / total) * 100);
                            successPercentage = Math.floor((success / total) * 100);
                            failPercentage = Math.floor((fail / total) * 100);

                            $('#totalRows').attr('aria-valuenow', proccessedPercentage);
                            $('#totalRows').css('width', proccessedPercentage + '%');
                            $('#totalRowsSpan').html(proccessedPercentage + '%' + '  (' +total+' صف) ');


                            $('#totalSuccess').attr('aria-valuenow', successPercentage);
                            $('#totalSuccess').css('width', successPercentage + '%');
                            $('#totalSuccessSpan').html(successPercentage + '%' + '  (' +success+' صف) ');

                            $('#totalFail').attr('aria-valuenow', failPercentage);
                            $('#totalFail').css('width', failPercentage + '%');
                            $('#totalFailSpan').html(failPercentage + '%' + '  (' +fail+' صف) ');
                        }else {
                            $('#feedback_result').hide();
                        }


                    }
                })
                    .fail(function(jqXHR, textStatus, errorThrown) {
                        hideLoader()
                        console.log('Error retrieving feedback session variable: ' + textStatus + ', ' + errorThrown);
                    });

            }, 8000); // change interval time to 5 seconds
        });
    </script>

@endsection