@extends('v2/fleet/layouts/contentNavbarLayout')

@section('title')
{{ __('client.details') }}
@endsection

@section('page-script')
<script src="{{asset('assets/js/pages-account-settings-account.js')}}"></script>
<script src='{{ asset('js/fullcalendar.js') }}'></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var events = {!! json_encode($events) !!};
        var month = {!! json_encode(__('calendar.month')) !!};
        var week = {!! json_encode(__('calendar.week')) !!};
        var day = {!! json_encode(__('calendar.day')) !!};
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                right: 'dayGridMonth,timeGridWeek,timeGridDay prev,next',
            },
            navLinks: true,
            // allDaySlot: false,
            buttonText: {
              month: month,
              week: week,
              day: day
            },
            firstDay : 1,
            events: events,
            eventColor: '#0F82E',
            eventTimeFormat: { 
              hour: '2-digit',
              minute: '2-digit',
              hour12: false
            },
        });
        calendar.setOption('locale', 'fr');
        calendar.render();
    });

</script>

@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('css/fleet/fleet-edit.css') }}">
<link rel="stylesheet" href="{{ asset('css/fleet/vehicle-details.css') }}">
<link rel="stylesheet" href="{{ asset('css/fleet/calendar/calendar.css') }}">
@endsection

@section('content')

@include('v2.fleet.vehicles.show.components.header')

<div class="card mt-4">
    <div class="card-header">
        <nav>
            <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="nav-general-informations-tab" data-bs-toggle="tab" data-bs-target="#nav-general-informations" type="button" role="tab" aria-controls="nav-info" aria-selected="true">Informations générales</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="nav-maintenance-tab" data-bs-toggle="tab" data-bs-target="#nav-maintenance" type="button" role="tab" aria-controls="nav-maintenance" aria-selected="false">Maintenance</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="nav-calendar-tab" data-bs-toggle="tab" data-bs-target="#nav-calendar" type="button" role="tab" aria-controls="nav-calendar" aria-selected="false">Calendrier</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="nav-documents-tab" data-bs-toggle="tab" data-bs-target="#nav-documents" type="button" role="tab" aria-controls="nav-documents" aria-selected="false">Documents</button>
                </li>

            </ul>
        </nav>
    </div>
</div>

<div class="tab-content px-0" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-general-informations" role="tabpanel" aria-labelledby="nav-general-informations-tab">
        @include('v2.fleet.vehicles.show.tabs.general-informations')
    </div>
    <div class="tab-pane fade" id="nav-maintenance" role="tabpanel" aria-labelledby="nav-maintenance-tab">
        @include('v2.fleet.vehicles.show.tabs.maintenance')
    </div>
    <div class="tab-pane fade" id="nav-documents" role="tabpanel" aria-labelledby="nav-documents-tab">
        @include('v2.fleet.vehicles.show.tabs.documents')
    </div>
    <div class="fade" id="nav-calendar" role="tabpanel" aria-labelledby="nav-calendar-tab">
        @include('v2.fleet.vehicles.show.tabs.calendar')
    </div>
</div>
@endsection


@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const tripsDistances = {!! json_encode($vehicle['trips']['tripsDistances']) !!};
    const tripsConsumptions = {!! json_encode($vehicle['trips']['tripsConsumptions']) !!};

    console.log('tripsConsumptions', tripsConsumptions)
    const tripsDistancesData = {
        datasets: [{
            label: '',
            backgroundColor: 'rgb(0,191,255)',
            borderColor: 'rgb(0,191,255)',
            data: tripsDistances,
        }]
    };

    const tripsConsumptionsData = {
        datasets: [{
            label: '',
            backgroundColor: 'rgb(0,191,255)',
            borderColor: 'rgb(0,191,255)',
            data: tripsConsumptions,
        }]
    };

    const tripsDistancesConfig = {
        type: 'line',
        data: tripsDistancesData,
        options:{
            scales:{
                y:{
                    beginAtZero: true,
                    min: 0,
                },
                x: {
                    grid: {
                        display: false, // This will remove the grid lines in the x-axis
                    },
                },
            },
            elements: {
                line: {
                    tension: 0.6
                }
            }
        }
    };

    const tripsConsumptionsConfig = {
        type: 'bar',
        data: tripsConsumptionsData,
        options: {
            responsive: true,
            plugins: {
                datalabels: {
                    borderRadius: 6
                },
                legend: {
                    position: 'top',
                },
            },
            elements: {
                bar: {
                    borderRadius: 10,
                },
            },
            scales: {
                x: {
                    grid: {
                        display: false,
                    },
                },
                y: {
                    grid: {
                        display: false,
                    },
                },
            },
        },
    };

    const tripsConsumptionsChart = new Chart(
        document.getElementById('trips-consumptions-chart'),
        tripsConsumptionsConfig
    );

    
    const tripsDistancesChart = new Chart(
        document.getElementById('trips-distances-chart'),
        tripsDistancesConfig
    );


    $(function() {
        $(".progress").each(function() {

            var value = $(this).attr('data-value');
            var left = $(this).find('.progress-left .progress-bar');
            var right = $(this).find('.progress-right .progress-bar');

            if (value > 0) {
                if (value <= 50) {
                    right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
                } else {
                    right.css('transform', 'rotate(180deg)')
                    left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
                }
            }

        })

        function percentageToDegrees(percentage) {
            return percentage / 100 * 360
        }

    });

    function myMap() {
    var mapProp = { 
        center: new google.maps.LatLng({{ $vehicle['latitude'] }}, {{ $vehicle['longitude'] }}), 
        zoom: 13,
        mapTypeControl: false // Disable map type control
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    // Add marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng({{ $vehicle['latitude'] }}, {{ $vehicle['longitude'] }}),
        map: map,
        title: 'Your Vehicle' // Optional title for the marker
    });
}

</script>

<script>
    function enableDragAndDrop(fileInputId) {
        const fileInput = document.getElementById(fileInputId);
        const parentContainer = fileInput.parentElement;

        const dropArea = document.createElement('div');
        dropArea.classList.add('drop-area', 'p-4');

        const bladeViewDiv = document.createElement('div');
        bladeViewDiv.classList.add('my-3');
        bladeViewDiv.innerHTML = `@include('v2.fleet.partials.icons.cloud')`;
        dropArea.appendChild(bladeViewDiv);

        const heading = document.createElement('h5');
        heading.classList.add('text-dark');
        heading.textContent = 'Sélectionnez un fichier ou faites glisser et déposez ici.';

        const text = document.createElement('p');
        text.classList.add('text-dark', 'text-16');
        text.textContent = 'Taille du fichier pdf, png, jpeg ne dépassant pas 50 Mo';

        const browseLabel = document.createElement('label');
        browseLabel.htmlFor = fileInputId;
        browseLabel.classList.add('bg-transparent', 'btn', 'border-1', 'border-main-green', 'text-main-blue',
            'rounded');
        browseLabel.textContent = 'sélectionnez un fichier';

        const fileList = document.createElement('div');
        fileList.id = `file-list-${fileInputId}`;

        dropArea.appendChild(heading);
        dropArea.appendChild(text);
        dropArea.appendChild(fileInput);
        dropArea.appendChild(browseLabel);
        dropArea.appendChild(fileList);

        parentContainer.appendChild(dropArea);

        dropArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            dropArea.classList.add('highlight');
        });

        dropArea.addEventListener('dragleave', function() {
            dropArea.classList.remove('highlight');
        });

        dropArea.addEventListener('drop', function(e) {
            e.preventDefault();
            dropArea.classList.remove('highlight');

            const files = e.dataTransfer.files;

            handleFiles(files, fileList);
            submitFormIfNeeded();
        });

        fileInput.addEventListener('change', function() {
            const files = fileInput.files;

            handleFiles(files, fileList);
            submitFormIfNeeded();
        });

        function handleFiles(files, fileListElement) {
            fileListElement.innerHTML = '';

            for (const file of files) {
                const listItem = document.createElement('div');
                listItem.classList.add('mb-2');
                listItem.textContent = `${file.name} (${formatBytes(file.size)})`;
                fileListElement.appendChild(listItem);
            }
        }

        function submitFormIfNeeded() {
            // Check if the file input has a parent form and submit it
            const form = fileInput.closest('form');
            if (form && fileInput.files.length > 0) {
                form.submit();
            }
        }

        function formatBytes(bytes, decimals = 2) {
            if (bytes === 0) return '0 Bytes';

            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

            const i = Math.floor(Math.log(bytes) / Math.log(k));

            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        return {
            fileInput,
            dropArea,
            fileList,
        };
    }

    const input1 = enableDragAndDrop('fileInput1');
    const input2 = enableDragAndDrop('fileInput2');
    const input3 = enableDragAndDrop('fileInput3');
    const input4 = enableDragAndDrop('fileInput4');
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAb-BWFEW91txKjDdja7vKhMWQyXseMtGw&callback=myMap"></script>

@endsection