@extends('panel.layouts.app')

@section('content')
    <!-- Content -->
    <div class="content-area p-y-1">
        <div class="container-fluid">
            <h1 class="h-underline h-underline-50 h-underline-info">Release {{ $title }}</h1>
            <div class="box box-block bg-white" >

                <form action="{{ route('release.order.submit',$order->id) }}" enctype="multipart/form-data" method="post">
                    {{ csrf_field() }}
                    <div style="text-align: right">
                        <button type="button" style="" id="clone_button" class="btn btn-info">Clone</button>
                    </div>


                    <div class="options" id="options_clone">
                        <div class="option">
                            <h5 class="h-underline h-underline-info h-underline-50" class="option_heading">Option</h5>
                            <div class="form-group row">
                                <label for="input-width" class="col-xs-2 col-form-label" name="SizeDesign[]">Size</label>
                                <div class="col-xs-5">
                                    <input class="form-control" type="number" placeholder="Width" id="input-width" name="Width[]">
                                </div>
                                <div class="col-xs-5">
                                    <input class="form-control" type="number" placeholder="Height" id="input-height" name="Height[]">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-stitches" class="col-xs-2 col-form-label" >Stitches</label>
                                <div class="col-xs-8">
                                    <input class="form-control" type="number" placeholder="Stitches" id="input-stitches" name="stitches[]">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="v" class="col-xs-2 col-form-label" >Number of colors</label>
                                <div class="col-xs-8">
                                    <input class="form-control" type="number" placeholder="number Of Colors" id="input-noOfColors" name="numberOfColors[]">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="v" class="col-xs-2 col-form-label" >Amount</label>
                                <div class="col-xs-8">
                                    <input class="form-control" type="number" placeholder="Amount" id="input-amount" name="amount[]">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="example-text-input" class="col-xs-2 col-form-label" >Attachments</label>
                                <div class="col-xs-2">
                                    <input type="file" class="form-control-file" id="exampleInputFile" name="attachment[]" aria-describedby="fileHelp"><br>
                                    <input type="file" class="form-control-file" id="exampleInputFile" name="attachment[]" aria-describedby="fileHelp"><br>
                                    <input type="file" class="form-control-file" id="exampleInputFile" name="attachment[]" aria-describedby="fileHelp"><br>
                                    <input type="file" class="form-control-file" id="exampleInputFile" name="attachment[]" aria-describedby="fileHelp"><br>
                                    <input type="file" class="form-control-file" id="exampleInputFile" name="attachment[]" aria-describedby="fileHelp">
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-xs-1" >
                            <button type="reset" class="btn btn-danger w-min-sm m-b-0-25 waves-effect waves-light">cancle</button>
                        </div>
                        <div class="col-xs-1" style="padding-left:40px;">
                            <input type="hidden" name="order_id" id="order_id" value="{{ $order->id }}">
                            <button type="sumbit" class="btn btn-info run-toast m-b-0-25 waves-effect waves-light"  data-type="success">Submit</button></a>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!-- Footer -->
    <footer class="footer">
        <div class="container-fluid">
            <div class="col-xs-9" >
                2019 © Dream Digitizing
            </div>
            <div class="col-xs-3" >
                <button type="button" class="btn bg-facebook m-b-0-25 waves-effect waves-light" >
                    <i class="ti-facebook"></i>
                </button>
                <button type="button" class="btn bg-twitter m-b-0-25 waves-effect waves-light">
                    <i class="ti-twitter"></i>
                </button>
                <button type="button" class="btn bg-instagram m-b-0-25 waves-effect waves-light">
                    <i class="ti-instagram"></i>
                </button>
                <button type="button" class="btn bg-google m-b-0-25 waves-effect waves-light">
                    <i class="ti-google"></i>
                </button>
            </div>
        </div>
    </footer>
@endsection
@section('js')
    <script>
        $(document).on('click','#clone_button',function () {
            var options = $('.option')
            var $clone = $(options[0]).clone();
            $('#options_clone').append($clone);
        })
    </script>
@endsection