@extends('admin.layouts.app')

@section('title', 'SMS Outbox')

@section('content')

    @include('admin.includes.alerts')
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:500');

        /*body {*/
        /*    background-image: url(https://images.pexels.com/photos/735911/pexels-photo-735911.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);*/
        /*    font-family: 'Raleway', sans-serif;*/
        /*}*/

        .main-search-input {
            margin: 20px auto;
            border-radius: 50px;
            max-width:1000px;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 0 8px 0 rgba(0,0,0,.12);
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            padding: 9px;
            max-height: 68px;
        }

        .main-search-input-item {
            flex: 1;
            border-right: 1px solid #e9e9e9;
            margin-top: 3px;
            position: relative;
            padding-left: 30px;
            padding-right: 30px;
        }

        .main-search-input .main-search-input-item:nth-last-child(2) {
            border-right: 0;
            padding-left: 15px;
            padding-right: 15px;
        }

        .main-search-input input, .main-search-input input:focus {
            font-size: 16px;
            border: 0;
            background: #fff;
            margin: 0;
            padding: 0;
            height: 44px;
            line-height: 44px;
            box-shadow: none;
            max-width: 100%;
            width: 100%;
            font-family: 'Raleway', sans-serif;
            outline:none !important;
        }

        .main-search-input select {
            border: 0;
            padding-top: 2px;
            padding-bottom: 0;
            height: 44px;
            box-shadow: none;
            max-width: 100%;
            font-size: 16px;
            width: 100%;
            font-family: 'Raleway', sans-serif;
            outline:none !important;
        }

        .main-search-input button.button {
            font-family: 'Raleway', sans-serif;
            font-size: 16px;
            font-weight: 500;
            padding: 0 40px;
            margin-right: 1px;
            height: 50px;
            outline: 0;
            background-color: #f91942;
            color: #fff;
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 50px;
        }
    </style>
    <div class="main-card mb-3 card">
        <div class="card-body">
            <table style="width: 100%;" id="example" class="table table-responsive table-hover table-striped table-bordered">

                <thead>
                <tr>
                    <th>SN</th>
                    <th width="10%">Mobile</th>
                    <th>Network</th>
                    <th width="4%">SenderID</th>
                    <th>SMS</th>
                    <th>Description</th>
                    <th>Count</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                @foreach($outboxes as $index => $outbox)
                    <tr>
                        <td>{{$index + $outboxes->firstItem()}}</td>
                        <td width="10%">{{$outbox->msisdn}}</td>
                        <td>{{$outbox->mno}}</td>
                        <td>{{$outbox->senderID}}</td>
                        <td>{{$outbox->sms}}</td>
                        <td>{{$outbox->reason}}</td>
                        <td>{{$outbox->sms_units}}</td>
                        <td>{{$outbox->status}}</td>
                    </tr>
                @endforeach
                </tbody>

            </table>
            {{ $outboxes->links() }}
        </div>

    </div>


@endsection