@extends('Dashboard/app')

@section('main-content')
    <form class="d-flex bg-light " action="{{route('update_updates', $updateDetails->id)}}" method="POST"  enctype="multipart/form-data">
        @csrf
        {{method_field('PUT')}}
        <div class="p-3 col-lg-8 col-12 mt-2 m-auto create-project shadow">        
            <h5>EDIT</h5>

            <div class="my-5"><a href="{{route('dash_update')}}" class="mb-5 back-btn rounded"><span class="fa fa-arrow-left"></span> Back</a> </div> 
            
            <div for="" class="field-title">Category</div>
            <select name="category" id="category" class="rounded border">
                <option value="update" @if($updateDetails->category == 'update') selected @endif>Update</option>
                <option value="event" @if($updateDetails->category == 'event') selected @endif>Event</option>
                <option value="achievement"  @if($updateDetails->category == 'achievement') selected @endif>Achievement</option>
            </select>

            <div for="" class="field-title">Title</div>
            <input type="text" name="title" value="{{$updateDetails->title}}" required class="form-control">

            <div for="" class="field-title">Description</div>
            <textarea name="description" id="content">{!!$updateDetails->description!!}</textarea>
                        
            <div class="event d-none">
                <div for="" class="field-title">Event Date</div>
                <input type="date" name="event_date"  class="rounded border p-1" value="{{$updateDetails->event_date}}">
            </div>
            
            <div class="update">
                <div for="" class="field-title">Display Start Date</div>
                <input type="date" name="display_start_date"  class="rounded border p-1" value="{{$updateDetails->display_start_date}}">
    
                <div for="" class="field-title">Display end Date</div>
                <input type="date" name="display_end_date"  class="rounded border p-1" value="{{$updateDetails->display_end_date}}">
            </div>
            

            <div for="" class="mt-4 field-title">* Add Image / Video</div>
            <div class="border p-3">
                <div class=""  id="imgs_container">
                    <p class="text-muted">{{$updateDetails->media}}</p>
                    <div class="col-6 col-lg-3">
                        @if($updateDetails->media_type == 'video')
                            <video src="{{asset('storage/updates/'.$updateDetails->media)}}" class="col-12"></video>
                        @else
                            <img src="{{asset('storage/updates/'.$updateDetails->media)}}" alt="" class="col-12">
                        @endif
                    </div>
                    <div class="project-media my-3 p-4 bg-white d-flex" id="img_1" >
                        <span><input type="file" name="media"></span>
                    </div>
                    <h5 class="text-muted">Youtube Link</h5>
                        @php
                            $use_link = '';
                            if($updateDetails->youtube_link){
                                $use_link = 'https://youtu.be/'.$updateDetails->youtube_link;
                            }
                        @endphp
                    <input type="text" name="youtube_link" value="{{$use_link}}" class="form-control" >
                </div>
            </div>

            <label  class="field-title"><span class="">Publish</span> 
                <input type="checkbox" name="publish" @if($updateDetails->publish == 'publish') checked @endif value="publish" class="">
            </label>

            <div class="mt-5">
                <input type="submit" value="SAVE" class="btn btn-success px-5">
            </div>
        </div>
    </form>
@endsection

@section('footer-scripts')

<script>
    $('#category').change(() => {
        var the_value = $('#category').val();

        if(the_value == 'event'){
            $('.update').addClass('d-none');
            $('.event').removeClass('d-none');
        }

        if(the_value == 'update'){
            $('.event').addClass('d-none');
            $('.update').removeClass('d-none');
        }

        if(the_value == 'achievement'){
            $('.event').addClass('d-none');
            $('.update').addClass('d-none');
        }
    })
</script>

<script>
    $('document').ready(() => {
        var the_value = $('#category').val();
        if(the_value == 'event'){
            $('.update').addClass('d-none');
            $('.event').removeClass('d-none');
        }

        if(the_value == 'update'){
            $('.event').addClass('d-none');
            $('.update').removeClass('d-none');
        }

        if(the_value == 'achievement'){
            $('.event').addClass('d-none');
            $('.update').addClass('d-none');
        }
    })
</script>
<script>
    ClassicEditor
        .create( document.querySelector( '#content' ) )
        
        .catch( error => {
            console.error( error );
        } );
        CKEDITOR.addCss('.cke_editable p { margin: 0 !important; }');
</script>

@endsection