@extends('admin.layouts.app')
@section('title')
    {{ __('create') }}
@endsection
@section('content')
    @if (userCan('media.create'))
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title line-height-36">{{ __('create') }} {{ __('Media') }}</h3>
                            <a href="{{ route('media.index') }}"
                                class="btn bg-primary float-right d-flex align-items-center justify-content-center">
                                <i class="fas fa-arrow-left"></i>&nbsp; {{ __('back') }}
                            </a>
                        </div>
                        <div class="card-body">
                           <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <form action="{{ route('media.store') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="category">{{ __('Select Category') }} <small
                                                        class="text-danger">*</small></label>
                                                        <select name="category" id="category" class="form-control @error('category') is-invalid @enderror">
                                                            <option disabled selected>Select A Category</option>
                                                            <option value="grading_news" {{ old('category') == "grading_news" ? 'selected' : '' }}>Grading News</option>
                                                            <option value="print_coverage" {{ old('category') == "print_coverage" ? 'selected' : '' }}>Printing Coverage</option>
                                                            <option value="press_release" {{ old('category') == "press_release" ? 'selected' : '' }}>Press Release</option>
                                                            <option value="authored_article" {{ old('category') == "authored_article" ? 'selected' : '' }}>Authored Article</option>
                                                            <option value="social_media_coverage" {{ old('category') == "social_media_coverage" ? 'selected' : '' }}>Social Media Coverage</option>
                                                        </select>
                                                    @error('category')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="company_name">{{ __('Company Name') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="company_name" name="company_name" value="{{ old('company_name') }}"
                                                        class="form-control @error('company_name') is-invalid @enderror"
                                                        placeholder="{{ __('Company Title') }}{{ defaultCurrencySymbol() }}">
                                                    @error('company_name')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="title">{{ __('Title') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="title" name="title" value="{{ old('title') }}"
                                                        class="form-control @error('title') is-invalid @enderror"
                                                        placeholder="{{ __('Enter Title') }}{{ defaultCurrencySymbol() }}">
                                                    @error('title')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="description">{{ __('description') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="description" name="description" value="{{ old('description') }}"
                                                        class="form-control @error('description') is-invalid @enderror"
                                                        placeholder="{{ __('Enter description') }}{{ defaultCurrencySymbol() }}">
                                                    @error('description')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="url">{{ __('Url') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="url" name="url" value="{{ old('url') }}"
                                                        class="form-control @error('url') is-invalid @enderror"
                                                        placeholder="{{ __('Enter url') }}{{ defaultCurrencySymbol() }}">
                                                    @error('url')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="date">{{ __('Created Date') }}<small
                                                        class="text-danger">*</small></label>
                                                    <input class="form-control @error('date') is-invalid @enderror" type="date" id="date" name="date" placeholder="{{ __('Select a Date') }}{{ defaultCurrencySymbol() }}"> 
                                                    @error('date')
                                                    <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <div class="form-group">
                                                    <label class="form-label" for="images">{{ __('Upload Desktop Image') }}</label>
                                                    <div class="d-flex">
                                                        <input type="file" id="images" style="width:50%" class="form-control @error('images') is-invalid @enderror"
                                                            name="images" accept="image/png, image/jpg, image/jpeg, image/gif"
                                                            data-allowed-file-extensions='["jpg", "jpeg","png", "gif"]'
                                                            data-max-file-size="3M">
                                                        <button type="button" class="desktop_modal round-3 btn btn-outline-info border-secondary ml-3" data-bs-toggle="modal" data-bs-target="#desktop_modal">
                                                            <i class="fas fa-eye"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                @error('images')
                                                    <span class="invalid-feedback d-block"
                                                        role="alert"><strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            {{-- <div class="col-md-6 mt-2">
                                                <div class="form-group">
                                                    <label class="form-label" for="image_mobile">{{ __('Upload Mobile Image') }}</label>
                                                    <div class="d-flex">
                                                        <input type="file" id="image_mobile" style="width:50%" class="form-control @error('image_mobile') is-invalid @enderror"
                                                            name="image_mobile" accept="image/png, image/jpg, image/jpeg, image/gif"
                                                            data-allowed-file-extensions='["jpg", "jpeg","png", "gif"]'
                                                            data-max-file-size="3M">
                                                        <button type="button" class="round-3 btn mobile_modal btn-outline-info border-secondary ml-3" data-bs-toggle="modal" data-bs-target="#mobile_modal">
                                                            <i class="fas fa-eye"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                @error('image_mobile')
                                                    <span class="invalid-feedback d-block"
                                                        role="alert"><strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div> --}}
                                            <div class="col-md-6 mt-1 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label" for="frontend_show">
                                                        {{ __('Feature This Block?') }} <small class="text-danger">*</small>
                                                    </label> <br>
                                                    <div class="border borderHeight rounded" style="margin-top: 4px !important; padding: 6px !important;">
                                                        {{-- <div class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" id="featured_yes" name="featured" class="plan_type_selection custom-control-input" value="1" checked>
                                                            <label class="custom-control-label" for="featured">{{ __('yes') }}</label>
                                                        </div>
                                                        <div class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" id="featured_no" name="featured" class="plan_type_selection custom-control-input" value="0">
                                                            <label class="custom-control-label" for="featured">
                                                                {{ __('no') }}
                                                            </label>
                                                        </div> --}}
                                                          <div class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="show_frontend_yes" name="featured" class="plan_type_selection custom-control-input" value="1" checked>
                                                                <label class="custom-control-label" for="show_frontend_yes">{{ __('yes') }}</label>
                                                            </div>
                                                            <div class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="show_frontend_no" name="featured" class="plan_type_selection custom-control-input" value="0">
                                                                <label class="custom-control-label" for="show_frontend_no">
                                                                    {{ __('no') }}
                                                                </label>
                                                            </div>
                                                    </div>
                                                    @error('featured')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            {{-- <div class="col-md-6 mt-2">
                                                <div class="form-group">
                                                    <label class="form-label" for="description">{{ __('description') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <textarea id="editor1" rows="10" cols="5" name="description" placeholder="{{ __('enter') }} {{ __('description') }}" value="{{ old('description') }}" class="form-control @error('description') is-invalid @enderror"> {{ old('description') }}</textarea>
                                                    @error('description')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>--}}
                                        </div>
                                        <div class="row justify-content-center">
                                            <button class="btn btn-success" type="submit">
                                                <i class="fas fa-plus"></i>&nbsp; {{ __('create') }}
                                            </button>
                                        </div>  
                                    </form>
                                </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    {{-- Modals --}}
    <div class="modal fade" id="desktop_modal" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content adjustMdal">
                <!-- Close button at the top right corner -->
                <div class="d-flex align-items-center justify-content-end">
                <button type="button" class="float-right btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="ratio ratio-1x1 d-flex justify-content-center align-items-center" style="width: 200px; height: 150px;">
                    <img src="" id="desktop_src" />
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="modal fade" id="mobile_modal" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content adjustMdalSec">
                <!-- Close button at the top right corner -->
                <div class="d-flex align-items-center justify-content-end">
                <button type="button" class="float-right btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="ratio ratio-1x1 d-flex justify-content-center align-items-center" style="width: 200px; height: 150px;">
                    <img src="" id="mobile_src" />
                </div>
            </div>
        </div>
    </div> --}}
@endsection
@section('script')
<script>
    $('.mobile_modal').hide();
    $('.desktop_modal').hide();
    for(i=0;i<7;i++){
            ClassicEditor
            .create(document.querySelector(`#editor${i}`))
            .catch(error => {
                console.error(error);
            });
        }

    $('#images').on('change', function (e) {
        var input = e.target;
        console.log(input);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.desktop_modal').show();
                $('#desktop_src').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    });
    // $('#image_mobile').on('change', function (e) {
    //     var input = e.target;
    //     console.log(input);
    //     if (input.files && input.files[0]) {
    //         var reader = new FileReader();
    //         reader.onload = function (e) {
    //             $('.mobile_modal').show();
    //             $('#mobile_src').attr('src', e.target.result);
    //         }
    //         reader.readAsDataURL(input.files[0]);
    //     }
    // });
</script>
@endsection
@section('style')
    <style>
        .adjustMdal{
            width: 50%;
            margin-top: 29%;
            padding-left: 16%;
        }
        .adjustMdalSec{
            width: 50%;
            margin-top: 29%;
            padding-left: 16%;
            margin-left: 60%;
        }
    </style>
@endsection