<div>
    <h3 class="rs alternate-tab accordion-label">Jets <i class="fa fa-caret-down" style="float:right; margin:3px 5px 0 5px;"></i></h3>
    <div class="tab-pane accordion-content<?= $active_jets ?>">
        <div class="form form-profile aif jet" style='width:auto; min-height:350px'>
                <ul class="subtabs-list" style="border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;">
                    <li class="active"><a href="#trips-tab">Trips</a></li>
                    <li><a href="#seats-tab">Seats</a></li>
                    <li><a href="#planes-tab">Planes</a></li>
                    <li><a href="#carriers-tab">Carriers</a></li>
                    <li><a href="#import-tab">Import</a></li>
                    <div class="clear"></div>
                </ul>
                <div class="clear"></div>    
                
                <div id="planes-tab" class="subtab">
                    <h2>Planes</h2>
                    <table>
                        <tr>
                            <th>Make</th><th>Model</th><th>Seats</th><th>Carrier</th><th>Actions</th>
                        </tr>
                        <?php
                          
                        foreach ($jet_planes as $row) {
                            echo "<tr><td>{$row['make']}</td><td>{$row['model']}</td><td>{$row['seats']}</td><td></td>
                                <td>
                                    <a href='?jet&deletePlane={$row['id']}'>Delete</a>
                                </td>
                            </tr>";
                        }
                        
                        ?>
                    </table>
                    
                    <div id="add_plane" style="display:none">
                        <!-- Add Plane Form -->
                        <form method="post" class="form form-profile">
                            <input type="hidden" name="jet" value="add_plane" />
                			<div class="row-item">
                				<label class="lbl">Make:</label>
                                <div class="val"><input class="txt" type="text" name="make"></div>			
                			</div>
                			<div class="row-item">                
                                <label class="lbl">Model:</label>
                                <div class="val"><input class="txt" type="text" name="model"></div>			
                            </div>
                			<div class="row-item">                
                                <label class="lbl">Seats:</label>
                                <div class="val"><input class="txt" type="text" name="seats"></div>			
                            </div>
                			<div class="row-item">                
                                <label class="lbl">Tail Number:</label>
                                <div class="val"><input class="txt" type="text" name="tailno"></div>			
                            </div>
                			<div class="row-item">                
                                <label class="lbl">Carrier:</label>
                                <div class="val">
                                    <select name="carrier_id" class="txt">
                                        <option value=""> - Please Select - </option>
                                        <?php
                                        foreach ($jet_carriers as $carrier) {
                                            echo "<option value='{$carrier['id']}'>{$carrier['name']}</option>";
                                        }
                                        ?>
                                    </select>
                                </div>			
                            </div>
                            <br>
                            <input type="submit" style="font-weight:300" class="btn btn-blue"> 
<!--                 			<input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'"> -->
                		</form>
                    </div>
                    
                    <a href="#add_plane" class="show">Add</a>
                </div>
                <!-- END OF PLANES TAB -->
                <div id="trips-tab" class="subtab active">
                    <h2>Trips</h2>
                    <table>
                        <tr>
                            <th>Event</th><th>Location</th><th>Date</th><th>Actions</th>
                        </tr>
                        <?php
                          
                        foreach ($jet_trips as $row) {
                            echo "<tr><td>{$row['event_name']}</td><td>{$row['event_location']}</td><td>{$row['event_date']}</td>
                                <td>
                                    <a class='viewJetTrip iframe' href='#viewTrip' ajaxURL='?jet&viewTrip={$row['id']}'>View</a> | 
                                    <a href='?jet&deleteTrip={$row['id']}'>Delete</a>
                                </td>
                            </tr>";
                        }
                        
                        ?>
                    </table>
                    
                    <!-- Add Trip Form -->
                    <form method="post" class="form form-profile" id="add_trip" style="display:none">
                        <input type="hidden" name="jet" value="add_trip" />
            			<div class="row-item">
            				<label class="lbl">Event Name:</label>
                            <div class="val"><input class="txt" type="text" name="event_name"></div>			
            			</div>
            			<div class="row-item">                
                            <label class="lbl">Location:</label>
                            <div class="val"><input class="txt" type="text" name="event_location"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Date:</label>
                            <div class="val"><input class="datepicker txt" type="text" name="event_date"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Plane:</label>
                            <div class="val">
                                <select name="plane_id" class="txt">
                                    <option value=""> - Please Select - </option>
                                    <?php
                                    foreach ($jet_planes as $i) {
                                        echo "<option value='{$i['id']}'>ID {$i['id']} ({$i['make']} {$i['model']})</option>";
                                    }
                                    ?>
                                </select>
                            </div>			
                        </div>
                        <br>
                        <input type="submit" style="font-weight:300" class="btn btn-blue"> 
<!--                 			<input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'"> -->
            		</form>
            		
            		<a href="#add_trip" class="show">Add</a>
                </div>
                <!-- END OF TRIPS TAB -->
                
                <div id="seats-tab" class="subtab">
                    <h2>Seats</h2>
                    
                    <table>
                        <tr>
                            <th>Seat Name</th><th>Price</th><th>Trip</th><th>Trip Date</th><th>Trip Location</th><th>Actions</th>
                        </tr>
                        <?php
                          
                        foreach ($jet_seats as $row) {
                            $trip = $jet_trips[$row['trip_id']];
                            echo "<tr>
                                <td>{$row['seat_name']}</td>
                                <td>{$row['cost']}</td>
                                <td>{$trip['event_name']}</td>
                                <td>{$trip['event_date']}</td>
                                <td>{$trip['event_location']}</td>
                                <td>
                                    <a href='?jet&deleteSeat={$row['id']}'>Delete</a>
                                </td>
                            </tr>";
                        }
                        
                        ?>
                    </table>
                    
                    <!-- Add Seat Form -->
                    <form method="post" class="form form-profile" id="add_seat" style="display:none">
                        <input type="hidden" name="jet" value="add_seat" />
            			<div class="row-item">
            				<label class="lbl">Seat Name:</label>
                            <div class="val"><input class="txt" type="text" name="seat_name"></div>			
            			</div>
            			<div class="row-item">                
                            <label class="lbl">Price:</label>
                            <div class="val"><input class="txt" type="text" name="cost"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Trip:</label>
                            <div class="val">
                                <select name="trip_id" class="txt">
                                    <option value=""> - Please Select - </option>
                                    <?php
                                    foreach ($jet_trips as $i) {
                                        echo "<option value='{$i['id']}'>{$i['event_name']}</option>";
                                    }
                                    ?>
                                </select>
                            </div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Plane:</label>
                            <div class="val">
                                <select name="plane_id" class="txt">
                                    <option value=""> - Please Select - </option>
                                    <?php
                                    foreach ($jet_planes as $i) {
                                        echo "<option value='{$i['id']}'>ID {$i['id']} ({$i['make']} {$i['model']})</option>";
                                    }
                                    ?>
                                </select>
                            </div>			
                        </div>
                        <br>
                        <input type="submit" style="font-weight:300" class="btn btn-blue"> 
<!--                 			<input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'"> -->
            		</form>
            		
            		<a href="#add_seat" class="show">Add</a>
                </div>
                <!-- END OF SEATS TAB -->                                
                
                <div id="carriers-tab" class="subtab">
                    <h2>Carriers</h2>
                    <table>
                        <tr>
                            <th>Name</th><th>City</th><th>State</th><th>ZIP Code</th><th>Phone</th><th>Primary Contact</th><th>Actions</th>
                        </tr>
                        <?php
                          
                        foreach ($jet_carriers as $row) {
                            echo "<tr>
                                <td>{$row['name']}</td>
                                <td>{$row['city']}</td>
                                <td>{$row['state']}</td>
                                <td>{$row['zip']}</td>
                                <td>{$row['phone']}</td>
                                <td>{$row['primary_contact']}</td>
                                <td>
                                    <a href='?jet&deleteCarrier={$row['id']}'>Delete</a>
                                </td>
                            </tr>";                    
                        }
                        ?>
                    </table>
                    
                    <!-- Add Carrier Form -->
                    <form method="post" class="form form-profile" id="add_carrier" style="display:none">
                        <input type="hidden" name="jet" value="add_carrier" />
            			<div class="row-item">
            				<label class="lbl">Name:</label>
                            <div class="val"><input class="txt" type="text" name="name"></div>			
            			</div>
            			<div class="row-item">                
                            <label class="lbl">Address:</label>
                            <div class="val"><input class="txt" type="text" name="address"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">City:</label>
                            <div class="val"><input class="txt" type="text" name="city"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">State:</label>
                            <div class="val"><input class="txt" type="text" name="state"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Zip:</label>
                            <div class="val"><input class="txt" type="text" name="zip"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Phone:</label>
                            <div class="val"><input class="txt" type="text" name="phone"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Email:</label>
                            <div class="val"><input class="txt" type="text" name="email"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Primary Contact:</label>
                            <div class="val"><input class="txt" type="text" name="primary_contact"></div>			
                        </div>
            			<div class="row-item">                
                            <label class="lbl">Primary Contact Phone:</label>
                            <div class="val"><input class="txt" type="text" name="primary_contact_phone"></div>			
                        </div>
            			<div class="row-item clearfix">                
                            <label class="lbl">Primary Contact Email:</label>
                            <div class="val"><input class="txt" type="text" name="primary_contact_email"></div>			
                        </div>
                        <br>
                        <input type="submit" style="font-weight:300" class="btn btn-blue"> 
<!--                 			<input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'"> -->
            		</form>
            		
            		<a href="#add_carrier" class="show">Add</a>
                </div>
                
                <div id="import-tab" class="subtab">
                    <h2>Import CSV</h2>
                    
                    <form enctype="multipart/form-data" method="post">
                        <input type="hidden" name="jet" value="import" />
                        <input type="file" name="import" />
                        <input type="submit" />
                    </form>
                </div>
                
            <div id="viewTrip" style="display:none">
                <div class="ajaxContent jet" style="background-color:white; padding:20px 30px; font-size:16px;">
                
                </div>
            </div>
        </div>
    </div><!--end: .tab-pane -->
</div>

<script>
$('.viewJetTrip').fancybox();

$('.viewJetTrip').click(function () {
   $.ajax({
       url: $(this).attr('ajaxURL'),
       success: function (data) {
           $('#viewTrip .ajaxContent').html(data);
           $.fancybox.update()
       }
   }) 
});

$('.show').click(function (e) {
   e.preventDefault();
   var sel = $(this).attr('href');
   $(sel).show();
   $(this).hide();
});

$( ".datepicker" ).datepicker();
</script>

<style>
.jet .row-item {
    padding-bottom: 8px;
}
.jet td, .jet th {
    padding: 5px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">