@extends('admin.layout')
@section('custom-style')
<link rel="stylesheet"
    href="{{url('admin-assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<style>
    .alert {
        padding: 2px 10px;
    }

    .add-new {
        float: right;
    }

    .thumbnail-image {
        height: 30px;
        float: left;
        width: 40%;
        margin-right: 2%;
    }

    .dataTables_length {
        margin-right: 10px;
        /* Adjust the right margin/padding */
    }

    /* Adjust the padding between the "Show" text and the select box */
    .dataTables_length label {
        padding-right: 10px;
        /* Adjust the right padding */
    }

    div.dataTables_length {
        margin-right: 1em;
    }

    /* responsive table wrapper for smaller screens*/
    .details-column {
        width: 100%;
        position: absolute;
        top: 7vh;
        right: 0;
    }

    @media(max-width:575px) {
        .custom_display_dp_link {
            display: none !important;
        }
    }

    @media(min-width:576px) {
        .custom_display_mb_link {
            display: none !important;
        }
    }

    .custom-bg {
        background-color: rgb(60, 141, 188);
    }

    .text-white {
        color: #fff;
    }

    .text-white-heavy {
        color: #fff;
        font-weight: 500;
    }

    .text-white-heavier {
        font-size:1em;
        color: #fff;
        font-weight: 700;
    }

    .lf-rev-row {
        color: #fff;
        font-weight: 700;
        font-size: 4em;
    }

    .lf-rev-row-two {
        color: #fff;
        font-weight: 500;
        font-size: 3em;
    }

    .text-grey-heavy {
        color: whitesmoke;
        font-weight: 400;
        font-size: 1em;
    }

    .text-grey-heavier {
        color: floralwhite;
        font-weight: 700;
        font-size: 1em;
    }
</style>
@endsection
@section('content')
<section class="content-header">
    <h1>
        Platform Exchange Rate
    </h1>
    <ol class="breadcrumb">
        <li><a><i class="fa fa-money"></i>Platform Exchange Rate
            </a></li>
    </ol>
</section>

<!-- Main content -->
<section class="content">

    <!-- Info boxes -->
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-9" style="margin-bottom:10px;">
            <div class="revenue-div mx-auto custom-bg p-3" style="border-radius:5px;padding:10px;">
                <h4 class="h4 text-white-heavy my-0" style="padding-bottom:5px;border-bottom:1px solid #ccc;">Platform Exchange Rate (USD - KSHS) is set at <span style="color:#DFA326;font-weight:700;">Kshs</span></h4>
                <div class="row" style="margin-left:0px !important;margin-right:0px !important;">
                    <div class="col-sm-3 lf-rev-row">
                        <h1 class="h1 text-white-heavier" style="margin-bottom: 0px !important;display:flex;">
                        {{get_setting('Currency_exchange_rate')->value ?? 0}}
                            <a href="{{ Route('admin.update-exchange-rate')}}" data-toggle="tooltip" title="Edit" style="margin-left: 10px !important;">
                                            <button class="btn btn-xs btn-info"><i class="fa fa-pencil"></i></button>
                                        </a>
                        </h1>
                    </div>

                </div>
            </div>
        </div>
    </div>


</section>
<!-- /.content -->
@endsection

@section('custom-scripts')
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
@endsection