@extends('admin.layout.app')

@section('title')
    Unique Code
@endsection

@section('header')
    <div class="page-header-content d-lg-flex">
        <div class="d-flex">
            <h4 class="page-title mb-0">
                Home - <span class="fw-normal">Unique Code Management</span>
            </h4>
        </div>
        @can('coupons-create')
            <div class="d-flex my-lg-auto ms-lg-auto">
                <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3">
                    <a href="#" class="btn btn-outline-primary btn-labeled btn-labeled-start rounded-pill"
                        data-bs-toggle="modal" data-bs-target="#import">
                        <span class="btn-labeled-icon bg-primary text-white rounded-pill">
                            <i class="ph-file-xls"></i>
                        </span>
                        Import Unique Code
                    </a>
                </div>
                <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-2">
                    <a href="{{ route('coupons.create') }}"
                        class="btn btn-outline-primary btn-labeled btn-labeled-start rounded-pill">
                        <span class="btn-labeled-icon bg-primary text-white rounded-pill">
                            <i class="ph-plus"></i>
                        </span>
                        Create Unique Code
                    </a>
                </div>
            </div>
        @endcan
    </div>
    @include('admin.coupon.import')
@endsection

@section('content')
    <style>
        .progress-container {
            width: 100%;
            text-align: center;
            font-family: 'Arial', sans-serif;
        }

        .progress-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .progress {
            background-color: #f3f3f3;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            height: 30px;
        }

        .progress-bar {
            background: linear-gradient(90deg, #007bff, #00c3ff);
            border-radius: 10px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: bold;
        }

        .progress-text {
            position: absolute;
            width: 100%;
            text-align: center;
            color: #fff;
            font-weight: bold;
        }
    </style>
    <div class="col-sm-12" id="app">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Unique Code</h5>
            </div>
            <div class="card-body">
                @include('admin.coupon.filter')
                <div class="progress-container" v-if="isImporting">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                            :style="`width: ${progressPercentage}%`" :aria-valuenow="progressPercentage" aria-valuemin="0"
                            aria-valuemax="100">
                            <span class="progress-text">
                                @{{ progressPercentage }}%
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table datatable-basic">
                <thead class="thead">
                    <tr>
                        <th>No</th>
                        <th>Unique Code</th>
                        {{-- <th class="text-center">Actions</th> --}}
                    </tr>
                </thead>
                <tbody>
                    @foreach ($coupons as $key => $coupon)
                        <tr>
                            <td>{{ $coupons->firstItem()+$key }}</td>
                            <td>{{ $coupon->code }}</td>
                            {{-- <td class="text-center">@include('admin.coupon.actions')</td> --}}
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div>
                {{ $coupons->appends(request()->query())->links('vendor.pagination.bordered-rounded') }}
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{-- <script src="https://unpkg.com/vue@3"></script> --}}
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    {{-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        $(function() {
            const app = {
                data() {
                    return {
                        progressPercentage: 0,
                        isImporting: false,
                        params: {
                            id: null
                        },
                        previousPendingJobs: null
                    };
                },
                mounted() {
                    this.getInitialProgress();
                    this.getProgress();
                },
                methods: {
                    getInitialProgress() {
                        axios.get("{{ route('coupons.progress') }}")
                            .then(response => {
                                if (response.data && response.data.total_jobs !== undefined && response.data.pending_jobs !== undefined) {
                                    let totalJobs = parseInt(response.data.total_jobs);
                                    let pendingJobs = parseInt(response.data.pending_jobs);
                                    let completedJobs = totalJobs - pendingJobs;

                                    if (pendingJobs == 0) {
                                        this.progressPercentage = 100;
                                        this.isImporting = false;
                                    } else {
                                        this.progressPercentage = parseInt((completedJobs / totalJobs) * 100).toFixed(0);
                                        this.isImporting = true;
                                    }
                                }
                            })
                            .catch(error => {
                                console.error('Error fetching initial progress:', error);
                                this.isImporting = false;
                            });
                    },
                    getProgress() {
                        let self = this;
                        let progressResponse = setInterval(() => {
                            axios.get("{{ route('coupons.progress') }}")
                                .then(function(response) {
                                    if (response.data && response.data.total_jobs !== undefined && response.data.pending_jobs !== undefined && response.data.pending_jobs > 0) {
                                        self.isImporting = true;
                                        let totalJobs = parseInt(response.data.total_jobs);
                                        let pendingJobs = parseInt(response.data.pending_jobs);
                                        let completedJobs = totalJobs - pendingJobs;

                                        if (self.previousPendingJobs !== undefined && self.previousPendingJobs !== pendingJobs) {
                                            if (pendingJobs == 0) {
                                                self.progressPercentage = 100;
                                                clearInterval(progressResponse);
                                            } else {
                                                self.progressPercentage = parseInt((completedJobs / totalJobs) * 100).toFixed(0);
                                            }
                                        }

                                        self.previousPendingJobs = pendingJobs;
                                    } else {
                                        self.progressPercentage = 100;
                                        clearInterval(progressResponse);
                                    }
                                })
                                .catch(function(error) {
                                    console.error('Error fetching progress:', error);
                                    clearInterval(progressResponse);
                                    self.isImporting = false;
                                });
                        }, 1000);
                    }
                }
            }
            Vue.createApp(app).mount("#app");
    
            const swalInit = swal.mixin({
                buttonsStyling: false,
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-light',
                    denyButton: 'btn btn-light',
                    input: 'form-control'
                }
            });
    
            $(".sa-confirm").click(function(event) {
                event.preventDefault();
                swalInit.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    buttonsStyling: false,
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-danger'
                    }
                }).then((result) => {
                    if (result.value === true) $(this).closest("form").submit();
                });
            });
    
            $('.validate').validate({
                errorClass: 'validation-invalid-label',
                successClass: 'validation-valid-label',
                validClass: 'validation-valid-label',
                highlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).addClass('is-invalid');
                    $(element).removeClass('is-valid');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).removeClass('is-invalid');
                    $(element).addClass('is-valid');
                },
                errorPlacement: function(error, element) {
                    if (element.hasClass('select2-hidden-accessible')) {
                        error.appendTo(element.parent());
                    } else if (element.parents().hasClass('form-control-feedback') || element.parents()
                        .hasClass('form-check') || element.parents().hasClass('input-group')) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    file: {
                        required: true,
                        filesize: 5242880
                    }
                },
                messages: {
                    file: {
                        required: "Please select a file to upload.",
                        filesize: "The file size must not exceed 5MB."
                    }
                }
            });
    
            $.validator.addMethod("filesize", function(value, element, param) {
                return this.optional(element) || (element.files[0] && element.files[0].size <= param);
            }, "File size must not exceed 5MB.");
        });
    </script>
    
@endsection