@extends('backend.layouts.app')
@section('content')

<div class="row justify-content-center">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="b-contentTitle">
                    RLS Search
                </div>
                <div class="b-backLink -button-styles">
                    <a href="#"><span class="b-backLink__img"></span>Revise Search</a>
                </div>
            </div>
            
            <div class="card-body -rls">
            
                <div class="row flex-column-reverse flex-md-row">
                    <div class="col-md-9">
    
                        <div class="b-radioTable -pl-25 table-responsive">
                            <table class="table">
                                <thead class="">
                                <tr>
                                    <th scope="col" class="">Operator</th>
                                    <th scope="col">Route Type</th>
                                    <th scope="col"># of Legs</th>
                                    <th scope="col">Duration</th>
                                    <th scope="col">
                                        One Way
                                        <span class="b-radioTable__subHead">Cost Est.</span>
                                    </th>
                                    <th scope="col">
                                        Round Trip
                                        <span class="b-radioTable__subHead">Cost Est.</span>
                                    </th>
                                    <th scope="col">Select Route</th>
                                </tr>
                                </thead>
        
                                <tbody>
                                <tr>
                                    <td scope="row">Eurail</td>
                                    <td>Through</td>
                                    <td>1</td>
                                    <td>13:30 </td>
                                    <td>380 EUR</td>
                                    <td>480 EUR</td>
                                    <td>
                                        <label class="b-radio">
                                            <input type="radio" class="js-radio" name="route-1"/>
                                            <span class="b-radio__text"></span>
                                        </label>
                                    </td>
                                </tr>
        
                                <tr>
                                    <td scope="row">Eurostar</td>
                                    <td>Direct</td>
                                    <td>0</td>
                                    <td>19:00</td>
                                    <td>680 EUR</td>
                                    <td>780 EUR</td>
                                    <td>
                                        <label class="b-radio">
                                            <input type="radio" class="js-radio" name="route-1"/>
                                            <span class="b-radio__text"></span>
                                        </label>
                                    </td>
                                </tr>
        
                                <tr>
                                    <td scope="row">Russian Rail</td>
                                    <td>Direct</td>
                                    <td>0</td>
                                    <td>10:45</td>
                                    <td>380 EUR</td>
                                    <td>480 EUR</td>
                                    <td>
                                        <label class="b-radio">
                                            <input type="radio" class="js-radio" name="route-1"/>
                                            <span class="b-radio__text"></span>
                                        </label>
                                    </td>
                                </tr>
        
                                <tr>
                                    <td scope="row"><span class="b-radioTable__iconRow">Eurostar, Eurail, Russian Rail</span></td>
                                    <td>Through</td>
                                    <td>4</td>
                                    <td>25:30</td>
                                    <td>340 EUR</td>
                                    <td>440 EUR</td>
                                    <td>
                                        <label class="b-radio">
                                            <input type="radio" class="js-radio" name="route-1"/>
                                            <span class="b-radio__text"></span>
                                        </label>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="b-tableSelect js-table-select-first in-active -pl-25 table-responsive">
                            
                            <div class="b-ticketRadio">
                                <h2 class="b-ticketRadio__title">Ticket Fares</h2>
                                
                                <div class="b-ticketRadio__wrapper">
                                    <label class="b-radio">
                                        <input type="radio" name="ticket-1"/>
                                        <span class="b-radio__text">One Way</span>
                                    </label>
                                    <label class="b-radio">
                                        <input type="radio" name="ticket-1"/>
                                        <span class="b-radio__text">Round Trip</span>
                                    </label>
                                </div>
                            </div>
                            
                            <table class="table">
                                <thead class="">
                                <tr>
                                    <th></th>
                                    <th>
                                        <div class="b-tableSelect__balloonWrapper">
                                            Adult <span class="b-balloon"
                                                        data-balloon-length="medium"
                                                        aria-label="An adult is described as anyone who is 15 years of age or older."
                                                        data-balloon-pos="up-right"></span>
                                        </div>
                                    </th>
                                    <th>Child</th>
                                    <th>
                                        <div class="b-tableSelect__balloonWrapper">
                                            Business <span class="b-balloon"
                                                           data-balloon-length="medium"
                                                           aria-label="Business to business travel."
                                                           data-balloon-pos="up-right"></span>
                                        </div>
                                    </th>
                                    <th>Senior</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>Standard</td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">280 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">150 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">150 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">150 EUR</span>
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Standard Premier</td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">540 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">240 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">240 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">500 EUR</span>
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Business Premier</td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">625 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">350 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">350 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">600 EUR</span>
                                        </label>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="b-newSearch -pl-25 in-active js-new-search-block">
                            
                            <h2 class="b-newSearch__title">New Search</h2>
    
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group b-field -content">
                                        <label>Origin*</label>
                                        <select name="filter_role" class="b-field__select js-select form-control">
                                            <option value="Rome, IT">Rome, IT</option>
                                            <option value="Paris, FR test">Paris, FR test</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-md-3">
                                    <div class="form-group b-field -content">
                                        <label>Destination*</label>
                                        <select name="filter_role" class="b-field__select js-select form-control">
                                            <option value="Paris, FR test">Paris, FR test</option>
                                            <option value="Rome, IT">Rome, IT</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-md-3">
                                    <div class="form-group b-field -content">
                                        <label>Month*</label>
                                        <select name="filter_role" class="b-field__select js-select form-control">
                                            <option value="January">January</option>
                                            <option value="February">February</option>
                                            <option value="March">March</option>
                                            <option value="April">April</option>
                                            <option value="May">May</option>
                                            <option value="June">June</option>
                                            <option value="July">July</option>
                                            <option value="August">August</option>
                                            <option value="September">September</option>
                                            <option value="October">October</option>
                                            <option value="November">November</option>
                                            <option value="December">December</option>
                                        </select>
                                    </div>
                                </div>
    
                                <div class="col-md-3">
                                    <div class="form-group b-field -content">
                                        <label>Year*</label>
                                        <select name="filter_role" class="b-field__select js-select form-control">
                                            <option value="2019">2019</option>
                                            <option value="2020">2020</option>
                                            <option value="2021">2021</option>
                                            <option value="2022">2022</option>
                                            <option value="2023">2023</option>
                                            <option value="2024">2024</option>
                                            <option value="2025">2025</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
    
                            <div class="row">
                                <div class="col-12 d-flex align-items-center flex-wrap">
                                    <button class="btn btn-primary -main-color -fsz12 -min-w-170 mt-4 mr-3 js-second-search">Search Routes</button>
                                    <div class="b-iconTrain mt-4"></div>
                                </div>
                            </div>
                            
                        </div>
    
                        <div class="b-radioTable in-active js-radio-table -pl-25 table-responsive">
                            <table class="table">
                                <thead class="">
                                <tr>
                                    <th scope="col" class="">Operator</th>
                                    <th scope="col">Route Type</th>
                                    <th scope="col"># of Legs</th>
                                    <th scope="col">Duration</th>
                                    <th scope="col">
                                        One Way
                                        <span class="b-radioTable__subHead">Cost Est.</span>
                                    </th>
                                    <th scope="col">
                                        Round Trip
                                        <span class="b-radioTable__subHead">Cost Est.</span>
                                    </th>
                                    <th scope="col">Select Route</th>
                                </tr>
                                </thead>
            
                                <tbody>
                                <tr>
                                    <td scope="row">Eurail</td>
                                    <td>Through</td>
                                    <td>0</td>
                                    <td>19:00</td>
                                    <td>150 EUR</td>
                                    <td>250 EUR</td>
                                    <td>
                                        <label class="b-radio">
                                            <input type="radio" name="route-2"/>
                                            <span class="b-radio__text"></span>
                                        </label>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="b-legDetails in-active js-leg-details -pl-25">
                            <h2 class="b-legDetails__title">
                                Leg Details
                            </h2>
                            
                            <div class="b-legDetails__wrapper">
                                Leg 1 Barcelona
                            </div>
                        </div>
    
                        <div class="b-tableSelect in-active js-table-select -pl-25 table-responsive">
        
                            <div class="b-ticketRadio">
                                <h2 class="b-ticketRadio__title">Ticket Fares</h2>
            
                                <div class="b-ticketRadio__wrapper">
                                    <label class="b-radio">
                                        <input type="radio" name="ticket-2"/>
                                        <span class="b-radio__text">One Way</span>
                                    </label>
                                    <label class="b-radio">
                                        <input type="radio" name="ticket-2"/>
                                        <span class="b-radio__text">Round Trip</span>
                                    </label>
                                </div>
                            </div>
        
                            <table class="table">
                                <thead class="">
                                <tr>
                                    <th></th>
                                    <th>
                                        <div class="b-tableSelect__balloonWrapper">
                                            Adult
                                        </div>
                                    </th>
                                    <th>
                                        Child <span class="b-balloon"
                                                    data-balloon-length="medium"
                                                    aria-label="Child is described as anyone who is 15 years old and younger."
                                                    data-balloon-pos="up-right"></span>
                                    </th>
                                    <th>
                                        <div class="b-tableSelect__balloonWrapper">
                                            Business
                                        </div>
                                    </th>
                                    <th>
                                        Senior <span class="b-balloon"
                                                     data-balloon-length="medium"
                                                     aria-label="An elder is described as anyone who is 65 years of age or older."
                                                     data-balloon-pos="up-right"></span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>Standard</td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">150 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">40 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">500 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">200 EUR</span>
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Standard Premier</td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">540 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">240 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">850 EUR</span>
                                        </label>
                                    </td>
                                    <td>
                                        <label class="b-tableSelect__checkbox">
                                            <input type="checkbox" />
                                            <span class="b-tableSelect__checkboxText">500 EUR</span>
                                        </label>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
    
                        <div class="pl-25 js-btn-bottom in-active">
                            <div class="row">
                                <div class="col-12 d-flex align-items-center flex-wrap">
                                    <button class="btn btn-primary -main-color -fsz12 -border -min-w-170 mr-3 mt-4 js-new-search">+ Add Another Route</button>
                                    <button class="btn btn-primary -main-color -fsz12 -min-w-170 mt-4 mr-3">All Done – Produce XML</button>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                    <div class="col-md-3">
                        
                        <div class="b-triggerTrip">
                            <a href="#" class="b-triggerTrip__button js-trip-accordion">
                                <span class="b-triggerTrip__close"></span>
                                <span class="b-triggerTrip__open">
                                    <span class="b-triggerTrip__openIcon"></span>
                                    Trip Details
                                </span>
                            </a>
                        </div>
    
                        <div class="js-tableTrip-wrapper">
                            <div class="b-tableTrip table-responsive">
                                <table class="table">
                                    <thead class="">
                                    <tr>
                                        <th scope="col" colspan="3">Leg #1</th>
                                    </tr>
                                    </thead>
            
                                    <tbody>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row">Month</td>
                                        <td colspan="2">Year</td>
                                    </tr>
                                    <tr>
                                        <td scope="row">October</td>
                                        <td colspan="2">2019</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="3">Origin</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="3">Paris, FR</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="3">Destination</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="3">Rome, IT</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="3">Fares</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="3">One Way</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="2">Fares</td>
                                        <td>Per. Ticket</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="2">Adult, Standard Premier</td>
                                        <td>540 EUR</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="2">Child, Standard Premier</td>
                                        <td>240 EUR</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="2">Business, Business Premier</td>
                                        <td>1.000 EUR</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="2">Senior, Standard</td>
                                        <td>$150 EUR</td>
                                    </tr>
                                    <tr class="b-tableTrip__total">
                                        <td scope="row" colspan="2">Total</td>
                                        <td>1.930 EUR</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="b-tableTrip table-responsive">
                                <table class="table">
                                    <thead class="">
                                    <tr>
                                        <th scope="col" colspan="3">Leg #2</th>
                                    </tr>
                                    </thead>
            
                                    <tbody>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row">Month</td>
                                        <td colspan="2">Year</td>
                                    </tr>
                                    <tr>
                                        <td scope="row">October</td>
                                        <td colspan="2">2019</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="3">Origin</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="3">Paris, FR</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="3">Destination</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="3">Rome, IT</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="3">Fares</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="3">One Way</td>
                                    </tr>
                                    <tr class="b-tableTrip__bold">
                                        <td scope="row" colspan="2">Fares</td>
                                        <td>Per. Ticket</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="2">Adult, Standard</td>
                                        <td>150 EUR</td>
                                    </tr>
                                    <tr>
                                        <td scope="row" colspan="2">Child, Standard</td>
                                        <td>40 EUR</td>
                                    </tr>
                                    <tr class="b-tableTrip__total">
                                        <td scope="row" colspan="2">Grand Total</td>
                                        <td>2.120 EUR</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                    </div>
                </div>
            
            </div>
        </div>
    </div>
</div>

@endsection