@extends('administrative.layouts.master')
@section('page-css')
    <link href="https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.8/css/line.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/3..buttons.min.js"></script>

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

        .car-icon {
            font-size: 90px;
            color: red;
        }

        .bst-icon {
            font-size: 90px;
            color: blue;
        }

        .v4-icon {
            font-size: 90px;
            color: green;
        }

        .vehicle-icon {
            font-size: 90px;
            color: orange;
        }
    </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="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h4 class="mb-3 mb-md-0">Migration Tool Dashboard</h4>
        </div>
        <div class="d-flex align-items-center flex-wrap text-nowrap">
            <a href="{{ route('administrative.migration.tool') }}" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
                <i class="btn-icon-prepend" data-feather="server"></i>
                Migration Tool
            </a>
            <form action="{{ route('administrative.migration.tool.log.list.download') }}" class="col-sm-3 text-right p-2 ">
                <div class="form-group " style="padding-top: 35%">
                    <button class="btn btn-info" type="submit" name="download">Download</button>
                </div>
            </form>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-auto ">
                            <i class="uil uil-car car-icon "></i>
                        </div>
                        <div class="col">
                            <h4>YBX</h4>
                            <hr>
                            <h6>Total Vehicles</h6>
                            <p class="fw-bold mb-2">{{ $VehiclesFromYBS }}</p>
                            <h6>Total User</h6>
                            <p class="fw-bold">{{ $UsersFromYBS }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-auto">
                            <i class="uil uil-car bst-icon"></i>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <h4>V4</h4>
                                    <hr>
                                    <h6>Total Vehicles</h6>
                                    <p class="fw-bold mb-2">{{ $v4VehiclesCount->vehicles_count }}</p>
                                    <h6>Total Users</h6>
                                    <p class="fw-bold ">{{ $v4UsersCount }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-auto">
                            <i class="uil uil-car vehicle-icon"></i>
                        </div>
                        <div class="col">
                            <h6>Online Vehicles</h6>
                            <p class="fw-bold mb-3">{{ $v4VehiclesCount->online_vehicles_count }}</p>

                            <h6>Offline Vehicles</h6>
                            <p class="fw-bold mb-3">{{ $v4VehiclesCount->offline_vehicles_count }}</p>

                            <h6>Suspended Vehicles</h6>
                            <p class="fw-bold">{{ $v4VehiclesCount->suspended_vehicles_count }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-auto">
                            <i class="uil uil-car v4-icon"></i>
                        </div>
                        <div class="col-md">
                            <h6>Total Migrations</h6>
                            <p class="mb-3">{{ $totalLogs }}</p>
                            <h6>Total Completed Migrations</h6>
                            <p class="mb-3">{{ $totalMigrated }}</p>
                            <h6>Total Incomplete Migrations</h6>
                            <p class="fw-bold">{{ $totalIncompleteMigrated }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title"> </h6>
                    <div class="table-responsive">
                        <table id="datatables" class="table"
                        style="min-width:1500px;"
                        >

                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Identifier</th>
                                    <th>Bst id</th>
                                    <th>Customer Code</th>
                                    <th>Provider name</th>
                                    <th>Is in v4</th>
                                    <th>Is in tds2</th>
                                    <th>Is in app middleware</th>
                                    <th>Send email</th>
                                    <th>inactive</th>
                                    <th>Completed</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('page-js')

    <script>
        $(document).ready(function() {
            var table = $('#datatables').DataTable({

                "aLengthMenu": [
                    [10, 30, 50, -1],
                    [10, 30, 50, "All"]
                ],
                "iDisplayLength": 10,
                "language": {
                    search: ""
                },
                processing: true,
                serverSide: true,
                ajax: '{{ route('administrative.migration.tool.list') }}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'identifier',
                        name: 'identifier',
                        width: 100
                    },
                    {
                        data: 'bst_id',
                        name: 'bst_id',
                        width: 100
                    },
                    {
                        data: 'customer_code',
                        name: 'customer_code'
                    },
                    {
                        data: 'provider_name',
                        name: 'provider_name'
                    },
                    {
                        data: 'is_in_v4',
                        name: 'is_in_v4',
                        render: function(data) {
                            return data == 1 ?
                                '<span class="bg-success badge text-white">True</span>' :
                                '<span class="bg-danger badge text-white">False</span>';
                        }
                    },
                    {
                        data: 'is_in_tds',
                        name: 'is_in_tds',
                        render: function(data) {
                            return data == 1 ?
                                '<span class="bg-success badge text-white">True</span>' :
                                '<span class="bg-danger badge text-white">False</span>';
                        }
                    },
                    {
                        data: 'is_in_app_middleware',
                        name: 'is_in_app_middleware',
                        render: function(data) {
                            return data == 1 ?
                                '<span class="bg-success badge text-white">True</span>' :
                                '<span class="bg-danger badge text-white">False</span>';
                        }
                    },

                    {
                        data: 'is_v4_installing_email_send',
                        name: 'is_v4_installing_email_send',
                        render: function(data) {
                            return data == 1 ?
                                '<span class="bg-success badge text-white">True</span>' :
                                '<span class="bg-danger badge text-white">False</span>';
                        }
                    },
                    {
                        data: 'is_is_inactive_from_v3',
                        name: 'is_is_inactive_from_v3',
                        render: function(data) {
                            return data == 1 ?
                                '<span class="bg-success badge text-white">True</span>' :
                                '<span class="bg-danger badge text-white">False</span>';
                        }
                    },
                    {
                        data: 'is_completed',
                        name: 'is_completed',
                        render: function(data) {
                            return data == 1 ?
                                '<span class="bg-success badge text-white">True</span>' :
                                '<span class="bg-danger badge text-white">False</span>';
                        }
                    }
                ],
                // Enable individual column filtering
                "initComplete": function() {
                    this.api().columns().every(function() {
                        var column = this;
                        var input = $(
                                '<input type="text" class="form-control" placeholder="Search..."/>'
                            )
                            .appendTo($(column.header()))
                            .on('keyup change', function() {
                                if (column.search() !== this.value) {
                                    column.search(this.value).draw();
                                }
                            });
                    });
                    // Initialize TableExport
                    $('<button class="btn btn-primary" id="downloadBtn">Download Data</button>')
                        .prependTo($('#datatables_wrapper .dataTables_filter'))
                        .on('click', function() {
                            // Get filtered data if search is active, otherwise get all data
                            var data = table.rows({
                                search: 'applied'
                            }).data();
                            var csv = 'data:text/csv;charset=utf-8,';
                            csv += Object.keys(data[0]).join(',') + '\r\n';
                            data.each(function(row) {
                                csv += Object.values(row).join(',') + '\r\n';
                            });

                            // Create a download link and trigger click
                            var encodedUri = encodeURI(csv);
                            var link = document.createElement("a");
                            link.setAttribute("href", encodedUri);
                            link.setAttribute("download", "datatable.csv");
                            document.body.appendChild(link);
                            link.click();
                        });
                },

            });
        });
    </script>
@endsection