@extends('layouts.app')

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

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header h2">Śledztwa</div>
                <div class="card-body">
                    <div class="text-right">
                        <div class="d-inline text-left form-group float-left">
                            <label class="ml-3">
                                Wyszukaj:<br>
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Miasto" placeholder="Miasto" id="city">
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Lokal" placeholder="Lokal" id="place">
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Nazwa drużyny" placeholder="Nazwa drużyny" id="teamName">
                                <label>
                                    Śledztwa od<br>
                                    <input class="d-inline w-auto form-control ml-1" type="date" id="dateFrom">
                                </label>
                                <label>
                                    Śledztwa do<br>
                                    <input class="d-inline w-auto form-control ml-1" type="date" id="dateTo">
                                </label>
                            </label>
                            <label class="ml-3">
                                Sortuj wg:
                                <select id="orderBy" class="form-control">
                                    <option selected value="city"> Miasta</option>
                                    <option value="place"> Lokalu</option>
                                    <option value="created_at" selected> Daty dodania</option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div id="tableOverflow" class="w-100 overflow-auto position-relative">
                        <table id="table" class="table table-striped table-sm mt-4">
                            <thead class="thead-dark">
                            <tr>
                                <th>Miasto</th>
                                <th>Lokal</th>
                                <th>Data śledztwa</th>
                                <th>Data scenariusz</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="h5 text-center p-4" id="errorMessage"></div>
                        @include('blocks.crime.result')

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("style")
    <style scoped>
        .myTable td{
            width: 40px;
        }
        .info {
            width: 100%;
            white-space: nowrap;
        }

        .close {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 10px;
            padding: 7px;
            cursor: pointer;
        }

        #crimeResultContainer{
            position: fixed;
            transition-duration: 0.4s;
            right: 0;
            z-index: 2;
            max-width: 1230px;
            overflow: auto;
            background-color: white;
            background-image: url({{ asset('images/rankingtlo.png')  }});
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 5px;
            border: 2px solid #ce1c17;
            bottom:0;
            height: 50vh;
            width: 0;
        }

        #tableResult td, #tableResult th{
            border: 1px solid #777;
            line-height: 1em;
        }

        #tableResult thead div{
            font-size: 0.8em;
        }

        .agentTitle{
            font-size: 0.9em;
        }
        #tableResult tbody span{
            word-spacing: 1.2em;
        }
        .dobraodp{
            color: #2d995b;
        }
        .zlaodp{
            color: #ce1c17;
        }

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

        #table td {
            transition-duration: 0.3s;
            cursor: pointer;
            vertical-align: middle !important;
        }

        .table thead th {
            position: sticky;
            top: 0;
            color: #ce1c17;
            z-index: 1;
        }

        #table tr:hover td{
            background-color: #ce1c1799;
        }
        .overflow-auto {
            text-align: center;
            max-height: 75vh;
        }

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