@extends('layout.padrao')
@section('title', 'Contract Status')
@section('content')

<!-- Defindo cores dos icones dos cards:

icone cinza claro:   class="icon-style-gray"
icone verde:         class="icon-style-green"
icone amarelo:       class="icon-style-yellow"
icone vermelho:      class="icon-style-red"  

-->

<form class="contractStatusForm" name="contractStatusForm" id="contractStatusForm">
    <div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 p-3 mb-5 rounded folha-branca-contornada">
        <div class="col">
            <div class="col">
                <label for="buyerSelect" class="w-100 control-label">Buyer</label>
                <select class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" name="buyerSelect">
                    @foreach($select['buyers'] as $Key_buyers => $value_buyers)
                    <option value="{{$Key_buyers}}">{{ $value_buyers }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col">
                <label for="polSelect" class="w-100 control-label">POL</label>
                <select class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" name="polSelect">
                    @foreach($select['loadingPorts'] as $Key_pol => $value_pol)
                    <option value="{{$Key_pol}}">{{ $value_pol }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col">
            <div class="col">
                <label for="requestedDateInput" class="w-100 control-label">Requested Date</label>
                <input class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" type="date" min="2019-01-01" max="2080-01-01" id="requestedDateInput" name="requestedDateInput"></input>
            </div>
            <div class="col">
                <label for="podSelect" class="w-100 control-label">POD</label>
                <select class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" name="podSelect">
                    @foreach($select['destinationPorts'] as $Key_pod => $value_pod)
                    <option value="{{$Key_pod}}">{{ $value_pod }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col">
            <div class="col">
                <label for="productSelect" class="w-100 control-label">Product</label>
                <select class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" name="productSelect">
                    @foreach($select['platforms'] as $Key_product => $value_product)
                    <option value="{{$Key_product}}">{{ $value_product }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col">
                <label for="brokerSelect" class="w-100 control-label">Broker</label>
                <select class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" name="brokerSelect">
                    @foreach($select['brokers'] as $Key_brokers => $value_brokers)
                    <option value="{{$Key_brokers}}">{{ $value_brokers }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col">
            <div class="col">
                <label for="requestedFromInput" class="w-100 control-label">Requested From</label>
                <input class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" type="date" min="2019-01-01" max="2080-01-01" id="requestedFromInput" name="requestedFromInput"></input>
            </div>
            <div class="col">
                <label for="requestedToInput" class="w-100 control-label">Requested To</label>
                <input class="form-control {{ $errors->has('contractStatusForm')? 'has-error':''}}" type="date" min="2019-01-01" max="2080-01-01" id="requestedToInput" name="requestedToInput"></input>
            </div>
        </div>

        <!-- Search, cancel and icon -->
        <div class="col-2" style="text-align: right; margin-top:80px">
            <div class="col" height="40px"></div>
            <button class="btn btn-style color-contract-status" type="submit" style="margin-right: 2%;">Search</button>
            <button class="btn btn-style color-contract-status" type="button" style="margin-right: 1%;">Cancel</button>
            <a title="Export" href="" width="50px" class="btn">
                <i class="fas fa-download icon-style" style="font-size: 25px; margin-right: 2%; color: #006985 !important;"></i>
            </a>
        </div>
    </div>
</form>

<div class="row folha-interna shadow col col-lg-12 col-sm-12 col-md-12 justify-content-center align-items-center rounded" style="min-height:initial; background: #f9f9f9 !important;">
    <div class="col">
        <div class="row align-items-center" style="margin-left: 3%; margin-right: 3%;">

            <!-- Criando os cards -->

            <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000001</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-yellow"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody">
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-green icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                    <i class="fas fa-check icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                    <i class="fas fa-minus-circle icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">

                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

           <!-- ========================================== card 2 =================================== -->
           <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000002</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-red"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody">
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-green icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                    <i class="fas fa-minus-circle icon-size-card icon-style-red" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ========================================== card 3 =================================== -->
           <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000003</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-yellow"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody">
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-gray icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                <i class="fas fa-check icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                    <i class="fas fa-minus-circle icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">

                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ========================================== card 4 =================================== -->
           <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000004</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-yellow"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody">
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-gray icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                    <i class="fas fa-check icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                    <i class="fas fa-minus-circle icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">

                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ========================================== card 5 =================================== -->
           <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000005</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-green"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody"> 
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-green icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                    <i class="fas fa-check icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                    <i class="fas fa-minus-circle icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">

                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ========================================== card 6 =================================== -->
           <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000006</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-green"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody">
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-green icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                    <i class="fas fa-check icon-size-card icon-style-green" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ========================================== card 7 =================================== -->
           <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000007</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-red"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody">
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-gray icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">

                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                <i class="fas fa-check icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                    <i class="fas fa-minus-circle icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">

                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ========================================== card 8 =================================== -->
            <div class="colCardStyle">
                <div class="card shadow contractBlocks">
                    <div class="card-header contract-card-header-color">
                        <div class="row cardRowTitleMargin">
                            <div class="col">
                                <label class="normalFontCard" id="descriptionCard" name="descriptionCard[]">Berg + Schimidt Asia Pte Ltd</label>
                                <div class="squareRefCard">
                                    <label class="normalFontCard refCard">Ref.
                                        <id class="normalFontCard" id="refLabel" name="refLabel[]">000008</id>
                                    </label>
                                </div>
                            </div>
                            <div class="col-1 bell-icon-card">
                                <i class="fas fa-bell icon-style-green"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body colorOfCardBody">
                        <div class="row">
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">
                                    Contract Sent? <i class="fas fa-check icon-style-green icon-size-card" data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:25px">
                                <!-- linha divisoria -->
                                <hr class="dashedLineCard">
                            </div>

                            <div class="w-100"></div>
                            <div class="col">
                                <h5 class="card-title marginContentTitleCard">Signed Contract Received?
                                    <i class="fas fa-check icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                    <i class="fas fa-minus-circle icon-size-card icon-style-gray"  data-toggle="modal" data-target="#add"></i>
                                </h5>
                            </div>

                            <div class="w-100"></div>
                            <div class="col" style="height:8px">
                                <h6 class="card-subtitle mb-2 text-muted contract-clockIconCard"> <i class="far fa-clock"></i>
                                    <label class="contract-dateCard normalFontCard" name="contract-dateCard">15.11.2019</label>
                                </h6>
                            </div>

                            <div class="w-100"></div>
                            <div class="col footerCard-Contract">
                                <a title="Export" href="#" class="btn">
                                    <i class="fas fa-download icon-style-green icon-download-card"></i>
                                </a>
                                <button data-toggle="modal" data-target="#add" class="fas fa-plus plus-style-card"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('trade.contract_confirmation.modal_contractConfirmation', ["formulario" => "contract"])

@endSection