@extends('layout.app')
@section('content')
    <div class="col-md-12 col-lg-12">
        <div class="card crm-list-card">
            <div class="card-header crm-list-header">
                <h3 class="card-title"><i class="fas fa-box-open"></i> {{$title}}</h3>
                <div class="crm-list-header__actions">
                    <a title="Download Data" class="btn btn-outline-secondary" href="{{route('product.export')}}">
                        <i class="fas fa-cloud-download-alt"></i> Xuất Excel</a>
                    <a title="Upload Data" class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#myModalImport">
                        <i class="fas fa-cloud-upload-alt"></i> Nhập Excel</a>
                    <a class="btn btn-primary" href="{{request()->url().'/create' }}"><i
                                class="fa fa-plus-circle"></i> Tạo mới</a>
                </div>
            </div>
            <form>
                {{-- Giữ class JS: .header-search (keyup tìm kiếm), .trademarks, .category (change lọc) --}}
                <div class="crm-list-toolbar">
                    <div class="crm-list-toolbar__search">
                        <i class="fas fa-search"></i>
                        <input class="form-control header-search" name="search" placeholder="Tìm kiếm…" tabindex="1"
                               type="search" value="{{@$input['search']}}">
                    </div>
                    <div class="crm-list-toolbar__filter">
                        {!! Form::select('trademarks', $trademarks, @$input['trademark'], array('class' => 'form-control trademarks','placeholder'=>'--Nhà cung cấp--')) !!}
                    </div>
                    <div class="crm-list-toolbar__filter">
                        {!! Form::select('category', $category_pluck, @$input['category'], array('class' => 'form-control select2 category','data-placeholder'=>'--Danh mục cha--')) !!}
                    </div>
                </div>
            </form>
            <div class="header-search">
                @include('product.ajax')
                @include('product.modal')
            </div>
            <!-- table-responsive -->
        </div>
    </div>
@endsection
@section('_script')

    <script type="text/javascript">


        $(document).on('change', '.category', function (e) {
            var id = $(this).val();
            $.ajax({
                url: "{{ Url('products/') }}",
                method: "get",
                data: {category_id: id}
            }).done(function (data) {
                $('.table-responsive').html(data);

            });
        })

        $(document).on('change', '.trademarks', function (e) {
            var id = $(this).val();
            $.ajax({
                url: "{{ Url('products/') }}",
                method: "get",
                data: {trademark: id}
            }).done(function (data) {
                $('.table-responsive').html(data);

            });
        })

        $(document).on('keyup', '.header-search', function (e) {
            e.preventDefault();
            var search = $(this).val();
            $.ajax({
                url: "{{ Url('products/') }}",
                method: "get",
                data: {search: search}
            }).done(function (data) {
                $('.table-responsive').html(data);

            });
        });
    </script>
@endsection