@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>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 }} Kč</li>
                                    <li>Výdaj: