@extends('frontend.layouts.master')

<link href="{{ asset('/assets/plugins/plugin.css') }}" rel="stylesheet">
<style>
    th {
        background-color: #148AFB;
        color: white;
    } 
    .bg-blue { background: blue;color:white; }
    .bg-red { background: red; color:white; }
    .bg-yellow { background: yellow;color:black; }
    .bg-green { background: green; color:white; }
</style>
<link href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

{{-- sweet alert --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@section('content')
<div class="container">
    <center>
        <h4>ORDER LIST</h4>
    </center>

    {{-- notifikasi form validasi --}}
    @if ($errors->has('file'))
    <span class="invalid-feedback" role="alert">
        <strong>{{ $errors->first('file') }}</strong>
    </span>
    @endif

    {{-- notifikasi sukses --}}
    @if ($sukses = Session::get('sukses'))
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button> 
        <strong>{{ $sukses }}</strong>
    </div>
    @endif

    <div class="card" style="padding: 10px">
        <div class="row" style="paddingLeft:15px">
            <label for="filterMonth" style="paddingRight:10px">Filter by Month:</label>
            <input type="month" id="filterMonth">
        </div>
        
        <table class='table table-bordered table-responsive' id="myTable">
            <thead>
                <tr>
                    <th>Accountnum</th>
                    <th>No.Order</th>
                    <th>Status</th>
                    <th>Post</th>
                    <th>Toko</th>
                    <th>Approval</th>
                    <th style="text-align: center">Act</th>
                </tr>
            </thead>
            <tbody>
                @php $i=1 @endphp
                @foreach($data as $s)
                <tr>
                    <td>{{ $s->accountnum }}</td>
                    <td>{{ $s->no_order }}</td>
                    <td>
                        <h5>
                            <span style="font-size:10px;padding:5px;border-radius:5px;color:white;background-color: {{ ($s->status == 0) ? 'red' : 'green' }}">
                                {{ ($s->status == 0) ? 'Undownloaded' : '' }}
                                {{ ($s->status == 1) ? 'Downloaded' : '' }}
                            </span>
                        </h5>
                    </td>
                    <td>{{ $s->created_at }}</td>
                    <td>{{ $s->toko }}</td>
                    <td>
                        <h5>
                            <span class="{{($s->approval == '') ? 'bg-yellow' : ''}} {{($s->approval == '0') ? 'bg-green' : ''}} {{($s->approval == '1') ? 'bg-red' : ''}}" style="font-size:10px;padding:5px;border-radius:5px;">
                                @if($s->approval != '')
                                    {{ ($s->approval == 0) ? 'Approved' : 'Reject' }}
                                @elseif($s->approval == '')
                                    Waiting Action
                                @endif
                            </span>
                        </h5>
                    </td>
                    <td style="text-align: center;">
                        <a class="btn btn-dark btn-sm" href="{{ url('order_detail/'.$s->no_order) }}">Detail</a>
                        @if($s->approval == '0')
                            <a class="btn btn-primary btn-sm" onclick="doExport('{{ url('excel_app/'.$s->no_order) }}')" href="#!">Export</a>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@endsection

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function () {
        var table = $('#myTable').DataTable({
            "responsive": true,
            "width": 15,
            paging: true,
            lengthChange: false,
            pageLength: 10,
            searching: true,
            order: [[3, 'desc']],
        });

        $('#filterMonth').on('change', function () {
            var selectedMonth = this.value;
            table.column(3).search(selectedMonth).draw();
        });
    });
</script>

<script>
    async function doExport(url) {
        await window.open(`${url}`, '_blank');
        location.reload();
    }
</script>
</body>
</html>