<div class="panel panel-default">
    <div class="panel-heading">OPERATIVE FLIGHT PLAN</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-7">
                <label>Add LEG</label>
                <div>
                    <input type="hidden" class="bigdrop" id="city" style="width: 80%"/>
                    <button type="button" id="addLeg" class="btn btn-primary btn-sm">Add</button>
                    <button type="button" id="addWP" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-wp">New WP</button>
                </div>
            </div>
            <div class="col-md-5">
                <label>Speed (KTS)</label>
                <select id="speed" class="form-control">
                    <option>90</option>
                    <option>100</option>
                    <option>110</option>
                    <option selected>120</option>
                    <option>130</option>
                    <option>140</option>
                    <option>150</option>
                    <option>160</option>
                    <option>165</option>
                </select>
            </div>
        </div>
        <div class="clearfix"></div>
        <div id="tbls-legs">
            <div class="table-responsive">
            <table id="tbl-legs" class="table table-bordered hide">
                <tr class="info">
                    <th colspan="2">DEPARTURE BASE AND ENROUTE DATA</th>
                    <th>PRUA</th>
                    <th>FREQ. RADIO AIDS</th>
                    <th>INS. W.P. NAME OR ICAO CODE</th>
                    <th></th>
                </tr>
                <script id="leg-info" type="x-tmpl-mustache">
                <tr data-index="{{ index }}" class="row-leg row-leg-{{ index }}">
                    <th rowspan="2" class="center-td active">{{ &leg }}</th>
                    <td><input type="hidden" class="bigdrop" id="wp-name-{{ id }}" style="width: 100%"/></td>
                    <td>{{ degrees }}</td>
                    <td width="33%" rowspan="2">{{ freq }}</td>
                    <td rowspan="2"><input type="hidden" class="bigdrop" id="icao-code-{{ id }}" style="width: 100%"/></td>
                    <td rowspan="2" class="center-td">
                        <button type="button" class="btn btn-danger btn-sm remove-leg"><span class="glyphicon glyphicon-trash"></span></button>
                        {{#is_graph}}
                        <button type="button" class="btn btn-info btn-sm graph-leg" data-toggle="modal" data-target="#modal-graph"><span class="glyphicon glyphicon-stats"></span></button>
                        {{/is_graph}}
                    </td>
                </tr>
                <tr class="row-leg-{{ index }}">
                    <td>{{ &loc }}</td>
                    <td>{{ nm }}</td>
                </tr>
                </script>

            </table>
            </div>
            <div class="table-responsive">
            <table id="tbl-endurance" class="table table-bordered hide">
                <tr class="info">
                    <th rowspan="2" class="center-td">AVERAGE CONS kg/min</th>
                    <th colspan="6" class="center-td">ESTIMATE ENDURANCE (MINUTES OF FLIGHT)</th>
                    <th colspan="2" class="center-td">FLIGHT TIME min</th>
                </tr>
                <tr class="info">
                    <th class="center-td" colspan="2">INITIAL FUEL LOAD KG</th>
                    <th class="center-td" colspan="2">ENDURANCE h min.</th>
                    <th class="center-td"><span data-toggle="tooltip" title="RISERVA VFR 20' + 5% DELLA TRATTA">Res VFR</span></th>
                    <th class="center-td"><span data-toggle="tooltip" title="RISERVA VFR N 20' + 10% DELLA TRATTA">Res VFRN</span></th>
                    <th class="center-td">MAX</th>
                    <th class="center-td">REST</th>
                </tr>
                <tr>
                    <td id="avg_cons_end"></td>
                    <td colspan="2" id="init-fuel"></td>
                    <td id="endurance-hours"></td>
                    <td id="endurance-mins"></td>
                    <td id="res-vfr"></td>
                    <td id="res-vfrn"></td>
                    <td id="qty-max"></td>
                    <td id="qty-rest"></td>
                </tr>
                <tr>
                    <td>LEG</td>
                    <td>(min)</td>
                    <td>(Kg)</td>
                    <td>(Kg)</td>
                    <td>(Kg)</td>
                    <td>(Kg)</td>
                    <td>(min)</td>
                    <td><span id="time-max" data-toggle="tooltip" title="TEMPO DI VOLO MASSIMO SENZA INTACCARE LA RISERVA DOPO IL RIFORNIMENTO CARBURANTE"></span></td>
                    <td id="time-rest"></td>
                </tr>
                <tr class="active">
                    <td>N&deg;</td>
                    <td>E.E.T.</td>
                    <td>Estimated necessary fuel</td>
                    <td>Estimated residual fuel</td>
                    <td>Real residual fuel</td>
                    <td>Real fuel consumption</td>
                    <td>E.T.E.</td>
                    <td>Start up time</td>
                    <td>Stop time</td>
                </tr>
                <script id="leg-fuel" type="x-tmpl-mustache">
                    <tr class='leg-fuel-item'>
                        <td>{{ leg }}</td>
                        <td>{{ eet }}</td>
                        <td>{{ enf }}</td>
                        <td>{{ erf }}</td>
                        <td width="14%">
                            <input type='text' class='form-control fuel-field pull-left' data-index="{{ index }}" name='rrf-{{ index }}' id='rrf-{{ index }}' value='{{ rrf }}'>
                            <button type="button" id="get_rrf_{{ index }}" class="btn btn-primary btn-loading disabled pull-left">Set</button>
                        </td>
                        <td>{{ rfc }}</td>
                        <td>{{ ete }}</td>
                        <td width="14%">
                            <div class="input-group clockpicker" id='start_{{ index }}'>
                                <input type="text" class="form-control" data-index="{{ index }}" value="{{ start }}">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-time"></span>
                                </span>
                            </div>
                        </td>
                        <td width="14%">
                            <div class="input-group clockpicker" id='stop_{{ index }}'>
                                <input type="text" class="form-control" data-index="{{ index }}" value="{{ stop }}">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-time"></span>
                                </span>
                            </div>
                        </td>
                    </tr>
                </script>
                <tfoot>
                    <tr class="warning">
                        <th>TOT</th>
                        <th id="tot-eet"></th>
                        <th id="tot-enf"></th>
                        <th id="tot-erf"></th>
                        <th id="tot-rrf"></th>
                        <th id="tot-rfc"></th>
                        <th id="tot-ete"></th>
                        <th colspan="2">TOTAL FLIGHT TIME</th>
                    </tr>
                </tfoot>
            </table>
            </div>
            <div class="panel panel-default hide" id="info-waypoints">
                <div class="panel-heading">INFO WAYPOINTS AND ENROUTE NOTES</div>
                <div class="panel-body">
                    <textarea id="info_waypoints" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <div id="cont-masses"></div>
            <script id="tbl-masses" type="x-tmpl-mustache">
                <div class="table-responsive">
                <table class="table table-bordered">
                    <tr class="info">
                        <th width="20%">MASS KG</th>
                        {{#legs}}
                        <th>{{&leg}}</th>
                        {{/legs}}
                        <td width="14%" class="warning">Warnings</td>
                    </tr>
                    <tr>
                        <th class="active">ZERO FUEL LOAD</th>
                        {{#legs}}
                        <td>{{fuel}}</td>
                        {{/legs}}
                        <td class="danger">Exceeded limits</td>
                    </tr>
                    <tr>
                        <th class="active">RESERVE+CONT. F</th>
                        {{#legs}}
                        <td>{{reserve}}</td>
                        {{/legs}}
                        <td class="success">Limits ok</td>
                    </tr>
                    <tr>
                        <th class="active" colspan="2">RE-FUEL</th>
                        {{#legs}}
                            {{#isrefuel}}
                            <td>
                                <input type='text' class='form-control fuel-field pull-left' data-index="{{ index }}" name='refuel-{{ index }}' id='refuel-{{ index }}' value='{{refuel}}'>
                                <button type="button" id="get_refuel_{{ index }}" class="btn btn-primary btn-loading disabled pull-left">Set</button>
                            </td>
                            {{/isrefuel}}
                        {{/legs}}
                        <td class="active">FUEL</td>
                    </tr>
                    <tr style="{{show_ems_patient}}">
                        <th class="active">LOAD (patient)</th>
                        {{#legs}}
                        <td>
                            <input type='text' class='form-control fuel-field pull-left' data-index="{{ index }}" name='lpatient-{{ index }}' id='lpatient-{{ index }}' value='{{lpatient}}'>
                            <button type="button" id="get_lpatient_{{ index }}" class="btn btn-primary btn-loading disabled pull-left">Charge</button>
                            {{#discharge}}
                            <button type="button" id="unload_lpatient_{{ index }}" class="btn btn-primary btn-loading pull-left {{^isdischargeable}} disabled {{/isdischargeable}}">Discharge</button>
                            {{/discharge}}
                        </td>
                        {{/legs}}
                        <td class="active">Fill in flight</td>
                    </tr>
                    <tr>
                        <th class="active">RESIDUAL PAY LOAD</th>
                        {{#legs}}
                        <td>{{residual}}</td>
                        {{/legs}}
                        <td class="active">Residual P.L. x {{masskg}} Kg</td>
                    </tr>
                    <tr>
                        <th class="active">TAKE OFF MASS</th>
                        {{#legs}}
                        <td class="{{class_takeoff}}">{{takeoffmass}}</td>
                        {{/legs}}
                        <td class="active" rowspan="2">TO/LDG Mass OK ({{masskg}} Kg) check FM for Cat. A TO/LDGS</td>
                    </tr>
                    <tr>
                        <th class="active">LANDING MASS</th>
                        {{#legs}}
                        <td class="{{class_landing}}">{{landingmass}}</td>
                        {{/legs}}
                    </tr>
                </table>
                </div>
            </script>

        </div>
    </div>
</div>
<!-- Modal Graph -->
<?php echo HTML::script('js/highcharts.js'); ?>
<?php echo HTML::script('js/exporting.js'); ?>
<div class="modal fade" id="modal-graph" tabindex="-1" role="dialog" aria-labelledby="modal-graph-title" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="modal-graph-title">C.G. Take Off - C.G. Landing</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div id="graph-long"></div>
                    </div>
                    <div class="col-md-6">
                        <div id="graph-lat"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Waypoint -->
<div class="modal fade" id="modal-wp" tabindex="-1" role="dialog" aria-labelledby="modal-wp-title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="modal-wp-title">New Waypoint</h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label for="city">Location</label>
                    <?php echo Form::text("wp_city", null, array('class'=>'form-control', 'placeholder'=>"Location", 'id'=>"wp_city")); ?>
                    <label for="lat_deg">Lat. Deg</label>
                    <?php echo Form::text("wp_lat_deg", null, array('class'=>'form-control', 'placeholder'=>"Lat. Deg", 'id'=>"wp_lat_deg")); ?>
                    <label for="lat_min">Lat. Min</label>
                    <?php echo Form::text("wp_lat_min", null, array('class'=>'form-control', 'placeholder'=>"Lat. Min", 'id'=>"wp_lat_min")); ?>
                    <label for="lat_sec">Lat. Sec</label>
                    <?php echo Form::text("wp_lat_sec", null, array('class'=>'form-control', 'placeholder'=>"Lat. Sec", 'id'=>"wp_lat_sec")); ?>
                    <label for="lon_deg">Lon. Deg</label>
                    <?php echo Form::text("wp_lon_deg", null, array('class'=>'form-control', 'placeholder'=>"Lon. Deg", 'id'=>"wp_lon_deg")); ?>
                    <label for="lon_min">Lon. Min</label>
                    <?php echo Form::text("wp_lon_min", null, array('class'=>'form-control', 'placeholder'=>"Lon. Min", 'id'=>"wp_lon_min")); ?>
                    <label for="lon_sec">Lon. Sec</label>
                    <?php echo Form::text("wp_lon_sec", null, array('class'=>'form-control', 'placeholder'=>"Lon. Sec", 'id'=>"wp_lon_sec")); ?>
                    <label for="city">Description</label>
                    <?php echo Form::textarea("wp_description", null, array('class'=>'form-control', 'placeholder'=>"Description", 'id'=>"wp_description")); ?>
                </div>
            </div>
            <div class="modal-footer">
                <button id="newWP" type="button" class="btn btn-primary" data-dismiss="modal">Confirm</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
