@extends('layouts.app')

@section("scripts")
    <script type="text/javascript" src="{{ asset('js/pc_companies.js') }}"></script>
@endsection

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header h2">Subdomeny</div>
                <div class="card-body">
                    <h4>Dodaj subdomenę</h4>
                    <form action="/pc-company" method="post" enctype="multipart/form-data" class="inline-form mb-3">
                        @csrf
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <input name="domain" class="form-control" type="text"
                                    placeholder="nazwa_firmy">
                                <span class="input-group-text" id="inputGroupPrepend3">.pubcrime.pl</span>
                            </div>
                        </div>
                        <div class="input-group ml-2">
                            <div class="input-group-prepend">
                              <span class="input-group-text" id="inputGroupFileAddon01">Logo</span>
                            </div>
                            <div class="custom-file">
                              <input accept="image/*" name="file" type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                              <label class="custom-file-label" for="inputGroupFile01">Wybierz plik</label>
                            </div>
                        </div>
                        <input type="submit" class="ml-2 btn btn-primary" value="Dodaj">
                    </form>

                    <div id="companiesOverflow" class="overflow-auto">
                        <table id="companiesTable" class="table table-striped mt-4">
                            <thead class="thead-dark">
                            <tr>
                                <th>Nazwa domeny</th>
                                <th>Logo</th>
                                <th>Data dodania</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div id="loaderImage" class="lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <div class="mt-3" id="errorMessage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("style")
    <style scoped>
        .inline-form {
            display: flex;
            justify-content: flex-start;
        }
        .inline-form .input-group {
            width: auto !important;
        }
        .container {
            max-width: 1500px !important;
        }

        .table {
            border-radius: 2px;
            text-align: center;
        }

        .table td {
            vertical-align: middle !important;
        }

        .table thead th {
            position: sticky;
            top: 0;
        }

        .overflow-auto {
            text-align: center;
            max-height: 60vh;
        }

        .table td form {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
@endsection