@extends('layouts.app')

@section("scripts")
    <script type="text/javascript" src="{{ asset('js/pc_payments.js') }}"></script>
@endsection

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header h2">Płatności</div>
                <div class="card-body">
                    <div class="ne text-left form-group">
                        <label class="ml-3 mr-1">
                            Pokaż płatności za:
                            <select class="form-control" id="scenarioList">
                                <option value="" selected>Wybierz scenariusz</option>
                            </select>
                        </label>
                        <label class="mx-1">
                            Status płatności
                            <select class="form-control" id="finishPayment">
                                <option value="" selected>Wszystkie</option>
                                <option value="Rozpoczęto">Rozpoczęte</option>
                                <option value="TRUE">Zakończone</option>
                            </select>
                        </label>
                        <label class="mx-1">
                            Adres e-mail
                            <input placeholder="Adres e-mail" type="text" id="email" class="form-control">
                        </label>
                        <div class="ml-3">
                            <label>
                                Eksportuj płatności za miesiąc
                                <input type="month" class="form-control" id="export-date">
                            </label>
                            <a id="export-button" class="ml-2 btn btn-secondary" href="/export-csv-payments?paymentDate=">Eksportuj</a>
                        </div>
                    </div>
                    <div id="paymentOverflow" class="overflow-auto">
                        <table id="paymentTable" class="table table-striped mt-4">
                            <thead class="thead-dark">
                            <tr>
                                <th>Adres e-mail</th>
                                <th>Scenariusz</th>
                                <th>Cena</th>
                                <th>Zapłacono</th>
                                <th>Status</th>
                                <th>Błędy</th>
                                <th>Data płatności</th>
                                <th>Wyślij kod do</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div id="loaderImage" class="lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <div id="errorMessage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("style")
    <style scoped>
        #cities thead th {
            position: sticky;
            top: 0;
            z-index: 1;

        }

        #pcumiasta {
            border: 2px solid #e46066;
            margin-top: 30px;
            z-index: 1;
            background-color: white;
            display: none;
            height: 343px;
            width: 90%;
            max-width: 300px;
            position: absolute;
            top: 13px;
            right: 0;
        }

        .container {
            max-width: 1500px !important;
        }

        .table {
            border-radius: 2px;
            text-align: center;
        }

        .table td {
            vertical-align: middle !important;
        }

        .table thead th {
            position: sticky;
            top: 0;
        }

        .overflow-auto {
            text-align: center;
            max-height: 60vh;
        }

        .table td form {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
@endsection