@extends('backpack::layout')

@section('content')
    <link rel="stylesheet" href="{{ asset('/backend/admin_build/css/admin-table-1.css') }}">
    <div class="row">
        <div class="col-md-12 col-sm-4 col-xs-12">
            @include('admin.clients.top-bar')
        </div>

        <div class="col-md-4 col-sm-4 col-xs-12">
            @include('admin.clients.top-clients')
        </div>

        <div class="col-md-4 col-sm-4 col-xs-12">
            @include('admin.clients.clients-fields')
        </div>

        <div class="col-md-4 col-sm-4 col-xs-12">
            @include('admin.clients.projects')
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <a href="{{ URL::to('/admin/excel/generate/clients_shortData') }}">
                    <button class="btn btn-success">Download Excel</button>
                </a>
                <a href="{{ URL::to('/admin/clients/add') }}">
                    <button class="btn btn-success">Add Client</button>
                </a>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <form action="" method="GET">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <label>Countries</label>
                            <select class="form-control" name="country">
                                <option class="">All</option>
                                @foreach($countries as $country)
                                    <option @if($countryId && $countryId == $country->id) selected="selected"
                                            @endif value="{{$country->id}}">
                                        {{$country->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <label>Keywords</label>
                            <input type="search" class="form-control" name="keyword"
                                   @if($keywords) value="{{ $keywords }}" @endif />
                        </div>
                    </div>
                    <div class="row margin-top-10px margin-bottom-10px">
                        <div class="col-sm-2 col-xs-12">
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        @include('admin.clients.clients-table')
    </div>

    <script type="text/javascript">
        var el = document.getElementsByClassName('delete-from');
        for (var i = 0; i < el.length; i++) {
            el[i].addEventListener('submit', function (e) {
                return (confirm('Are you sure you want to submit this form? This operation is irriversible.')) ? true : e.preventDefault();
            }, false);
        }

        var chart_doughnut_settings = {
            type: 'doughnut',
            tooltipFillColor: "rgba(51, 51, 51, 0.55)",
            data: {
                labels: [
                    "Started Projects",
                    "Active Projects",
                    "Completed Projects"
                ],
                datasets: [{
                    data: [{{$projectStatusesDto->getStarted()}},
                        {{$projectStatusesDto->getActive()}},
                        {{$projectStatusesDto->getCompleted()}}],
                    backgroundColor: [

                        "#9B59B6",
                        "#E74C3C",
                        "#3498DB"
                    ],
                    hoverBackgroundColor: [

                        "#B370CF",
                        "#E95E4F",
                        "#49A9EA"
                    ]
                }]
            },
            options: {
                legend: false,
                responsive: false
            }
        };
        var chart_element = $('.projectsChart');
        var chart_doughnut = new Chart(chart_element, chart_doughnut_settings);
    </script>
@endsection