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


    <style>

        .titles{

            font-size : 30px;
            font-weight : bold;
            word-spacing: 10px;
            margin : 20px auto;
            background-color : black;
            border-radius : 10px;
            padding : 5px 20px;

        }
        .details{

            font-size : 25px;
            margin : auto;
            background-color : black;
            border-radius : 10px;
            padding : 5px 5px;

        }
        .details a{


            text-decoration : none;
            color :white;

        }
        div[name="surah_arabic_name"]{

            cursor : pointer;

        }
        #container_one_surah{

            text-align : center;
            color : white;
            margin: 50px 0px 50px 0px;


        }
        #show_surah{

            display : none;
            margin : 50px auto;
            background-color : black;
            color : white;
            text-align : center;
            padding : 10px 0px;

        }
        #audio{

            width : 90%;

        }
    </style>

    @php

        use Illuminate\Support\Facades\DB;

    @endphp

    <div class="container">
	<div class="row">	


    @foreach ($result as $item)

        @php

            $tartel = DB::select('select tartel_arabic_name from quran_tartel where tartel_id = ?', [$item->tartel_id]);

            $reader = DB::select('select reader_arabic_name from quran_reader where reader_id = ?', [$item->reader_id]);

            $qeraa = DB::select('select qeraa_arabic_name from quran_qeraa where qeraa_id = ?', [$item->qeraa_id]);

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


            foreach ($tartel as $tartels) {

                $new_tartel_arabic_name = str_replace("_" , " " , $tartels->tartel_arabic_name);

            }

            foreach ($reader as $readers) {

                $new_reader_arabic_name = str_replace("_" , " " , $readers->reader_arabic_name);

            }

            foreach ($qeraa as $qeraas) {

                $new_qeraa_arabic_name = str_replace("_" , " " , $qeraas->qeraa_arabic_name);

            }



        @endphp

        <div name="{{$surah_id}}" name_2="{{$surah_name[0]->surah_arabic_name}}" id="container_one_surah" class="col-lg-6">
            <div class="titles">اسم الترتيل</div>
            <div class="details">{{$new_tartel_arabic_name}}</div>
            <div class="titles">اسم القراءة</div>
            <div class="details">{{$new_qeraa_arabic_name}}</div>
            <div class="titles">القراء</div>
            <div onclick="btn_click('{{$item->id}}')" name="surah_arabic_name" id="surah_name_result{{$item->id}}" class="details">{{$new_reader_arabic_name}}</div>
        </div>

    @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 = $('#container_one_surah');

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

        var surah_arabic_name = id.attr('name_2');

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



            function btn_click(intermediary_id){

                $.ajax({
                    type: 'GET', //THIS NEEDS TO BE GET
                    url: "{{url('one_surah_information')}}" + "/" + 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 = "سورة" + " " + surah_arabic_name + " " + "(" +  document.getElementById('surah_name_result' + intermediary_id).textContent + ")" ;

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

                                source.setAttribute('src' , '/quran/public/' + data.surah_location + 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');

                            // }

                            // console.log(data.surah_location + data.surah_id);

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


            }

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


        //}
        </script>



@stop