@extends('layout.padrao')
@section('content')
@section('title', 'Spot Sales Register')

<img src="{!! asset('/image/csa_Logo78x74.png') !!}" class="logoForm">

<div class="col-lg-12 col-sm-12 col-md-12 folha-interna shadow folha-branca-contornada rounded margin-bottom-15 padding-15" style="min-height: auto !important">

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="row">

        <form method="POST" action="{{route('spotSales.store') }}" accept-charset="UTF-8" enctype="multipart/form-data" id="form_spot_sales">

            {{ method_field('POST') }}
            {{ csrf_field() }}

            <div class="col-lg-4 col-md-12  col-sm-12 margin-bottom-15">
                <label for="salesNumberTxt">Sales Number</label>
                <input type="text" id="salesNumberTxt" name="salesNumberTxt" class="form-control disabled-field" value="{{$lastSpotSaleNumber}}">
            </div>

            <div class="col-12 col-lg-12 col-md-12 col-sm-12">
                <div class="row">
                    <div class="col-12 display-flex justify-content-center">
                        <div class="sep-line3"></div>
                    </div>

                    <div class="col-lg-6 col-md-12 col-sm-12 margin-bottom-15 flexRow">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15">
                                <label for="clientInput">Client</label>
                                {!! Form::select('clients_id',[''=>'-- Select Required --']+$select['clients_fantasyName_id'], null, ['class' => 'form-control'], ['required' => 'required']) !!}
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15">
                                <label for="salesPersonInput">Sales Person</label>
                                {!! Form::select('usuarios_id',[''=>'-- Select Required --']+$select['usuariosCSA_id'], null, ['class' => 'form-control']) !!}
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15">
                                <label for="clientDetailsTxt">Client Full Details</label>
                                <textarea name="clientDetailsTxt" id="clientDetailsTxt" class="form-control textsArea " disabled cols="30" rows="10" style="height:100px"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="col-1 d-sm-none d-md-block display-flex justify-content-center">
                        <div class="verticalLineGray"></div>
                    </div>

                    <div class="col-lg-5 col-md-12 col-sm-12 margin-bottom-15 flexRow">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15 flexRow">
                                <span class="spanLarge">Profit </span>
                                <input type="text" id="valueProfitInput" name="valueProfitInput" class="form-control disabled-field" data-prefix="USD ">
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15 flexRow ">
                                <span class="spanLarge">Carrier </span>
                                {!! Form::select('carriers_id',[''=>'-- Select Required --']+$select['carriers_id'], null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15 flexRow">
                                <span class="spanLarge">Equipment Type </span> 
                                {!! Form::select('container_types_id',[''=>'-- Select Required --']+$select['containerTypes_id'], null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15 flexRow ">
                                <span class="spanLarge">Qty </span>
                                <input type="number" min="1" id="qtyInput" name="quantity" class="form-control" value="1" onchange="calcProfit()">
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15 flexRow">
                                <span class="spanLarge">Buy </span>
                                <input type="text" min="0" id="buyInput" name="purchase_price" class="form-control" data-thousands="." data-decimal="," data-prefix="USD " onchange="calcProfit()">
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-12 col-md-12 col-sm-12 flexRow ">
                                <span class="spanLarge">Sale </span>
                                <input type="text" min="0" id="saleInput" name="sale_price" class="form-control" data-thousands="." data-decimal="," data-prefix="USD " onchange="calcProfit()">
                            </div>
                        </div>
                    </div>

                    <div class="col-12 display-flex justify-content-center">
                        <div class="sep-line3"></div>
                    </div>
                    
                    <div class="col-lg-12 col-md-12 col-sm-12 margin-bottom-15">
                        <div class="row flexRow">
                            <div class="col-lg-3 col-sm-12 col-md-12 margin-bottom-15 align-self-center" style="height: 34px">
                                <span class="spanLarge">Vincular Booking </span>
                                <input type="checkbox" name="vincBookingCheckbox" id="vincBookingCheckbox">
                            </div>
                            <div class="col-lg-3 col-sm-12 col-md-12 margin-bottom-15 align-self-center flexRow display-none " id="numberOfBooking" >
                                <span class="spanLarge">Booking N# </span>
                                <input type="text" name="bookingNumberInput" id="bookingNumberInput" class="form-control">
                            </div>



                            <!-- Booking Information -->
                            <div class="w-100"></div>
                            <div class="col-12 display-none" id="bookingInformation">
                                <div class="row display-flex justify-content-center bookingInformation">
                                    <div class="col-lg-6 col-sm-12 col-md-12 folha-azul margin-bottom-15 margin-top-15">
                                        <div class="row">
                                            <div class="col align-items-center">
                                                <h4>Booking Information</h4>
                                            </div>
                                            <div class="w-100"></div>
                                            <div class="col-12 display-flex justify-content-center">
                                                <div class="sep-line3 bookingCard"></div>
                                            </div>

                                            <div class="col-lg-6 col-md-12 col-sm-12">
                                                <label for="clients_id_booking_info">Client:</label>
                                                <span id="clients_id_booking_info" name="clients_id"></span>
                                                </br>

                                                <label for="booking_id_booking_info">Booking:</label>
                                                <span id="booking_id_booking_info" name="booking_id"></span>
                                                </br>

                                                <label for="platforms_id_booking_info">Product:</label>
                                                <span id="platforms_id_booking_info" name="platforms_id"></span>
                                                </br>

                                                <label for="carrier_id_booking_info">Carrier:</label>
                                                <span id="carrier_id_booking_info" name="carrier_id"></span>
                                                <span> - </span>
                                                <label for="vessel_id_booking_info">Vessel:</label>
                                                <span id="vessel_id_booking_info" name="vessel_id"></span>
                                                <span> - </span>
                                                <label for="voyage_id_booking_info">Voyage:</label>
                                                <span id="voyage_id_booking_info" name="voyage_id"></span>
                                                </br>

                                                <label for="portDestination_id_booking_info">Destination Port:</label>
                                                <span id="portDestination_id_booking_info" name="portDestination_id"></span>
                                            </div>

                                            <div class="col-lg-6 col-md-12 col-sm-12 secondPart">
                                                <label for="blDate_id_booking_info">BL Date:</label>
                                                <span id="blDate_id_booking_info" name="blDate_id"></span>
                                                </br>

                                                <label for="blNumber_id_booking_info">BL Nº:</label>
                                                <span id="blNumber_id_booking_info" name="blNumber_id"></span>
                                                </br>

                                                <label for="loadingPorts_id_booking_info">POL:</label>
                                                <span id="loadingPorts_id_booking_info" name="loadingPorts_id"></span>
                                                </br>

                                                <label for="qtyEquipments_id_booking_info">Qty Equipments:</label>
                                                <span id="qtyEquipments_id_booking_info" name="qtyEquipments_id"></span>
                                                </br>

                                                <label for="containerTypes_id_booking_info">Equipment Type:</label>
                                                <span id="containerTypes_id_booking_info" name="containerTypes_id"></span>
                                                </br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>

                        <div class="row flexRow">
                            <div class="col-lg-3"></div>
                            <div id="alertBookingFind" 
                                class="col-lg-6 col-sm-12 col-md-12 margin-15  align-self-center flexRow display-none text-center alert alert-danger" role="alert"
                                style="max-width: 500px;">
                                Booking not found!
                            </div>
                        </div>
                        
                    </div>

                    <!--Attachment-->
                    <div id="commentsArea" class="col-lg-12 col-md-12 col-sm-12">
                        <label for="containerTypes_id">Attachments</label>
                    </div>
                    <div class="col-lg-12 col-sm-12 col-md-12 margin-bottom-10 input-group control-group increment-attach" id="increment-attach">
                        <span id="attach-child">
                            <div class="col-lg-3 col-sm-3 col-md-3 {{ $errors->has('anexo_types_id.0')? 'has-error':''}}">
                                    {!! Form::select('anexo_types_id[]',[''=>'-- Select Required --']+$select['anexo_types_id'], null, ['class' => 'form-control', 'style'=>'height:40px']) !!}
                            </div>
                            <div class="col-lg-8 col-sm-7 col-md-7 pb-3 increment " style="padding: 0 0;display: inline-flex;width: 78%;">
                                <input type="file" name="filename[]" class="form-control" multiple="multiple" style="height:40px;">
                            </div>
                            <div id='btn_attach_change' class="col-lg-1 col-sm-1 col-md-1 input-group-btn">
                                <div class="btn btn-attachment attach-success" type="button" style="height:40px;">
                                    <div class="circleIcon">
                                        <img src="{!! asset('/image/plus.svg') !!}" class="botao-circular-add">
                                    </div>
                                </div>
                            </div>
                        </span>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <label for="addCommentsTxt">Additional Comments</label>
                        <textarea name="comments" id="addCommentsTxt" class="form-control textsArea" cols="30" rows="10" style="height:55px"></textarea>
                    </div>

                    <div class="w-100"></div>
                    <div class="col-12 col-lg-12 col-md-12 col-sm-12 margin-bottom-15 margin-top-15 display-flex justify-content-end">
                        <button class="btn btn-blue" style="margin-right: 6px;" type="submit">Save</button>
                        <button class="btn btn-blue" type="reset">Cancel</button>
                    </div>
                </div> 
            </div>
        </form>

    </div>
</div>




@include('bibliotecas.maskMoney')
@include('spotSales.style')
@include('spotSales.script')
@endsection