@extends('Dashboard/app')

@section('main-content')
    <form class="d-flex bg-light " action="{{route('update_facility', $facilityDetails->id)}}" method="POST"  enctype="multipart/form-data">
        @csrf
        <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_facilities')}}" class="mb-5 back-btn rounded"><span class="fa fa-arrow-left"></span> Back</a> </div> 
           
            <div for="" class="field-title">* Name</div>
            <input type="text" name="name" value="{{$facilityDetails->name}}" required class="form-control">

            <div for="" class="field-title"> Description</div>
            <textarea name="description" id="content">{!!$facilityDetails->description!!}</textarea>
            <div for="" class="mt-4 field-title">* Attach Media</div>
            <div class="border p-3">
                <div class=""  id="imgs_container">

                    @if($facilityDetails->media)
                        @foreach ($facilityDetails->media as $item)
                        <div class="mb-5 shadow-sm p-2 d-flex">
                            <div class="col-6">
                                @if ($item->media_type == 'image')
                                    <img class="col-12" src="{{asset('storage/facilities/'.$item->media_name)}}" alt="">
                                @else
                                    <video class="col-12" src="{{asset('storage/facilities/'.$item->media_name)}}" controls></video>
                                @endif
                            </div>
                            <div><span class="fa fa-close btn btn-danger" onclick="deleteMedia({{$facilityDetails->id}}, {{$item->id}})"></span></div>
                            <p class="text-muted m-auto bg-white p-2">{{$item->media_name}}</p>

                        </div>

                        @endforeach
                    @endif
                    <div class="project-media my-3 p-4 bg-white d-flex" id="img_1" >
                        <span><input type="file" name="media[]" multiple></span>
                    </div>
                </div> 
                
            </div>

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

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

    <form action="{{route('delete_facility_media')}}" id="delete_media_form" class="d-none" method="post">
        @csrf
        <input type="number" name="facility_id" id="del_facility_id">
        <input type="number" name="media_id" id="del_media_id">
    </form>
@endsection

@section('footer-scripts')

<script>
    const deleteMedia = (facility_id, media_id) => {
        var proceed = confirm("Are you sure you wish to delete media?");

        if(proceed){
            $('#del_facility_id').val(facility_id);
            $('#del_media_id').val(media_id);
    
            $('#delete_media_form').submit();
        }
    }
</script>

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