@extends('Dashboard.layouts.master')
@section('title', 'Post | Create')
@section('css')
@endsection
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <div id="kt_app_content" class="app-content flex-column-fluid">

                <livewire:bread-crumb heading="{{__('translations.posts')}}"
                                      url_1="{{Helper::handle_route('dashboard')}}"
                                      name_1="{{__('translations.dashboard')}}"
                                      url_2="{{Helper::handle_route('posts.index')}}"
                                      name_2="{{__('translations.posts')}}"
                                      name_3="{{__('forms.create')}}"/>

                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <div class="card">
                        <form action="{{Helper::handle_route('posts.store')}}" method="POST"
                              class="form" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="mb-5">
                                    <livewire:form.text label="{{__('forms.title')}}" name="title"
                                                        value="{{old('title')}}"
                                    />
                                </div>

                                <div class="mb-3">
                                    <label>Post Type <span class="text-danger">*</span></label>
                                    <select name="post_type"
                                            class="form-control @error('post_type') border-danger @enderror"
                                            id="post_type">
                                        <option>Select Post Type</option>
                                        <option value="image" {{old("post_type") == 'image' ? 'selected' : ''}}>Image
                                        </option>
                                        <option value="video" {{old("post_type") == 'video' ? 'selected' : ''}}>Video
                                        </option>
                                        <option value="text" {{old("post_type") == 'text' ? 'selected' : ''}}>Text
                                        </option>
                                    </select>
                                    @error('post_type')
                                    <span class="text-danger"> {{ $errors->first('post_type') }} </span>
                                    @enderror
                                </div>

                                <div class="row mb-5" id="media_section">

                                    <div class="mb-5 col-6" id="image_"
                                         style="display: {{old("post_type") == 'image' ? 'block' : 'none'}}">
                                        <livewire:form.image label="{{__('forms.image')}}" name="image"/>
                                    </div>

                                    <div class="mt-5 mb-5 col-6" id="video"
                                         style="display: {{old("post_type") == 'video' ? 'block' : 'none'}}">
                                        <label>Video </label>

                                        <input type="file" name="video"
                                               class="form-control  @error('video') border-danger @enderror"
                                               accept="video/*">

                                        @error('video')
                                        <span class="text-danger"> {{ $errors->first('video') }} </span>
                                        @enderror

                                        <div class="mt-5">
                                            <livewire:form.text label="Video link" name="video_link"
                                                                value="{{old('video_link')}}"
                                            />
                                        </div>

                                    </div>
                                </div>

                                <div class="mb-5">
                                    <label>Tags</label>
                                    <select class="form-control @error('tags') border-danger @enderror" name="tags[]"
                                            multiple="multiple" id="tags">
                                    </select>

                                    @error('tags')
                                    <span class="text-danger"> {{ $errors->first('tags') }} </span>
                                    @enderror

                                </div>

                                <div class="mb-5">
                                    <livewire:form.area label="{{__('forms.description')}}"
                                                        name="description" required="required"/>
                                </div>
                                <div class="mb-3">
                                    <label>Phase</label>
                                    <select name="phase_id"
                                            class="form-control  @error('phase_id') border-danger @enderror">
                                        <option
                                            value="" {{old("phase_id") == null ? 'selected' : ''}}>Select Phase</option>
                                        @foreach($phases as $phase)
                                            <option
                                                value="{{$phase->id}}" {{old("phase_id") == $phase->id ? 'selected' : ''}}>{{$phase->title}}</option>
                                        @endforeach
                                    </select>

                                    @error('phase_id')
                                    <span class="text-danger"> {{ $errors->first('phase_id') }} </span>
                                    @enderror

                                </div>

                                <div class="mb-5">
                                    <label>{{__('forms.status')}}</label>
                                    <select name="status" class="form-control">
                                        <option
                                            value="1" {{old("status") == 1 ? 'selected' : ''}}>{{__('forms.enabled')}}</option>
                                        <option
                                            value="0" {{ !is_null(old('status')) && old("status") == 0 ? 'selected' : ''}}>{{__('forms.disabled')}}</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <div class="form-check form-switch p-0">
                                        <div class="d-flex">
                                            <label class="form-check-label fw-bold"
                                                   style="font-size: 14px;">Private </label>

                                            <div class="form-switch form-check ms-3 me-3 mt-1">
                                                <input type="checkbox" class="form-check-input" name="is_public"
                                                       value="1" {{ old("is_public") == 1 ? 'checked="checked"' : '' }}>
                                            </div>
                                            <label class="form-check-label fs-1x  fw-bold"
                                                   style="font-size: 14px;">Public</label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="card-footer">
                                <input type="submit" value="{{__('forms.create')}}" class="btn btn-primary">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {

            $('#mendatory').hide();

            $('#tags').select2({
                ajax: {
                    url: '{{route('tags.data')}}',
                    dataType: 'json',
                    processResults: function (data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: "Select tags",
            });
        });

        $(document).ready(function () {

            $('.kt_docs_ckeditor_classic').each(function () {
                CKEDITOR.replace($(this)[0]).config.width = '100%';
            });

            // $('input[type="file"]').on('change',function(e){
            //     $('#upload_'+$(this).attr('rand_key')).remove();
            //     var rand_key = (Math.random() + 1).toString(36).substring(7);
            //     $(this).attr('rand_key',rand_key);
            //     if(e.target.files.length){
            //         $(this).attr('rand_key',rand_key);
            //         $('<div class="col-12 py-2 px-0" id="upload_'+rand_key+'"></div>').insertAfter(this);
            //         $.each(e.target.files,(key,value)=>{
            //             $('#upload_'+rand_key).append('<div class="row d-flex m-0   btn" style="border:1px solid rgb(136 136 136 / 17%);max-width: 100%;padding: 5px;width: 220px;background: rgb(142 142 142 / 6%);margin-bottom:10px!important"><div style="max-height: 35px;overflow: hidden;display:flex;flex-flow: nowrap;" class="p-0 align-items-center">\
            //     <span class="d-inline-block font-small " style="line-height: 1.2;opacity: 0.7;border-radius: 12px;width:71px">\
            //         <span class="fas fa-cloud-download p-2 font-2 me-2" style="background:rgb(129 129 129 / 24%);border-radius: 12px;"></span>\
            //     </span>\
            //     <span style="direction: ltr;position: relative;top: -2px;height:20px;overflow:hidden" class="d-inline-block naskh font-small"> '+value.name+' </span>\
            //         <span class="d-inline-block font-small px-2" style="position: relative;font-weight: bold;"> '+(Math.round(value.size/1000000 * 100) / 100).toFixed(2)+'M </span>\
            //     </div>\
            // </div>')});
            //     }
            // });

            const $type = $('#post_type :selected').text();

            if ($type === 'Text') {
                $('#mendatory').show();
            } else {
                $('#mendatory').hide();
            }
        });

    </script>
@endsection