@extends('layout.padrao')
@section('title', 'Sample Order')

@section('content')

<style type="text/css">
#title-card{
    color:white; 
    background-color: #AFBED7;
    margin-top: 30px;
}

#detailsBroker{
    height: 60px;
    min-height: 60px;
    max-height: 120px;
}

#detailsBuyer{
    height: 60px;
    min-height: 60px;
    max-height: 120px;
    max-weight: 120px;
}

#marginCard{
    padding-top: 12px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 12px;
}

#brokerCard{
    min-width: 250px;
}

</style>

<div class="row">
    <div class="col-sm d-flex justify-content-end">
        <button type="button" class="btn">New</button>
    </div>
    <div class="col-sm-2 d-flex justify-content-end">
        <button type="button" class="btn">Cancel</button>
    </div>
    <div class="col-sm-2 d-flex justify-content-end">
        <button type="button" class="btn">Download</button>
    </div>
</div>

<!-- Business Information -->

<div class="card" id="title-card">
    <p style="">Business Information</p>
</div>

<div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 bg-white rounded">
        <div class="col col-lg-12 col-sm-12 col-md-12 input-group control-group  increment-attach2" id="increment-attach2">
            <span id="attach-child2">
                <div class = "row col-lg-12 col-sm-12 col-md-12">
                    <!-- Input Business Reference -->
                    <div class="col col-lg-3 form-group" style="margin-left:10px;">
                    <label for="businessReferenceInput" class="w-100 control-label">Business Reference</label>
                    <input class="form-control" id="businessReferenceInput">
                    </div>
                    <!-- Select Product -->
                    <div class="col col-lg-3 form-group">
                        <label for="productSelect" class="w-100 control-label">Product</label>
                            <select class="form-control form-select-lg" aria-label=".form-select-lg">
                                <option selected></option>
                                <option value="1"></option>
                             </select>         
                    </div>
                    <!-- User name input readonly -->
                    <div class="col col-lg-3 form-group offset-md-1">
                        <label for="userNameInput" class="w-100 control-label">User Name</label>
                        <input class="form-control" id="disabledTextInput" readonly>  
                        <!-- Search button -->      
                    </div>      
                </div>
            </span>    
        </div>
    </div>

    <div class="row" id="brokerCard">

        <!-- Broker -->
        <div class="col-2">
        <div class="card" id="title-card">
            <p>Broker</p>
        </div>
        <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 bg-white rounded" >
            <form id="marginCard">
                <label for="nameSelect" class="w-100 control-label">Name</label>
                <select class="form-control form-select-lg" aria-label=".form-select-lg">
                    <option selected></option>
                    <option value="1"></option>
                </select> 
                
                <textarea class="form-control" id="detailsBroker" rows="3"></textarea>

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

        <!-- Buyer -->
        <div class="col">
        <div class="card" id="title-card">
            <p>Buyer</p>
        </div>
        <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 bg-white rounded">
            <form id= "marginCard">
                <label for="nameSelect" class="w-100 control-label">Name</label>
                        <select class="form-control form-select-lg" aria-label=".form-select-lg">
                            <option selected></option>
                            <option value="1"></option>
                        </select> 
                        <textarea class="form-control" id="detailsBuyer" rows="3"></textarea>
            </form>
        </div>
        </div>

    </div>

    

@endsection