@extends('administrative.layouts.master')
@section('page-css')
    <script
        src="https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.8/script/monochrome/bundle.min.js                                                                                                                                                                                                                                                                                                                                                         ">
    </script>
    <link href="https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.8/css/line.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/read-excel-file@5.7.1/bundle/read-excel-file.min.js
                                                                                                                                        ">
    </script>
    <link href="https://cdn.jsdelivr.net/npm/read-excel-file@5.7.1/bundle/lib/prism.min.css" rel="stylesheet">

    <style>
        .select2-container--default .select2-selection--single {
            height: 40px !important;
        }

        .navbar {
            position: absolute;
        }

        .main1 {
            width: 100%;
            height: 45vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: pop;
            flex-direction: column;
        }

        .head {
            text-align: center;
        }

        .head_1 {
            font-size: 30px;
            font-weight: 600;
            color: #333;
        }

        .head_1 span {
            color: #727cf5;
        }

        .head_2 {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-top: 3px;
        }

        .ul-progress {
            display: flex;
            margin-top: 80px;
        }

        ul li {
            list-style: none;
            display: flex;
            flex-direction: column;

        }

        ul li .icon {
            font-size: 35px;
            color: #727cf5;
            margin: 0 60px;
        }

        ul li i {
            position: relative;
            left: 20px;
        }

        .progress i {
            position: relative;
            left: 0px;
        }

        ul li .text {
            font-size: 14px;
            font-weight: 600;
            color: #727cf5;
        }

        /* Progress Div Css  */
        .progress {
            overflow: visible;
        }

        ul li .progress {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(68, 68, 68, 0.781);
            margin: 14px 0;
            display: grid;
            place-items: center;
            color: #ffffff;
            position: relative;
            cursor: pointer;
        }

        ul li .progress>p {
            margin: auto;
        }

        .progress.one::after {
            display: none;
        }

        .progress::after {
            content: "";
            position: absolute;
            width: 125px !important;
            height: 5px !important;
            background-color: rgba(0, 0, 0, 0.781);
            right: 30px;
        }

        .one::after {
            width: 0;
            height: 0;
        }

        ul li .progress .uil {
            display: none;
        }

        ul li .progress p {
            font-size: 13px;
        }

        /* Active Css  */

        ul li .active {
            background-color: #727cf5;
            display: grid;
            place-items: center;
        }

        li .active::after {
            background-color: #727cf5;
        }

        ul li .active p {
            display: none;
        }

        ul li .active .uil {
            font-size: 20px;
            display: flex;
        }

        /* Responsive Css  */

        @media (max-width: 1080px) {
            ul {
                flex-direction: column;
            }

            ul li {
                flex-direction: row;
            }

            ul li .progress {
                margin: 0 30px;
            }

            .progress::after {
                width: 5px;
                height: 55px;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
            }

            .one::after {
                height: 0;
            }

            ul li .icon {
                margin: 15px 0;
            }
        }

        @media (max-width:600px) {
            .head .head_1 {
                font-size: 24px;
            }

            .head .head_2 {
                font-size: 16px;
            }
        }
    </style>
@endsection
@section('content')

    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('administrative.dashboard') }}">Dashboard</a></li>
            @php
                $link = url('/');
            @endphp

            @foreach (request()->segments() as $segment)
                @php
                    $link .= '/' . request()->segment($loop->iteration);
                @endphp
                @if (rtrim(request()->route()->getPrefix(), '/') != $segment && !preg_match('/[0-9]/', $segment))
                    @if ($loop->last)
                        <li class="breadcrumb-item {{ $loop->last ? 'active' : '' }}"
                            {{ $loop->last ? 'aria-current="page"' : '' }}>
                            @if ($loop->last)
                                {{ $segment }}
                            @else
                                <a href="{{ $link }}">{{ $segment }}</a>
                            @endif
                        </li>
                    @endif
                @endif
            @endforeach

        </ol>
    </nav>
    <div class="main1 pb-4">
        <div class="head">
            <p class="head_1">Migration <span>Tool</span></p>
            <p class="head_2">Procedure Steps</p>
        </div>

        <ul class="ul-progress">
            <li>
                <i class="icon uil uil-play"></i>
                <div class="progress one">
                    <p>1</p>
                    <i class="uil uil-check"></i>
                </div>
                <p class="text">Start</p>
            </li>
            <li>
                <i class="icon uil uil-create-dashboard"></i>
                <div class="progress two">
                    <p>2</p>
                    <i class="uil uil-check"></i>
                </div>
                <p class="text">Check V4</p>
            </li>
            <li>
                <i class="icon uil uil-monitor-heart-rate"></i>
                <div class="progress three">
                    <p>3</p>
                    <i class="uil uil-check"></i>
                </div>
                <p class="text">Check TDS</p>
            </li>
            <li>
                <i class="icon uil uil-apps"></i>
                <div class="progress four">
                    <p>4</p>
                    <i class="uil uil-check"></i>
                </div>
                <p class="text">App Middleware</p>
            </li>

            <li>
                <i class="icon uil uil-at"></i>
                <div class="progress five">
                    <p>5</p>
                    <i class="uil uil-check"></i>
                </div>
                <p class="text">Send Mail/SMS</p>
            </li>
            <li>
                <i class="icon uil uil-bolt-slash"></i>
                <div class="progress six">
                    <p>6</p>
                    <i class="uil uil-check"></i>
                </div>
                <p class="text">Inactive</p>
            </li>
            <li>
                <i class="icon uil uil-feedback"></i>
                <div class="progress seven">
                    <p>7</p>
                    <i class="uil uil-check"></i>
                </div>
                <p class="text">Done</p>
            </li>
        </ul>
    </div>

    <div class="row pt-4">


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

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Search Terminal Using BST ID</h6>
                    {{-- {{route('administrative.migration.tool.store')}} --}}
                    <form action="form-horizontal" method="POST">
                        @csrf

                        <div class="form-group">
                            <label for="exampleFormControlSelect1">Bst Options</label>
                            <select name="options" id="options" class="form-control">
                                <option value="" selected>Select Type</option>
                                <option value="1">Input</option>
                                <option value="2">File</option>
                            </select>
                        </div>
                        <div class="form-group input-option d-none">
                            <label for="exampleFormControlSelect1">BST ID <span class="text-danger">*</span></label>
                            <input type="text" id="bst-id" name="bst_id" class="w-100 form-control">
                            <div class="d-none validation-message">
                                <span class="text-danger">Please enter bst id</span>
                            </div>
                        </div>
                        <div class="form-group file-option d-none">
                            <label for="exampleFormControlSelect1">BST File (Only xlsx file) <span
                                    class="text-danger">*</span></label>
                            <input type="file" id="bst-id-file" name="bst_id" class="w-100 form-control" required
                                accept=".xlsx">
                            <div class="d-none validation-message">
                                <span class="text-danger">select file</span>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary mr-2" id="check-button">Check</button>

                        <h6 class="mt-4" id="message-show"></h6>
                    </form>
                    <div id="data_list" class="row"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script>
        const one = document.querySelector(".one");
        const two = document.querySelector(".two");
        const three = document.querySelector(".three");
        const four = document.querySelector(".four");
        const five = document.querySelector(".five");
        const six = document.querySelector(".six");
        const seven = document.querySelector(".seven");

        let bstListLength;
        var dropdown = document.getElementById("options");
        dropdown.addEventListener("change", function() {
            var selectedOption = dropdown.value;
            console.log(selectedOption)
            if (selectedOption == 2) {
                $('.file-option').removeClass('d-none');
                $('.input-option').addClass('d-none');
            } else {
                $('.file-option').addClass('d-none');
                $('.input-option').removeClass('d-none');
            }
        });
        let inputf;
        let fileInput = document.getElementById('bst-id-file');
        var xlArrary = [];
        fileInput.addEventListener('change', function(event) {
            inputf = event.target.files[0];
            readXlsxFile(inputf).then((rows) => {
                xlArrary.push(rows);
            })
        });

        $("#check-button").on("click", async function(e) {
            e.preventDefault();
            var dropdown = document.getElementById("options");
            var selectedOption = dropdown.value;
            if (selectedOption == 2) {
                if ($("#bst-id-file").val() == '') {
                    $(".validation-message").removeClass('d-none');
                } else {
                    $(".validation-message").addClass('d-none');
                }
                let xlsxArray = [];
                xlArrary.forEach(element => {
                    element.forEach(e => {
                        xlsxArray.push(e[0])
                    });
                });
                bstListLength = xlsxArray.length;
                console.log(bstListLength);
                for (const ele of xlsxArray) {
                    $('.one').addClass('active');
                    $('.two,.three, .four, .five, .six, .seven').removeClass('active');
                    var bstId = ele;
                    console.log(bstId);
                    try {
                        await ajaxCall(bstId);
                    } catch (error) {
                        console.error(error);
                    }
                };
            } else {
                if ($("#bst-id").val() == '') {
                    $(".validation-message").removeClass('d-none');
                } else {
                    $(".validation-message").addClass('d-none');
                }
                var data = $("#bst-id").val();

                let dataArray = data.split(',');

                for (const element of dataArray) {
                    $('.one').addClass('active');
                    $('.two,.three, .four, .five, .six, .seven').removeClass('active');
                    var bstId = element.trim();
                    console.log(bstId);
                    try {
                        await ajaxCall(bstId);
                    } catch (error) {
                        console.error(error);
                    }
                }
            }

        });

        async function ajaxCall(bstId) {
            try {
                const response1 = await $.ajax({
                    url: '/administrative/migration/bst_id_search/' + bstId,
                    method: 'GET',
                    headers: {
                        'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
                    }
                });

                if (response1.progress == 1) {

                    $('#message-show').addClass('text-primary').html(bstId + " bstid Found in v4");
                    $('.one, .two').addClass('active');
                    $('.three, .four, .five, .six, .seven').removeClass('active');
                    const response2 = await $.ajax({
                        url: '/administrative/migration/tds_id_search/' + bstId,
                        method: 'GET',
                        headers: {
                            'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
                        }
                    });

                    if (response2.progress == 2) {
                        $('#message-show').addClass('text-primary').html(bstId + " Bst-id Found in TDS");
                        $('.one, .two, .three').addClass('active');
                        $('.four, .five, .six, .seven').removeClass('active');
                        const response3 = await $.ajax({
                            url: '/administrative/migration/app_middleware_bst_id_search/' + bstId,
                            method: 'GET',
                            headers: {
                                'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
                            }
                        });

                        if (response3.progress == 3) {
                            $('#message-show').addClass('text-primary').html(bstId + " bstid Found in app middleware");
                            $('.one, .two, .three, .four').addClass('active');
                            $('.five, .six, .seven').removeClass('active');

                            const response4 = await $.ajax({
                                url: '/administrative/migration/send_email_sms/' + bstId + '/' + bstListLength,
                                method: 'GET',
                                headers: {
                                    'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
                                }
                            });

                            if (response4.progress == 4) {
                                $('#message-show').addClass('text-primary').html(bstId +
                                    " successfuly Send email and sms .");
                                $('.one, .two, .three, .four, .five').addClass('active');
                                $(' .six, .seven').removeClass('active');

                                const response5 = await $.ajax({
                                    url: '/administrative/migration/inactive_user_from_v4/' + bstId,
                                    method: 'GET',
                                    headers: {
                                        'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
                                    }
                                });

                                if (response5.progress == 5) {
                                    $('#message-show').addClass('text-primary').html(
                                        bstId + " User Inactive from v3 successfully and migration completed..");
                                    $('.one, .two, .three, .four, .five, .six, .seven').addClass('active');

                                } else {
                                    $('#message-show').addClass('text-danger').html(response5);
                                }

                            } else {
                                $('#message-show').addClass('text-danger').html(response4);
                            }

                        } else {
                            $('#message-show').addClass('text-danger').html(response3);
                        }
                    } else {
                        $('#message-show').addClass('text-danger').html(response2);
                    }
                } else {
                    $('#message-show').addClass('text-danger').html(response1);
                }
            } catch (error) {
                console.error(error);
            }
        }
    </script>
@endsection