@extends('layout.app')
@section('_style')
    <link href="{{ asset('css/customer.css') }}" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}"/>
    <style>
        .small-tip {
            font-size: 11px;
            color: #999;
        }

        /* Nút Bộ lọc nằm cùng cụm "Xuất Excel" / "Tạo mới": cùng chiều cao & cỡ chữ với các nút .btn bên cạnh */
        .crm-2026 .crm-list-header__actions .crm-filter-toggle {
            margin-left: 0;
            padding: 0;
        }

        .crm-2026 .crm-list-header__actions .crm-filter-toggle .crm-filter-toggle__btn {
            height: 39px;
            font-size: 14px;
        }
    </style>
@endsection
@section('content')
    @php
        $roleGlobal = auth()->user()?:[];
    @endphp
    <style>
        .table-responsive{
            overflow: scroll;
            height: 67vh;
        }
        .table thead th {
            position: sticky;
            top: 0;
            color: #fff;
            vertical-align: middle;
            white-space: normal;
            z-index: 1;
        }
        /* Dòng "Tổng" dính ngay dưới header bảng (.crm-list-table thead cao ~46px) */
        .table .tr-n td{
            position: sticky;
            top: 46px;
            z-index: 1;
        }
    </style>
    <div class="col-md-12 col-lg-12">
        <div class="card crm-list-card">
            {!! Form::open(array('url' => url()->current(), 'id'=> 'gridForm','role'=>'form')) !!}

            <div class="card-header crm-list-header">
                <h3 class="card-title"><i class="fas fa-file-invoice-dollar"></i> Danh sách chi</h3>

                <div class="crm-list-header__actions">
                    @if(\Request::is('products'))
                        <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>
                    @endif
                    {{-- Ẩn nút xuất Excel khi không có quyền thu-chi.export --}}
                    <a {{$roleGlobal->permission('thu-chi.export')?:"style=display:none"}}
                        class="btn btn-outline-primary" href="#" data-toggle="modal" data-target="#myModalExport"
                        title="Tải thu chi (EXCEL)">
                        <i class="fas fa-cloud-download-alt"></i> Xuất Excel
                    </a>
                    <a class="btn btn-primary" href="{{request()->url().'/create' }}"><i
                                class="fa fa-plus-circle"></i> Tạo mới</a>
                    {{-- 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>
            <div class="crm-list-toolbar">
                <input type="hidden" name="start_date" id="start_date">
                <input type="hidden" name="end_date" id="end_date">
                <input type="hidden" name="page" id="page">
                <div class="crm-list-toolbar__filter">
                    <input id="reportrange" type="text" class="form-control square">
                </div>
                <div class="crm-list-toolbar__filter">
                    {!! Form::select('category_id', $categories, null, array('class' => 'form-control select2','id'=>'category','placeholder'=>'Chọn danh mục')) !!}
                </div>
                <div class="crm-list-toolbar__filter">
                    <select name="status" id="status" class="form-control select2">
                        <option value="">Chọn trạng thái</option>
                        <option value="0">Chưa duyệt</option>
                        <option value="1">Đã duyệt</option>
                    </select>
                </div>
                @if(empty(auth()->user()->branch_id))
                    <div class="crm-list-toolbar__filter">
                        {!! Form::select('branch_id', $branches, null, array('class' => 'form-control select2','id'=>'branch','placeholder'=>'Chọn chi nhánh')) !!}
                    </div>
                @endif
                <div class="crm-list-toolbar__filter crm-list-toolbar__action">
                    <button class="btn btn-primary searchData"><i class="fa fa-search"></i> Tìm kiếm</button>
                </div>
            </div>
            @include('thu_chi.danh_sach_thu_chi.dropdownFilter')
            </form>
            @include('thu_chi.danh_sach_thu_chi.modal-export')
            <div class="header-search">
                @include('thu_chi.danh_sach_thu_chi.ajax')
            </div>
        </div>
    </div>

    <script src="{{asset('js/daterangepicker.min.js')}}"></script>
    <script src="{{asset('js/dateranger-config.js')}}"></script>
@endsection
@section('_script')
    <script>
        $(document).on('click', '.change_status', function () {
            let status = $(this).is(':checked');
            let id = $(this).data('id');
            $.ajax({
                url: '/ajax/change-status-thu-chi',
                method: 'post',
                data: {
                    id: id,
                    status: status
                },
                success: function (data) {
                    if (data && data == 1) {
                        alertify.success('Cập nhật thành công !');
                    } else {
                        alert('bạn không có quyền !');
                    }
                }
            })
        })
        $(document).on('click', 'a.page-link', function (e) {
            e.preventDefault();
            let pages = $(this).attr('href').split('page=')[1];
            $('#page').val(pages);
            $('#gridForm').submit();
        });
        // $(document).on('click', '#btn-export-excel', function (e) {
        //     e.preventDefault();
        //     $('#gridForm').submit();
        // });
    </script>
@endsection