@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">Companies</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/company') }}">Company</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/company') }}" 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 for="example-text-input" class="text-primary">Heading</label>
                                            <input type="text" class="form-control" id="example-text-input" name="heading" placeholder="heading" value="{{ old('heading') }}" required>
                                        </div>
                                        <div class="form-group ml-3">
                                            <label class="text-primary">Logo</label>
                                            <div class="custom-file mb-4">
                                                <input type="file" class="custom-file-input @error('logo') is-invalid @enderror" data-toggle="custom-file-input" name="logo">
                                                <label class="custom-file-label">Choose file</label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="block block-rounded">
                                                <div class="block-header">
                                                    <h3 class="block-title text-primary">Small Descriptioin</h3>
                                                </div>
                                                <div class="block-content">
                                                    <div class="form-group">
                                                        <textarea id="editor1" class="w-100" name="small_description">{{ old('small_description') }}</textarea>
                                                    </div>
                                                </div>
                                        </div>
                                        <div class="form-group ml-3">
                                            <label for="example-text-input" class="text-primary">Page Heading</label>
                                            <input type="text" class="form-control" id="example-text-input" name="page_heading" placeholder="page heading" value="{{ old('page_heading') }}" required>
                                        </div>
                                        <div class="form-group">
                                            <div class="block block-rounded">
                                                <div class="block-header">
                                                    <h3 class="block-title text-primary">Page Descriptioin</h3>
                                                </div>
                                                <div class="block-content">
                                                    <textarea id="editor3" class="w-100" name="page_description">{{ old('page_description') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="block block-rounded">
                                                <div class="block-header">
                                                    <h3 class="block-title text-primary">Detailed Descriptioin</h3>
                                                </div>
                                                <div class="block-content">
                                                    <textarea id="editor2" class="w-100" name="detailed_description">{{ old('detailed_description') }}</textarea>
                                            </div>
                                        </div>

                                        <div class="form-group ml-3">
                                            <label for="example-text-input" class="text-primary">Duration</label>
                                            <input type="text" class="form-control" id="example-text-input" name="duration" placeholder="duration" value="{{ old('duration') }}" required>
                                        </div>
                                        <div class="form-group ml-3">
                                            <label for="example-text-input" class="text-primary">Price</label>
                                            <input type="text" class="form-control" id="example-text-input" name="price" placeholder="price" value="{{ old('price') }}" required>
                                        </div>
                                        <div class="form-group ml-3">
                                            <label for="example-text-input" class="text-primary">Actual Price</label>
                                            <input type="text" class="form-control" id="example-text-input" name="actual_price" placeholder="price" value="{{ old('price') }}" required>
                                        </div>
                                       <!-- <div class="form-group ml-3">
                                            <label for="example-text-input" class="text-primary">Validity Date</label>
                                            <input required  placeholder="Validity Date" type="text" onfocus="(this.type = 'date')"  class="form-control"  name="validity_date" >
                                        </div> -->
                                        <div class="form-group ml-3">
                                            <label class="text-primary">Image</label>
                                            <div class="custom-file">
                                                <input type="file" name="image" 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 class="form-group ml-4">
                                            <label for="example-text-input" class="text-primary">SEO Title</label>
                                            <input type="text" class="form-control" id="example-text-input" name="seo_title" placeholder="seo_title" value="{{ old('seo_title') }}">
                                        </div>
                                        <div class="form-group ml-4">
                                            <label for="example-text-input" class="text-primary">SEO URL</label>
                                            <input type="text" class="form-control" id="example-text-input" name="seo_url" placeholder="seo_url" value="{{ old('seo_url') }}">
                                            @error('seo_url')
                                                <div class="error text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <div class="block-content">
                                                <label for="example-text-input" class="text-primary">SEO Description</label>
                                                <div class="form-group">
                                                    <textarea class="w-100" name="seo_description">{{ old('seo_description') }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-left 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/company')}}"> Back</a>
                                        </div>
                                   </div>
                             </div>
                        </div>
                    </form>

                </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.59/1,
            crop: function(e) {
            }
            });
            if (cropper.element.classList.contains("cropper-hidden"))
            {
                cropper.element.cropper.destroy();
                var cropper = new Cropper(image, {
                    aspectRatio: 1.59/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:313px;height:197px;";
            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();
            });

            });

        }


        ClassicEditor
        .create( document.querySelector( '#editor1' ) )
        .catch( error => {
            console.error( error );
        } );

        ClassicEditor
        .create( document.querySelector( '#editor2' ) )
        .catch( error => {
            console.error( error );
        } );

        ClassicEditor
        .create( document.querySelector( '#editor3' ) )
        .catch( error => {
            console.error( error );
        } );


    </script>
@endsection