@extends('Frontend.partials.layout')
@section('content')
<div class="row">
    <div class="col-md-6">
        <div class="card mb-3">
            <!-- Add `.with-elements` to the parent `.card-header` element -->
            <div class="card-header with-elements">
                <span class="card-header-title mr-2">Order list</span>
            </div>
            <div class="card-body">
                <table class="table table-bordered track_tbl">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>S No</th>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td class="track_dot">
                                <span class="track_line"></span>
                            </td>
                            <td>01</td>
                            <td>Dispatched from distibutor address</td>
                            <td>$20.00</td>
                            <td><button type="button" class="btn btn-xs btn-danger"><i class="fas fa-trash-alt"></i></button></td>
                        </tr>
                        <tr>
                            <td class="track_dot">
                                <span class="track_line"></span>
                            </td>
                            <td>01</td>
                            <td>Dispatched from distibutor address</td>
                            <td>$20.00</td>
                            <td><button type="button" class="btn btn-xs btn-danger"><i class="fas fa-trash-alt"></i></button></td>
                        </tr>
                        <tr>
                            <td class="track_dot">
                                <span class="track_line"></span>
                            </td>
                            <td>01</td>
                            <td>Dispatched from distibutor address</td>
                            <td>$20.00</td>
                            <td><button type="button" class="btn btn-xs btn-danger"><i class="fas fa-trash-alt"></i></button></td>
                        </tr>
                        <tr>
                            <td class="track_dot">
                                <span class="track_line"></span>
                            </td>
                            <td>01</td>
                            <td>Dispatched from distibutor address</td>
                            <td>$20.00</td>
                            <td><button type="button" class="btn btn-xs btn-danger"><i class="fas fa-trash-alt"></i></button></td>
                        </tr>
                        <tr>
                            <td class="track_dot">
                                <span class="track_line"></span>
                            </td>
                            <td>01</td>
                            <td>Dispatched from distibutor address</td>
                            <td>$20.00</td>
                            <td><button type="button" class="btn btn-xs btn-danger"><i class="fas fa-trash-alt"></i></button></td>
                        </tr>
                        <tr>
                            <td class="track_dot">
                                <span class="track_line"></span>
                            </td>
                            <td>01</td>
                            <td>Dispatched from distibutor address</td>
                            <td>$20.00</td>
                            <td><button type="button" class="btn btn-xs btn-danger"><i class="fas fa-trash-alt"></i></button></td>
                        </tr>
                        <tr>
                            <td class="track_dot">
                                <span class="track_line"></span>
                            </td>
                            <td>01</td>
                            <td>Dispatched from distibutor address</td>
                            <td>$20.00</td>
                            <td><button type="button" class="btn btn-xs btn-danger"><i class="fas fa-trash-alt"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-3">
            <!-- Add `.with-elements` to the parent `.card-header` element -->
            <div class="card-header with-elements">
                <span class="card-header-title mr-2">Payment Method</span>
            </div>
            <div class="card-body">
                <div class="paymentWrap">
                    <div class="btn-group paymentBtnGroup btn-group-justified" data-toggle="buttons">
                        <label class="btn paymentMethod active">
                            <div class="method visa"></div>
                            <input type="radio" name="options" checked> 
                        </label>
                        <label class="btn paymentMethod">
                            <div class="method master-card"></div>
                            <input type="radio" name="options"> 
                        </label>
                        <label class="btn paymentMethod">
                            <div class="method amex"></div>
                            <input type="radio" name="options">
                        </label>
                            <label class="btn paymentMethod">
                            <div class="method vishwa"></div>
                            <input type="radio" name="options"> 
                        </label>
                    </div>   
                    <div class="paymentInfo mt-4">
                        <div class="form-group">
                            <label class="form-label">Name On Card</label>
                            <input type="text" class="form-control" placeholder="Card Holder Name">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Card Number</label>
                            <input type="text" class="form-control" placeholder="0000 0000 0000 0000">
                        </div>
                        <div class="form-group">
                            <label class="form-label">CVC</label>
                            <input type="text" class="form-control" placeholder="Ex: 331">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Expiration Month</label>
                            <input type="text" class="form-control" placeholder="MM">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Expiration Year</label>
                            <input type="text" class="form-control" placeholder="YYYY">
                        </div>
                        <div class="form-group pull-right">
                            <button type="submit" class="btn btn-success" id="fromSubmit">Payment</button>
                        </div>
                    </div>     
                </div>
            </div>
        </div>
    </div>
</div>
@endsection