@extends('layouts.master')
@section('page_title', 'WOM Fulfillment Dashboard')
@section('content')
    {{ Form::page_header("WOM Fulfillment Dashboard", "checklist") }}
    <div class="container">
        <div class="row bottom-margin">
            <div class="col-md-12 grey-bg-search curve_container search-container">
                <form class="row" id="search_form">
                    @include('search._grid_search_filters', ['col_width' => 6, 'filters' => [
                        ['name' => 'team', 'col_width' => 6, 'list' => $team_filter, 'placeholder' => 'All Businesses'],
                        ['name' => 'phase', 'col_width' => 6, 'list' => \App\Models\Business::$business_phase_map, 'placeholder' => 'All Phases'],
                    ]])

                    @include('search._complex_search', ['col_width' => 6])
                    @include('search._complex_search_parameter', ['sort_column' => 'age'])
                </form>
            </div>
        </div>
        @include('search._search_grid_wrapper')
    </div>
@endsection

@section('page_script')
    @include('shared_script._search_script_render')
    @include('shared_script._dynamic_search_columns')
    <script>
        $(document).ready(function () {
            $(".table tbody tr td").has('input[value="NOTES"]').closest('tr').addClass('row_notes');
            $('[data-toggle="tooltip"]').tooltip();
        }).ajaxSuccess(function () {
            // activate tooltips after ajax calls
            $('[data-toggle="tooltip"]').tooltip();
        });

    </script>
@endsection

@section('page_style')
    @include('shared_style._grid_sort_style')
    <style>
        .grid-body-container {
            margin-top: 20px;
        }

        table.table.source-data-table.source-table-responsive.source-data-table-users.border-table > tbody > tr > td {
            max-width: 175px;
        }

        .phase-progress-overview {
            margin-top: 0;
            margin-bottom: 0;
        }

        .progress-col {
            padding: 0;
        }

        .progress {
            border-radius: 0;
            border: 1px solid #000000;
        }

        .td-progress {
            min-width: 200px;
        }

        table.table.source-data-table.source-table-responsive.border-table > tbody > tr > td {
            max-width: 175px;
        }

        .tooltip {
            position: fixed;
        }

        .progress-bar-row {
            padding: 2px 0;
            margin: 0;
        }
    </style>
@endsection