@extends('layout.app')
@section('_style')
    <style>
        .form-control {
            font-size: 14px;
        }

        .table th, .text-wrap table th {
            text-transform: unset;
            color: white;
        }

        tr.number_index th {
            font-size: 12px;
        }

        tr.fixed th {
            font-size: 12px;
        }

        td.text-center {
            font-size: 12px;
        }

        .row-cards {
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            box-shadow: 0 0 0 1px rgb(61 119 180 / 12%), 0 8px 16px 0 rgb(91 139 199 / 24%);
        }

        @media (min-width: 1280px) {
            .container {
                max-width: 97%;
            }
        }

        /*
         * Hàng bộ lọc: cụm [Tìm kiếm + Bộ lọc] chiếm phần cột còn lại, cùng hàng & cùng chiều cao 42px với input.
         * Desktop không cho rớt dòng: các ô lọc được phép co nhẹ nếu thiếu chỗ (khi đủ chỗ vẫn giữ lưới col-2
         * để thẳng cột với hàng lọc nâng cao .isShowView bên dưới).
         */
        .crm-2026 .crm-sale-filter-row {
            align-items: center;
        }

        .crm-2026 .crm-sale-filter-row .crm-sale-filter-row__actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .crm-2026 .crm-sale-filter-row .crm-sale-filter-row__actions > .btn,
        .crm-2026 .crm-sale-filter-row .crm-filter-toggle .crm-filter-toggle__btn {
            display: inline-flex;
            align-items: center;
            height: 42px;
            margin: 0;
        }

        .crm-2026 .crm-sale-filter-row .crm-filter-toggle {
            margin-left: auto;
            padding: 0;
        }

        @media (min-width: 992px) {
            .crm-2026 .crm-sale-filter-row {
                flex-wrap: nowrap;
            }

            .crm-2026 .crm-sale-filter-row > [class*="col-"] {
                flex-shrink: 1;
                min-width: 120px;
            }

            .crm-2026 .crm-sale-filter-row > .crm-sale-filter-row__actions {
                /* Bootstrap gán width: 100% cho mọi .col-* => phải về auto, nếu không flex-basis auto = cả hàng, ép ô lọc về 0 */
                flex: 1 0 auto;
                width: auto;
                max-width: none;
            }
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}"/>
    <link href="{{ asset('css/order-search.css') }}" rel="stylesheet"/>

@endsection
@section('content')

    <div class="col-md-12">
        <div id="fix-scroll" class="row padding mb10 header-dard border-bot shadow row">
            {!! Form::open(array('url' => url()->current(), 'method' => 'get','class'=>'col-md-12', 'id'=> 'gridForm','role'=>'form')) !!}
            <div class="row">
                <div class="col-md-3"><h3 class="card-title bold">XẾP HẠNG TELESALE</h3></div>
            </div>
            <div class="row crm-sale-filter-row" style="padding-top: 0.5rem">
                <div class="col-md-2">
                    <input type="hidden" name="start_date" id="start_date">
                    <input type="hidden" name="end_date" id="end_date">
                    <input id="reportrange" type="text" class="form-control square">
                </div>
                @if(auth()->user()->permission('filter.team'))
                    <div class="col-lg-2 col-md-3">
                        {!! Form::select('team_id', $teams, null, array('class' => 'form-control location select-gear', 'placeholder' => 'Chọn team')) !!}
                    </div>
                @endif
                <div class="col-lg-2 col-md-3">
                    {!! Form::select('location_id', $location, null, array('class' => 'form-control location select-gear', 'placeholder' => 'Cụm khu vực')) !!}
                </div>
                <div class="col-lg-2 col-md-3">
                    {!! Form::select('branch_id', $branchs, collect($branchs)->keys()->first(), array('class' => 'form-control', 'placeholder' => 'Tất cả chi nhánh')) !!}
                </div>
                <div class="col-lg-2 col-md-3">
                    {!! Form::select('filter_date', ['created_at'=>'Ngày data về hệ thống','ngay_sale_nhan_data'=>'Ngày sale nhận data'], null, array('class' => 'form-control', 'placeholder' => 'Kiểu lọc')) !!}
                </div>

                <div class="col-lg col-md-6 crm-sale-filter-row__actions">
                    <button type="submit" class="btn btn-primary"> Tìm kiếm</button>
                    {{-- Nút mở/đóng bộ lọc nâng cao (.isShowView trong dropdownFilter) --}}
                    <div class="heading-elements crm-filter-toggle">
                        <ul class="list-inline mb-0">
                            <li><a style="display: none" href="#" class="angleDoubleUp crm-filter-toggle__btn is-open" title="Thu gọn bộ lọc">
                                    <i class="fas fa-sliders-h"></i><span>Thu gọn</span></a></li>
                            <li><a href="#" class="angleDoubleDown crm-filter-toggle__btn" title="Mở bộ lọc nâng cao">
                                    <i class="fas fa-sliders-h"></i><span>Bộ lọc</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            @include('report_products._include.dropdownFilter')
            {{ Form::close() }}
        </div>
    </div>
    <div class="col-md-12 col-lg-12" id="registration-form">
        @include('report_products.ajax_sale')
    </div>
    <script src="{{asset('js/daterangepicker.min.js')}}"></script>
    <script src="{{asset('js/dateranger-config.js')}}"></script>
@endsection
@section('_script')

@endsection