@extends('include.app')
@section('content')

 <div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed main-content-narrow">

  @include('include.sidebar')
  @include('include.headnavbar')
    <main id="main-container">
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill h3 my-2 text-primary">Placement</h1>
                    <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-alt">
                            <li class="breadcrumb-item text-dark">
                                <a class="link-fx text-dark" href="{{ url('ab/placement') }}">Placement</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                <a class="link-fx" href="">Add</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="block block-rounded">
                <div class="block-content block-content-full">
                    <form action="{{ url('ab/placement') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                         @endif
                            <div class="row push">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <div class="form-group ml-3">
                                            <label class="text-primary">Choose Type</label>
                                            <select class="custom-select" name="type" required>
                                                <option value="">Select Option</option>
                                                <option value="1">Image</option>
                                                <option value="2">Video</option>
                                                <option value="3">Description</option>
                                            </select>
                                        </div>

                                        <div class="form-group ml-4">
                                            <label for="example-text-input" class="text-primary">Title</label>
                                            <input type="text" class="form-control" id="example-text-input" name="name" placeholder="title" value="{{ old('name') }}" required>
                                        </div>

                                        <div class="form-group" id="image_type">
                                            <div class="form-group ml-3">
                                                <label class="text-primary">Image</label>
                                                <div class="custom-file">
                                                    <input type="file" name="file" id="image" onchange="readURL(this);" />
                                                    @error('croped_image')
                                                        <div class="error text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6 crop mb-3 mt-3">
                                                <img id="blah" src="#" name="crop_image" alt="your image" width="600px" height="300px">
                                                    <input name="cropped_image" type="hidden"  id="cropped_image" />
                                                <div id="cropped_result"></div>
                                                    <button type="button" id="crop_button" class="mt-5 mb- btn btn-primary">Crop</button>
                                                    <button type="button" id="reset" class="mt-5 mb-3 btn btn-danger">Reset</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="video_type">

                                            <div class="form-group ml-3">
                                                <label class="text-primary" for="example-text-input">Video URL</label>
                                                <p class="text-success">('watch?v=', 'embed' type url only accepted)</p>
                                                    <input type="text" class="form-control" id="example-text-input" name="file" placeholder="video_url" value="{{ old('file') }}">
                                            </div>
                                        </div>

                                        <div id="descriptionType">
                                            <div class="block block-rounded">
                                                <div class="block-header">
                                                    <h3 class="block-title text-primary">Descriptioin</h3>
                                                </div>
                                                <div class="block-content">
                                                    <div class="form-group">
                                                        <textarea value="{{ old('description') }}" class="w-100" name="description" rows="2" cols="20"></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group ml-3">
                                                <label class="text-primary">Rating</label>
                                                <br>
                                                <div class="push">
                                                <div class="js-rating" data-star-on="fa fa-fw fa-2x fa-star text-warning"
                                                        data-star-off="fa fa-fw fa-2x fa-star text-muted" style="cursor: pointer;" id="rating"></div>
                                                </div>
                                            </div>
                                        </div>
                                   </div>
                             </div>
                             <div class="text-left form-group ml-3">
                                <button type="submit" id="subBtn" class="btn btn-alt-primary px-5 mr-3">Submit</button>
                                <a class="btn btn-alt-info" href="{{ url('ab/placement') }}"> Back</a>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
 </div>
@endsection

@section('script')
    <script>
        $('.crop').hide();
        $('#reset').hide();
        function readURL(input) {
            if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.crop').show();
            $('#blah').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
            }
            }
            function initCropper(){
            var image = document.getElementById('blah');
            var cropper = new Cropper(image, {
            aspectRatio:  1.42/1,
            crop: function(e) {
            }
            });
            if (cropper.element.classList.contains("cropper-hidden"))
            {
                cropper.element.cropper.destroy();
                var cropper = new Cropper(image, {
                    aspectRatio: 1.42/1,
                    crop: function(e) {}
                });
            }
            document.getElementById('crop_button').addEventListener('click', function(){
            var imgurl =  cropper.getCroppedCanvas().toDataURL();
            var img = document.createElement("img");
            img.src = imgurl;
            img.style.cssText = "width:360px;height:254px;";
            document.getElementById("cropped_result").appendChild(img);
            $('#cropped_image').val(imgurl);
            $('#reset').show();
            $('#crop_button').hide();

            document.getElementById('reset').addEventListener('click', function(){
                document.getElementById("cropped_result").appendChild(img).remove();
                $('#reset').hide();
                $('#crop_button').show();
            });

            });
        }

        $("#image_type").hide();
        $("#video_type").hide();
        $("#descriptionType").hide();

        $('select').on('change', function() {
            if(this.value == 1)
            {
                $("#image_type").show();
                $("#video_type").hide();
                $("#descriptionType").hide();
            }
            else if(this.value == 2)
            {
                $("#image_type").hide();
                $("#video_type").show();
                $("#descriptionType").hide();
            }
            else if(this.value == 3){

                $("#image_type").show();
                $("#video_type").hide();
                $("#descriptionType").show();
            }
        });
    </script>
@endsection