@extends('admin.layouts.contentLayoutMaster')

@section('title','Sample-Form')

@section('vendor-styles')

{{-- keen image --}}
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/keen/image-input.css')}}">

{{-- Dropzone
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/dragula.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/ui/prism.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/file-uploaders/dropzone.min.css')}}"> 
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/file-uploaders/dropzone.css')}}">
--}}
@endsection

@section('page-styles')
<style>

</style>
@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-10 col-12">
            <form class="form form-horizontal" action="{{ Route('admin.sample.upload.store') }}" method="POST" enctype="multipart/form-data" id="main_form">
                @csrf
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">

                                    <div class="col-md-1 offset-md-3">
                                        <label>圖片使用</label>
                                    </div>
                                    <div class="col-md-6 form-group ">
                                        @php
                                            $image_path = 'uploads/images/sample/2021/7/19/sample_1626688571_GwhNV.png'; 
                                        @endphp
                                        <img src="{{ ImageHandler::get($image_path) }}" alt="">    
                                    </div>
                                    
                                    {{-- 傳統檔案 --}}
                                    <div class="col-md-1 offset-md-3">
                                        <label>檔案</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input type="file" name="file_input" id="file_input">
                                    </div>


                                    {{-- 圖片上傳（預覽） --}}
                                    <div class="col-md-1 offset-md-3">
                                        <label>圖片上傳（預覽）</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        
                                        <div class="keen-image-input keen-image-input-outline" id="product_image">
                                            <div class="keen-image-input-wrapper" style="background-image: url({{ ImageHandler::get($image_path) }});"></div>
                                            <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                                                <i class="bx bx-edit icon-xs text-muted"></i>
                                                <input type="file" name="product_image" accept=".png, .jpg, .jpeg">
                                                <input type="hidden" name="product_image_remove" value="0">
                                            </label>
                                            <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="" data-original-title="Cancel avatar">
                                                <i class='bx bx-x icon-xs text-muted' ></i>
                                            </span>
                                        </div>

                                    </div>

                                    {{-- Dropzone --}}
                                    <div class="col-md-1 offset-md-3">
                                        <label>Dropzone</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        
                                        <button id="dropzone_button" class="btn btn-primary mb-1" type="button">
                                            <i class="icon-file2"></i> 選擇檔案
                                        </button>
                                       
                                        <div class="dropzone dropzone-default dropzone-primary" id="dropzone_container" name="dropzone_container">
                                            <input class="d-none" name="dropzone_file" id="dropzone_file" type="file" multiple  />
                                            {{-- <div class="dropzone-msg dz-message needsclick"> --}}
                                                {{-- <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3> --}}
                                                {{-- <span class="dropzone-msg-desc">Upload up to 10 files</span> --}}
                                            {{-- </div> --}}
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-8 ml-lg-auto">
                                    <button class="btn btn-primary mr-1 mb-1" type="submit">Submit</button> 
                                    <button class="btn btn-light glow mr-1 mb-1" type="reset" data-force="1">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('vendor-scripts')

{{-- keen image --}}
<script src="{{ asset('vendors/js/keen/util.js') }}"></script>
<script src="{{asset('vendors/js/keen/image-input.js')}}"></script>

{{-- Dropzone
<script src="{{asset('vendors/js/extensions/dragula.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/dropzone.min.js')}}"></script>
<script src="{{asset('vendors/js/ui/prism.min.js')}}"></script> 
--}}
@endsection

@section('page-scripts')
{{-- keen image --}}
<script>
    var product_image = new KTImageInput('product_image');
</script>

{{-- Dropzone 未完成
     <script>
        // Dropzone 
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone(document.body, {
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "##",
            paraName: 'dropzone_file',
            previewsContainer: "#dropzone_container",
            clickable: "#dropzone_button",
            autoProcessQueue: false,
            acceptedFiles: 'image/*',
            parallelUploads: 99999,
            init: function() {
                self = this;

                $('#main_form').on('submit', function() {


                    self.processQueue(); 
                });


                self.on('addedfile', function(file) {
                    $('.dropzone_container li:last-of-type').data('file', file);
                });
            }
        });
        dragula([document.getElementById('dropzone_container')]);
    </script>
--}}
@endsection