@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">Kategorie</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 kategorií</h4>
                    </div>
                    <!--//col-->
                    <div class="col-auto">
                        <a href="/category/add" class="btn app-btn-secondary">Přidat kategorii</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>URL</th>
                            <th>Prodáno</th>
                            <th>Akce</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $s)
                            <tr>
                                <td>{{ $s->id }}</td>
                                <td>{{ $s->name }}</td>
                                <td>{{ $s->text_id }}</td>
                                <td>{{ $s->packs->sum('sold') }}</td>
                                <td>
                                    <a href="/{{ $s->text_id }}" target="_blank" class="btn btn-outline-blue btn-setup"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                            class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd"
                                                d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5z" />
                                            <path fill-rule="evenodd"
                                                d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0v-5z" />
                                        </svg></a>
                                    <a href="/category/{{ $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>
                                    <form action="/category/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,
                ordering: false,
                paging: false
            });
        });
    </script>
@endsection