@extends('layouts.backend')
<style media="screen">
    body {
        font-family: sans-serif !important;
    }

    .fundContainer {
        height: 250px;
        width: 600px;
        margin: 0 auto;
    }

    .titleBalance {
        text-align: center;
    }

    .fundContainer h3 {
        margin: 0;
    }

    #unconfirmed {
        float: left;
        width: 50%;
        text-align: center;
    }

    #confirmed {
        float: left;
        width: 50%;
        text-align: center;
    }

    #table_deposit {
        width: 90%;
        margin: 0 auto;
    }

    #table_deposit th {
        text-align: center;
    }

    .pagination {
        margin: 0 !important;
        cursor: pointer;
    }

    #deposit_page {
        text-align: left !important;
    }

    #table_deposit_pagination {
        text-align: right !important;
    }

    #table_withdraw {
        width: 90%;
        margin: 0 auto;
    }

    #table_withdraw th {
        text-align: center;
    }

    #withdraw_page {
        text-align: left !important;
    }

    #table_withdraw_pagination {
        text-align: right !important;
    }

    #addcount {
        float: right;
        position: relative;
        top: -30px;
    }

    #account {
        width: 90%;
    }

    .pages {
        margin: 0 2px;
    }

    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    .modalContent {
        background-color: #fefefe;
        margin: 0;
        position: fixed;
        left: 33%;
        top: 30%;
        padding: 20px;
        border: 1px solid #888;
        width: 700px;
        box-shadow: 0px 0px 14px 1px black;
        border-radius: 10px;
    }

    .fundAction {
        height: 50px;
        float: left;
        text-align: center;
        width: 100%;
    }

    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .orderBox {
        width: 350px;
        float: left;
        margin: 50px;
        margin-top: 0px;
    }

    .orders {
        width: fit-content;
        margin: 0 auto;
        height: 300px;
    }

    .makeOrder {
        width: 902px;
        height: 350px;
        margin: 0 auto;
        margin-bottom: 50px;
        border: 1px solid black;
    }

    .selectMakeOrder {
        width: fit-content;
        float: right;
        position: absolute;
        border: 1px solid black;
        margin-top: 49px;
        border-top: 0px;
    }

    .makeOrderbtn {
        border: none;
        background-color: white;
        float: left;
    }

    .selectbtn {
        background-color: #bfbfbf;
        color: white;
    }
</style>
@section('content')
<div class="orderscontent">
    <div class="panel panel-alternative">
        <div class="panel-heading">
            <div class="row">
                <div class="col-sm-7 text-center">
                    <h4>{{__('messages.orders')}}</h4>
                </div>
                <div class="col-sm-5">
                    <form id="form_order_search" class="form_search">
                        <div class="input-group">
                            <input id="search_order_value" type="text" class="small form-control"
                                placeholder="Search Order">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-alternative" value="Go!"><span
                                        class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div>
                        <!--/input-group-->
                    </form>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table id="table_order" class="table table-hover">
                    <thead class="thead-default">
                        <tr>
                            <th id="table_order_header_in_amount" style="cursor: pointer;">{{__('messages.out_amount')}}
                            </th>
                            <th id="table_order_header_pair" style="cursor: pointer;">{{__('messages.pair')}}</th>
                            <th id="table_order_header_out_amount" style="cursor: pointer;">{{__('messages.in_amount')}}
                            </th>
                            <th id="table_order_header_trade_type" style="cursor: pointer;">{{__('messages.type')}}</th>
                            <th id="table_order_header_rate" style="cursor: pointer;">{{__('messages.rate')}}</th>
                            <th id="table_order_header_fee" style="cursor: pointer;">{{__('messages.fee')}}</th>
                            <th id="table_order_header_reference" style="cursor: pointer;">{{__('messages.reference')}}
                            </th>
                            <th id="table_order_header_date" style="cursor: pointer;">{{__('messages.date')}}</th>
                            <th id="table_order_header_ip" style="cursor: pointer;">{{__('messages.ip')}}</th>
                            <th id="table_order_header_ubication" style="cursor: pointer;">{{__('messages.ubication')}}
                            </th>
                            <th id="table_order_header_ubication" style="cursor: pointer;">{{__('messages.txid')}}
                            </th>
                            <th id="table_order_header_status" style="cursor: pointer;">{{__('messages.status')}}</th>
                            <th>{{__('messages.options')}}</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th colspan="4" id="deposit_page">
                                <div class="form-group" style="width:70px;">
                                    <select id="result_order_page" class="form-control">
                                        <option value="5">5</option>
                                        <option value="10" selected="selected">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                </div>
                            </th>

                            <th id="table_order_pagination" class="text-right" colspan="8"></th>
                        </tr>
                    </tfoot>
                    <tbody id="table_order_content">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ordersMod" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content modal-alternative">
            <div class="modal-body">


            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="orAlertMod" role="dialog">
    <div class="modal-dialog modal-sm">
        <!-- Modal content-->
        <div class="modal-content modal-alternative content-alert">
            <div class="alert" style="margin: 0px;">
                <p class="text-alert"></p>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
        </div>
    </div>
</div>
@endsection