@extends('layouts.welcome')
@section('title', 'Audio')
@section('content')
    <section class="p-5 bg-linear-gradient">
        <div class="container text-white text-center mb-5">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <h1 class="fw-bold mb-4" style="font-size: 43px">
                        Rechercher {{ $audio_genre }}
                    </h1>
                    <form id="search-form">
                        <div class="input-group mb-3">
                            <input type="search" name="search" id="search-input" class="form-control" style="height: 50px;"
                                placeholder="Recherche" />
                            <span class="input-group-text bg-white">
                                <i class="bi bi-search"></i>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <section class="py-5 bg-color2">
        <div class="container rounded-4 shadow-sm bg-white p-4">
            <h1 class="fw-bold mb-4">{{ $audio_genre }}</h1>
            <div id="audios-container">
                <div class="row gy-4">
                    @if (count($audios))
                        @foreach ($audios as $audio)
                            <x-audio-card :audio="$audio" :audioG="$audio_g" />
                        @endforeach
                    @else
                        <div class="bg-white rounded-3 p-5 text-center text-black fw-bold fs-4">Pas de {{ $audio_genre }}
                            trouvé</div>
                    @endif
                </div>
            </div>
            <div class="mt-5 d-flex justify-content-center">
                {{ $audios->links('pagination::bootstrap-5') }}
            </div>
    </section>
    <div class="audio-part">
        <audio id="sound" src="" type="audio/mpeg">
            {{-- <source src="{{ asset('assets/audio/audio.mp3') }}" type="audio/mpeg"> --}}
        </audio>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#search-input').on('input', function() {
                let searchQuery = $(this).val();
                let actionUrl = "{{ route('get.audios', request()->route('audio')) }}";

                $.ajax({
                    url: actionUrl,
                    type: 'GET',
                    data: {
                        search: searchQuery
                    },
                    success: function(response) {
                        $('#audios-container').html($(response).find('#audios-container')
                            .html());
                    },
                    error: function() {
                        alert('Erreur lors de la recherche');
                    }
                });
            });
        });
    </script>
    <script src="{{ asset('assets/js/player-audio.js') }}"></script>
    <script type="text/javascript">
        let audioIds = @json($audioIds, JSON_PRETTY_PRINT);

        let now = new Date();


        audioIds.forEach(audioId => {
            let timeElapsedSpan = document.getElementById('time-elapsed-' + audioId);
            timeElapsedSpan.innerText = calculateTimeElapsed(timeElapsedSpan.dataset.time);
            // calculateTimeElapsed(timeElapsedSpan.dataset.time);
        });

        function calculateTimeElapsed(timestamp) {

            let dateTime = timestamp.split(' ');
            let date = dateTime[0].split('-');
            let time = dateTime[1].split(':');

            // let dateTimestamp = new Date(timestamp);
            let dateTimestamp = new Date(date[0] + '-' + date[1] + '-' + date[2] + ' ' + (parseInt(time[0]) + 1) + ':' +
                time[1] + ':' + time[2]);

            timeElapsed = now.getTime() - dateTimestamp.getTime();

            let years = parseInt(timeElapsed / (365 * 24 * 60 * 60 * 1000));
            timeLeft = parseInt(timeElapsed % (365 * 24 * 60 * 60 * 1000));
            let mois = parseInt(timeLeft / (30 * 24 * 60 * 60 * 1000));
            timeLeft = parseInt(timeLeft % (30 * 24 * 60 * 60 * 1000));
            let semaines = parseInt(timeLeft / (7 * 24 * 60 * 60 * 1000));
            timeLeft = parseInt(timeLeft % (7 * 24 * 60 * 60 * 1000));
            let jours = parseInt(timeLeft / (24 * 60 * 60 * 1000));
            timeLeft = parseInt(timeLeft % (24 * 60 * 60 * 1000));
            let heures = parseInt(timeLeft / (60 * 60 * 1000));
            timeLeft = parseInt(timeLeft % (60 * 60 * 1000));
            let minutes = parseInt(timeLeft / (60 * 1000));
            let secondes = parseInt((timeLeft % (60 * 1000)) / 1000);


            if (years > 1) {
                return 'Il y a ' + years + ' ans';
            } else if (years == 1) {
                return 'Il y a ' + years + ' an';
            } else if (mois > 0) {
                return 'Il y a ' + mois + ' mois';
            } else if (semaines > 1) {
                return 'Il y a ' + semaines + ' semaines';
            } else if (semaines == 1) {
                return 'Il y a ' + semaines + ' semaine';
            } else if (jours > 1) {
                return 'Il y a ' + jours + ' jours';
            } else if (jours == 1) {
                return 'Il y a ' + jours + ' jour';
            } else if (heures > 1) {
                return 'Il y a ' + heures + ' heures';
            } else if (heures == 1) {
                return 'Il y a ' + heures + ' heure';
            } else if (minutes > 1) {
                return 'Il y a ' + minutes + ' minutes';
            } else if (minutes == 1) {
                return 'Il y a ' + minutes + ' minute';
            } else if (secondes > 1) {
                return 'Il y a ' + secondes + ' secondes';
            } else if (secondes == 1) {
                return 'Il y a ' + secondes + ' seconde';
            } else {
                return 'Il y a 0 seconde';
            }
        }
    </script>
@endsection