@extends('Dashboard/app')

@section('main-content')
    <div class="container col-12 mt-5 d-flex flex-column">    
        <form class="col-lg-10 col-12 m-auto " method="POST" action="{{route('save_dashboard')}}" enctype="multipart/form-data">
            @csrf
            <h5 class="text-muted ">SHORTCUTS</h5>
            <hr>
            <div class="row mt-3">
                @foreach ($shortcuts as $shortcut)
                    <div class="col-lg-4 col-md-3 col-6 mb-5 shortcuts" >
                        <a href="{{$shortcut['url']}}" class=" {{$shortcut['bg-color']}} shadow  d-flex" target="_blank">
                            <span class="{{$shortcut['text-color']}} m-auto  p-2  rounded ">{{$shortcut['shortcut-name']}}</span>
                        </a>
                    </div> 
                @endforeach
            </div>
            <div class="p-4 shadow rounded ">
                <h3 class="mt-5">HOME PAGE</h3>    
                <h5 class="text-muted mt-3">Main Landing Page Video</h5>
                <div class="border p-3">
                    <div class=""  id="imgs_container">
                        <div class="project-media my-3 p-4 bg-white" id="img_1" >
                            @if($landingpage) 
                                <p>{{$landingpage->landingpage_video}}</p>
                                <video class="col-12 col-lg-6" src="{{asset('storage/landingpage/'.$landingpage->landingpage_video)}}" controls></video>
                            @endif
                            <div class="mt-2"><input type="file" name="landingpage_video"></div>
                        </div>
                    </div>
                </div>
    
                <h5 class="text-muted mt-3">Side Video</h5>
                <div class="border p-3">
                    <div class=""  id="imgs_container">
                        <div class="project-media my-3 p-4 bg-white" id="img_1" >
                           @if($landingpage) 
                                <p>{{$landingpage->side_video}}</p>
                                <video class="col-12 col-lg-6" src="{{asset('storage/landingpage/'.$landingpage->side_video)}}" controls></video>
                            @endif
                            <div class="mt-2"><input type="file" name="side_video"></div>
                        </div>
    
                        <h5 class="text-muted">Youtube Link</h5>
                        <input type="text" name="side_video_youtube_link" class="form-control" @if($landingpage) value="{{$landingpage->side_video_youtube_link}}" @endif>
                    </div>
                </div>

                <h3 class="mt-5">ABOUT PAGE</h3>    
                <h5 class="text-muted mt-3">About Muguku School</h5>
                <div class="border p-3">
                    <div class=""  id="imgs_container">
                        <div class="project-media my-3 p-4 bg-white" id="img_1" >
                           @if($landingpage) 
                                <p>{{$landingpage->about_tumaini_video}}</p>
                                <video class="col-12 col-lg-6" src="{{asset('storage/landingpage/'.$landingpage->about_tumaini_video)}}" controls></video>
                            @endif
                            <div class="mt-2"><input type="file" name="about_tumaini_video"></div>
                        </div>
    
                        <h5 class="text-muted">Youtube Link</h5>
                        @php
                            $use_link = '';
                            if($landingpage->about_tumaini_video_youtube_link){
                                $use_link = 'https://youtu.be/'.$landingpage->about_tumaini_video_youtube_link;
                            }
                        @endphp
                        <input type="text" name="about_tumaini_video_youtube_link" class="form-control" @if($landingpage) value="{{$use_link}}" @endif>
                    </div>
                </div>
                <input type="submit" value="Save" class="btn btn-success mt-3 me-auto">
            </div>
            

            <h3 class="mt-5">WHY WE EXCEL</h3>
            <div class="border p-3">
                <a href="{{route('dash_create_why_we_excel')}}" class="field-title btn btn-success mb-2 shadow"> Add New</a>
                
                @if($why_excel)
                <h5 class="field-title text-muted">CURRENT ENTRIES</h5><hr>

                    @foreach ($why_excel as $item)
                        <div class="d-flex bg-darkblue-theme p-2">
                            <div class="ms-auto">
                                <a href="{{route('dash_edit_why_we_excel', $item->id)}}" class="fa fa-pencil text-warning" style="margin-right:20px"></a>
                                <span href="" class="fa fa-trash text-light ml-3" onclick="deleteWhyExcel({{$item->id}})"></span>
                            </div>
                        </div>
                        <div class="row d-flex bg-white p-2 rounded mb-4">
                            <div class="col-6"> 
                                <div class="">
                                    <p class="lead text-dark p-2 bg-light" style="text-transform: uppercase">{{$loop->index + 1}}. {{$item->title}}</p>
                                </div>
                                <div class="">
                                    <p>{!!$item->description!!}</p>
                                </div>
                            </div>
                            <div class="col-6 m-auto">
                                @if ($item->media_type == 'video')
                                    <video src="{{asset('storage/whyExcel/'.$item->media)}}" controls class="col-12"></video>
                                @else
                                    <img src="{{asset('storage/whyExcel/'.$item->media)}}" alt="" class="col-12">
                                @endif
                                <p class="text-muted">{{$item->media}}</p>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </form>
    </div>
    
    <form action="" id="delete_form" class="d-none" method="get"></form>

@endsection

@section('footer-scripts')

<script>
    const deleteWhyExcel = (id) => {
        var proceed = confirm("Are you sure you wish to delete the item?");
        
        if(proceed){
            $('#delete_form').attr('action', "/admin/delete_why_we_excel/"+ id);
            $('#delete_form').submit();
        }
    }
</script>

<script>
    ClassicEditor
        .create( document.querySelector( '#content' ) )
        
        .catch( error => {
            console.error( error );
        } );
        CKEDITOR.addCss('.cke_editable p { margin: 0 !important; }');
</script>
@endsection