@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">Objednávky</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 g-3 mb-3 mt-1 align-items-center justify-content-between" style="padding-left:20px; padding-right:20px;">
                    <div class="col-auto">
                        <h1 class="app-page-title mb-0">Seznam objednávek</h1>
                    </div>
                    <div class="col-auto">
                        <div class="page-utilities">
                            <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                                <div class="col-auto">
                                    <form class="table-search-form row gx-1 align-items-center">
                                        <div class="col-auto">
                                            <input type="text" id="search-orders" style="height:40px;" name="search"
                                                class="form-control search-orders" placeholder="Vyhledat ...">
                                        </div>
                                        <div class="col-auto">
                                            <select class="form-select w-auto" name="type" style="height:40px;">
                                                <option selected="" value="email">Email</option>
                                                <option value="id">ID</option>
                                                <option value="username">Link</option>
                                            </select>
                                        </div>
                                        <div class="col-auto">
                                            <button type="submit" class="btn app-btn-secondary" style="height:40px;">Vyhledat</button>
                                        </div>
                                    </form>

                                </div>
                                <!--//col-->

                            </div>
                            <!--//row-->
                        </div>
                        <!--//table-utilities-->
                    </div>
                    <!--//col-auto-->
                </div>
                <!--//row-->
            </div>
            <!--//app-card-header-->
            <div class="app-card-body p-3 p-lg-4 table-responsive">
                <table id="socials" class="table table-hover table-bordered" style="width:100%;">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>ApiID</th>
                            <th>Zákazník</th>
                            <th>Detail</th>
                            <th>Stav objednávky</th>
                            <th>Metoda</th>
                            <th>Vytvořeno</th>
                            <th>Akce</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($orders as $s)
                            <tr>
                                <td>{{ $s->id }}</td>
                                <td></td>
                                <td>{{ $s->customer->email }}</td>
                                <td>
                                    <div style="font-size:15px; font-weight:600;">{{ $s->pack->category->name }}</div>
                                    <div style="font-size:14px; margin-top:5px;">
                                        <ul>
                                            <li>Link: <a href="" target="_blank"></a></li><li>Začátek: </li><li>Počet: </li>
                                            <li>Cena: €{{ $s->price }}</li>
                                            <li>Výdaj: