@extends("quran_project_files.quran_welcome_page")
@section("content")

<style>

    body{

        text-align : center

    }

    ul li{

        color : black;

    }

    #reader_tartel{

        font-size:40px;


    }
    #reader_qeraa{

        font-size : 30px;


    }
    #reader_surahs{

        font-size : 25px;
        border-top : 3px solid white;
        padding-top : 30px;

    }
    #group{

        width : 90%;
        margin : 100px auto;
        background-color: black;
        color : white;
        padding : 20px;
        border-radius :20px;



    }

    .title , #number{


        font-size : 20px;
        font-weight : bold;

    }
    /* .get{

        background-color : black;
        color : white;
        border: 1px solid white;
        border-radius : 10px;
        padding : 10px;
        font-size : 20px;

    } */
    .surahs_names{

        font-size : 25px;

    }
    #number{

        margin-bottom : 30px;

    }
    .surah_name{

        font-size : 20px;

    }

    .audio_2{

        width : 90%;

    }
    #container{

        display : flex;
        justify-content: space-around;
        flex-wrap :wrap;

    }

    .group_2{

        width : 100px;


    }
    #show_surah{

        display : none;
        margin-top : 50px;
        background-color: black;
        color : white;

    }
    #audio{

        width : 90%;
        border : 1px solid white;
        padding : 5px;
        border-radius : 20px;
        margin : 10px;

    }
    #surah_name{

        padding : 10px;

    }
</style>

    @php

        use Illuminate\Support\Facades\DB;

        $ids_array = explode("," , $result[0]->surahs);

        $surah_ids = [];

        foreach($ids_array as $key => $value){

            array_push($surah_ids , DB::select('select surah_id , surah_arabic_name from quran_surah where surah_id = ?', [$value]));


        }

        $new_qeraa_arabic_name = str_replace("_" , " " , $result[0]->qeraa_arabic_name);

        $new_tartel_arabic_name = str_replace("_" , " " , $result[0]->tartel_arabic_name);

    @endphp

        <div id="group">

            <div class="title">اسم الترتيل</div>

            <div id="reader_tartel">{{$new_tartel_arabic_name}}</div>

            <div class="title">اسم القراءة</div>

            <div name="{{$result[0]->id}}" id="reader_qeraa">{{$new_qeraa_arabic_name}}</div>

            @if($result[0]->surah_count == 114)

                <div id="number">المصحف كامل</div>

            @endif

            @if($result[0]->surah_count < 114)

                <p class="title">عدد المواد</p>

                <div id="number">{{$result[0]->surah_count}}</div>

            @endif
            <div id="container">

                @foreach ($surah_ids as $item)

                        @foreach ($item as $items)

                            <div class="group_2">

                                <button  class="get btn btn-lg btn-default" onclick="btn_click('{{$items->surah_id}}')">play</button>
                                {{-- <a class="get" href="/show_reader_surah/{{$result[0]->id}}/{{$items->surah_id}}">{{$items->surah_arabic_name}}</p> --}}
                                <p class="surahs_names" id="surah_name_result{{$items->surah_id}}">{{$items->surah_arabic_name}}</p>

                            </div>
                        @endforeach

                @endforeach

            </div>

        </div>

        <div id="show_surah">

            <h1 id="surah_name"></h1>

            <audio id="audio">

                <source id="source" src="">

            </audio>

        </div>

<script>

    var get = $('.get');

    var show_surah = document.getElementById('show_surah');

    var audio = document.getElementById('audio');

    var source = document.getElementById('source');

    var surah_name = document.getElementById('surah_name');

    var id = $('#reader_qeraa');

    var intermediary_id = id.attr('name');

        // arrayVariable =[];
        // arrayVariable = get.map(function()
        // {
        //     return $(this).attr("name");
        // }) ;



        function btn_click(surah_id){

            $.ajax({
                type: 'GET', //THIS NEEDS TO BE GET
                url: "{{url('show_reader_surah')}}" + "/" + intermediary_id + "/" + surah_id ,
                dataType: 'json',
                success: function (data) {

                        show_surah.setAttribute('style' , 'display : block');

                        window.location.hash = "#show_surah";

                        // // audio.setAttribute('style' , 'display : none');

                        // // var audio = document.createElement('audio' + surah_id);

                        // // audio.setAttribute('id' , 'audio')

                        // if(typeof source == "undefined"){

                        //     var source = document.createElement('source');

                            surah_name.textContent = "سورة" + " " +  document.getElementById('surah_name_result' + surah_id).textContent;

                            audio.setAttribute('controls' , 'controls');

                            source.setAttribute('src' , '/quran/public/' + data.net_result + data.surah_id + '.mp3');

                            source.setAttribute('type' , 'audio/mpeg');


                            audio.load();

                            audio.play();

                            // audio.play();

                        //     audio.appendChild(source);

                        //     console.log("yes");

                        // }

                        // else{

                            // audio.appendChild(source);

                            // audio.setAttribute('controls' , 'controls');

                            // source.setAttribute('src' , '/' + data.net_result + data.surah_id + '.mp3');

                            // source.setAttribute('type' , 'audio/mpeg');

                        //     console.log('no');

                        // }

                }
                ,error:function(){
                    console.log(data);
                }
            });


        }

            //for(var i = 0; i < arrayVariable.length ; i++){


    //}
    </script>

@stop