@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 balíčků</h4>
                    </div>
                    <!--//col-->
                    <div class="col-auto">
                        <a href="/pack/add" class="btn app-btn-secondary">Přidat balíček</a>
                        <!--//card-header-actions-->
                    </div>
                    <!--//col-->
                </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>Název</th>
                            <th>Cena</th>
                            <th>Počet</th>
                            <th>Cena za 1000</th>
                            <th>Prodáno</th>
                            <th>Akce</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($packs as $s)
                            <tr>
                                <td>{{ $s->id }}</td>
                                <td>{{ $s->category->name }}</td>
                                <td>{{ $s->price }} Kč</td>
                                <td>{{ $s->amount }}</td>
                                <td>${{ $s->rate }}</td>
                                <td>{{ $s->sold }}</td>
                                <td>
                                    <a href="/pack/{{ $s->id }}/edit" class="btn btn-outline-primary btn-setup"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                            class="bi bi-pencil-square" viewBox="0 0 16 16">
                                            <path
                                                d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                            <path fill-rule="evenodd"
                                                d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                                        </svg></a>
                                    <a href="/pack/{{ $s->id }}/duplicate"
                                        class="btn btn-outline-blue btn-setup"><svg xmlns="http://www.w3.org/2000/svg"
                                            width="16" height="16" fill="currentColor" class="bi bi-files"
                                            viewBox="0 0 16 16">
                                            <path
                                                d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z" />
                                        </svg></a>
                                    <form action="/pack/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({
                searching: false,
                paging: false
            });
        });
    </script>
@endsection