@extends('layouts.admin')
@section('content')
    <style>
        .table td {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .table th {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .btn-setup {
            padding: 7px 12px;
        }

        .btn-outline-primary {
            border: 1px solid #27ae60;
            color: #27ae60;
        }

        .btn-outline-primary:hover {
            background-color: #27ae60;
            color: white;
            border: 1px solid #27ae60;
        }

        .btn-outline-blue {
            border: 1px solid #3498db;
            color: #3498db;
        }

        .btn-outline-blue:hover {
            background-color: #3498db;
            color: white;
            border: 1px solid #3498db;
        }

        .btn-outline-danger {
            color: #c0392b;
            border: 1px solid #c0392b;
        }

        .btn-outline-danger:hover {
            background-color: #c0392b;
            color: white;
        }

        td {
            vertical-align: middle;
        }

    </style>
    <h1 class="app-page-title">Balíčky</h1>
    <div class="col-12">
        <div class="app-card app-card-chart h-100 shadow-sm">
            <div class="app-card-header p-3">
                <div class="row justify-content-between align-items-center" style="padding-left:20px; padding-right:20px;">
                    <div class="col-auto">
                        <h4 class="app-card-title">Seznam košíků</h4>
                    </div>
                </div>
                <!--//row-->
            </div>
            <!--//app-card-header-->
            <div class="app-card-body p-3 p-lg-4">
                <table id="socials" class="table table-hover table-bordered" style="width:100%;">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Pack</th>
                            <th>Instagram</th>
                            <th>Email</th>
                            <th>Zaplaceno</th>
                            <th>Vytvořeno</th>
                            <th>Akce</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($carts as $s)
                            <tr>
                                <td>{{ $s->id }}</td>
                                <td>{{ $s->pack->category->name." - zł".$s->pack->price }}</td>
                                <td><a href="https://instagram.com/{{ $s->username }}" target="_blank">{{ substr($s->username, 0, 30) }}</a></td>
                                <td>{{ $s->email }}</td>
                                <td>{{ $s->paid==1 ? "Ano" : "Ne" }}</td>
                                <td>{{ $s->updated_at }}</td>
                                <td>

                                    <form action="/cart/delete" method="POST" style="display:inline;">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $s->id }}">
                                        <button type="submit" class="btn btn-outline-danger btn-setup"><svg
                                                xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path
                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd"
                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                            </svg></i>
                                        </button>
                                    </form>

                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!--//app-card-body-->
        </div>
        <!--//app-card-->
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('#socials').DataTable({
                "order": [
                    [0, "desc"]
                ]
            });
        });
    </script>
@endsection