{{-- Extends layout --}}
@extends('layout.default')

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
		{{-- <link href="plugins/custom/uppy/uppy.bundle.css" rel="stylesheet" type="text/css" /> --}}
        {{-- <link rel="stylesheet" type="text/css" href="{{ asset('plugins/custom/uppy/uppy.bundle.css') }}" /> --}}

        <link href="https://releases.transloadit.com/uppy/v1.25.2/uppy.min.css" rel="stylesheet">

	<!--end::Page Custom Styles-->
@endsection

{{-- Content --}}
@section('content')
    <!--begin::Card-->
    <div class="card card-custom card-stretch gutter-b">
        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">File Uplaod</h3>
            </div>
        </div>
        
        <!--begin::Form-->
        <form method="POST" action="{{route('consumption.store')}}" id="uppy_form" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-3 col-sm-12">Date</label>
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <div class="input-group date" >
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="la la-calendar"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control" readonly  placeholder="mm/dd/yyyy" name="date" required id="kt_datepicker_3"/>
                            
                        </div> 
                        <span class="form-text text-muted">Click and select date</span>
                    </div>
                </div>
                
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label text-lg-right">Upload Files:</label>
                    <div class="col-lg-4">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                              <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                            </div>
                            <div class="custom-file">
                              <input type="file" class="custom-file-input" id="xl_file" aria-describedby="xl_file" name="file" required>
                              <label class="custom-file-label" for="xl_file">Choose file</label>
                            </div>
                        </div>
                        <span class="form-text text-muted">Max file size is 1MB and max number of files is 5.</span>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-3 col-sm-12">Remarks <span class="text-muted">(Optional)</span>:</label>
                    
                    <div class="col-lg-4 col-md-9 col-sm-12">
                        <textarea class="form-control form-control-solid" name='remark' rows="3"></textarea>
                        <span class="form-text text-muted">Write down comment if necessary</span>
                    </div>
                </div>

                {{-- <div class="form-group row">
                    <label class="col-lg-3 col-form-label text-lg-right">Upload Excel:</label>
                    <div class="col-lg-4">
                        <div class="uppy" id="kt_uppy_3">
                            <div id="uppy_drag" class="uppy-drag" style="height: 200px !important"></div>
                            <div class="uppy-informer"></div>
                            <div class="uppy-progress"></div>
                            <div class="uppy-thumbnails"></div>
                        </div>
                        <span class="form-text text-muted">Max file size is 1MB and max number of files is 5.</span>
                    </div>
                </div> --}}

            </div>

            <div class="card-footer pt-0 border-0">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-secondary ml-3">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
        <!--end::Form-->
    </div>
    <!--end::Card-->

@endsection

{{-- Scripts Section --}}
@section('scripts')



    <!--begin::Page Scripts(used by this page)-->
    {{-- <script src="js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script> --}}
    <script src="{{ asset("js/pages/crud/forms/widgets/bootstrap-datepicker.js") }}"></script>
    <script src="{{ asset("plugins/custom/uppy/uppy.bundle.js") }}"></script>
    {{-- <script src="{{ asset("js/pages/crud/file-upload/uppy.js") }}"></script> --}}

    {{-- <script>
        const Uppy = require('@uppy/core');
        const XHRUpload = require('@uppy/xhr-upload');
        const Dashboard = require('@uppy/dashboard');

        const uppy = new Uppy()
            .use(Dashboard,{
                target: '#uppy_drag'
            })
    </script> --}}
	<!--end::Page Scripts-->
@endsection