@extends('admin.layouts.main')
@section('title', 'Danh sách đơn hàng')
@section('css')
<style>
    ul {
        padding-left: 20px;
    }

    .info-box .info-box-number {
        display: block;
        margin-top: .25rem;
        color: #f00;
        font-weight: 700;
    }
</style>
@endsection

@section('content')
<div class="content-wrapper">
    @include('admin.partials.content-header', ['name' => 'Đơn hàng', 'key' => 'Danh sách đơn hàng'])
    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                {{--@isset($dataTransactionGroupByStatus)
                        <div class="col-sm-12">
                            <div class="list-count">
                                <div class="row">
                                    @foreach ($dataTransactionGroupByStatus as $item)
                                        <div class="col-md-4 col-sm-6 col-12">
                                            <div class="info-box">
                                                <span class="info-box-icon bg-info"><i class="fas fa-calculator"></i></span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">Số giao dịch {{ $item['name'] }} </span>
                <span
                    class="info-box-number"><strong>{{ number_format($item['total'] ?? 0) }}</strong>
                    / tổng số {{ $totalTransaction }}</span>
            </div>
            <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
    </div>
    @endforeach
</div>
</div>
</div>
@endisset--}}

<div class="col-sm-12">
    <div class="card card-outline card-primary">
        <div class="card-header">
            <div class="card-tools w-100">
                <form action="{{ route('admin.transaction.index') }}" method="GET">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row">
                                <div class="form-group col-md-4 mb-3">
                                    <label for="search_type">Tìm theo</label>
                                    <select id="search_type" name="search_type" class="form-control">
                                        <option value="order_code" {{ request('search_type') == 'order_code' ? 'selected' : '' }}>Mã đơn hàng</option>
                                        <option value="phone" {{ request('search_type') == 'phone' ? 'selected' : '' }}>Số điện thoại</option>
                                        <option value="email" {{ request('search_type') == 'email' ? 'selected' : '' }}>Email</option>
                                        <option value="customer_name" {{ request('search_type') == 'customer_name' ? 'selected' : '' }}>Tên khách hàng</option>
                                    </select>
                                </div>

                                <!-- Ô nhập từ khóa -->
                                <div class="form-group col-md-5 mb-3">
                                    <label for="keyword">Từ khóa</label>
                                    <input id="keyword" name="keyword" type="text"
                                        value="{{ request('keyword') }}"
                                        class="form-control" placeholder="Nhập từ khóa tìm kiếm...">
                                    <div id="keyword_feedback" class="invalid-feedback"></div>
                                </div>
                                {{--<div class="form-group col-md-4 mb-0" style="min-width:100px;">
                                    <select id="order" name="order_with" class="form-control">
                                        <option value="">Sắp xếp theo</option>
                                        <option value="dateASC"
                                            {{ $order_with == 'dateASC' ? 'selected' : '' }}>Ngày đặt
                                tăng dần</option>
                                <option value="dateDESC"
                                    {{ $order_with == 'dateDESC' ? 'selected' : '' }}>Ngày đặt
                                    giảm dần</option>
                                </select>
                            </div>--}}

                            <div class="form-group col-md-3 mb-0" style="min-width:100px;">
                                <label for="keyword">Trạng thái</label>
                                <select id="status" name="status" class="form-control">
                                    <option value="">Tình trạng đơn</option>
                                    @foreach ($listStatus as $status)
                                    <option value="{{ $status['status'] }}"
                                        {{ $status['status'] == $statusCurrent ? 'selected' : '' }}>{{ $status['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-right">
                        {{--<a href="{{route('admin.transaction.add')}}" class="btn btn-info" >Tạo đơn</a> --}}
                        <button data-url='{{ route('admin.transaction.index') }}'
                            class="btn btn-success search-query">Tìm kiếm</button>
                        <a href="{{ route('admin.transaction.index') }}" class="btn btn-danger">Làm
                            lại</a>
                        <button data-url='{{ route('admin.transaction.export.excel.database') }}'
                            class="btn btn-success export-excel">Xuất
                            Excel</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
    <div class="card-tools text-right pl-3 pr-3 pt-2 pb-2">
        <div class="count">
            Tổng số bản ghi <strong>{{ $data->count() }}</strong> / {{ $totalTransaction }}
        </div>
    </div>
    <!-- /.card-header -->
    <div class="card-body table-responsive p-0">
        <table class="table table-head-fixed">
            <thead>
                <tr>
                    <th class="text-center">STT</th>
                    <th class="text-nowrap">Mã đơn hàng</th>
                    <th class="text-nowrap">Họ tên</th>
                    {{-- <th class="text-nowrap">Được giảm giá</th>
                                            <th class="text-nowrap">Thành tiền</th> --}}
                    <th class="text-nowrap" style="text-align: center;">Tổng tiền</th>
                    {{--<th class="text-nowrap">Tài khoản</th>--}}
                    <th class="text-nowrap">Trạng thái</th>
                    <th class="text-nowrap">Thanh toán</th>
                    <th class="text-nowrap">Thời gian</th>
                    <th class="text-nowrap text-center">Hành động</th>
                    <th class="text-nowrap" style="display: flex; align-items: center; width: 50px">
                        <input type="checkbox" id="check_all">
                        <div style="margin-left: 10px">
                            <a class="btn btn-sm btn-danger lb_delete_checkbox tooltip11"><i class="far fa-trash-alt"></i></a>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                @if($data->count() > 0)
                @foreach ($data as $key=>$transaction)
                <tr>
                    <td class="text-center">{{ $key+1 }}</td>
                    <td>{{ $transaction->code }}</td>
                    <td>
                        <ul style="padding: 0">

                            <li>
                                {{ $transaction->name }}
                            </li>
                            {{--<li>
                                    <strong>Số điện thoại:</strong> {{ $transaction->phone }}
                            </li>

                            <li>
                                @if (!empty($transaction->district) && !empty($transaction->city))
                                <strong>Địa chỉ:</strong>
                                {{ $transaction->address_detail }},
                                {{ $transaction->district->name }},
                                {{ $transaction->city->name }}
                                @else
                                <strong>Địa chỉ:</strong>
                                {{ $transaction->city_id ? $transaction->city->name . ' (' . $transaction->address_detail . ')' : $transaction->address_detail }}
                                @endif

                            </li>
                            @if ($transaction->note)
                            <li>
                                <strong>Ghi chú:</strong> {{ $transaction->note }}
                            </li>
                            @endif
                            @if ($transaction->httt)
                            <li>
                                <strong>Hình thức thanh toán:</strong>
                                {{ App\Models\Setting::find($transaction->httt)->name }}
                            </li>
                            @endif

                            @if ($transaction->cn)
                            <li>
                                <div><strong>Tên ngân hàng:</strong>
                                    {{ optional($transaction->setting('cn')->first())->value }}
                                </div>
                                <div><strong>Thông tin tài khoản:</strong>
                                    {{ optional($transaction->setting('cn')->first())->name }}
                                </div>
                            </li>
                            @endif--}}
                        </ul>
                    </td>


                    <td class="">

                      
                                {{ number_format($transaction->total) }}đ @if ($transaction->sale)
                                (Đã giảm: {{ number_format($transaction->sale) }}đ)
                                @endif
                     
                    </td>
                    {{-- <td class="text-nowrap">
                                                    {{ $transaction->user_id ? 'Thành viên' : 'Khách vãng lai' }}</td>--}}
                    <td class="text-nowrap status"
                        data-url="{{ route('admin.transaction.loadNextStepStatus', ['id' => $transaction->id]) }}">
                        @include('admin.components.status', [
                        'dataStatus' => $transaction,
                        'listStatus' => $listStatus,
                        ])
                    </td>
                    <td class="wrap-load-thanhtoan"
                        data-url="{{ route('admin.product.load.thanhtoan', ['id' => $transaction->id]) }}">
                        @include('admin.components.load-change-thanhtoan', [
                        'data' => $transaction,
                        ])
                    </td>
                    <td class="text-nowrap">{{ $transaction->created_at->format('d/m/Y H:m:s') }}</td>
                    <td class="text-center">
                        <a class="btn btn-sm btn-info"
                            href="{{ route('admin.transaction.show', ['id' => $transaction->id]) }}"><i
                                class="fas fa-eye"></i></a>
                        <a href=""
                            data-url="{{ route('admin.transaction.destroy', ['id' => $transaction->id]) }}"
                            class="btn btn-sm btn-info btn-danger lb_delete"><i
                                class="far fa-trash-alt"></i></a>
                    </td>
                    <td>
                        <input class="delete_checkbox" type="checkbox" name="deleteCheckbox" value="{{$transaction->id}}">
                    </td>
                </tr>
                @endforeach
                @else
                <tr>
                    <td colspan="10" class="text-center">Không có dữ liệu</td>
                </tr>
                @endif

            </tbody>
        </table>
    </div>
    <!-- /.card-body -->
</div>
</div>
<div class="col-md-12">
    {{ $data->appends(request()->input())->links('pagination::bootstrap-4') }}
</div>
</div>
</div>
</div>
<!-- /.content -->
</div>
<!-- The Modal chi tiết đơn hàng -->
<div class="modal fade in" id="transactionDetail">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Chi tiết đơn hàng</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="content" id="loadTransactionDetail">

                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Đóng</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
    const form = document.querySelector('.card-tools form')
    form.onclick = function(e) {
        if (e.target.classList.contains('export-excel') || e.target.classList.contains('search-query')) {
            e.preventDefault()
            const url = e.target.getAttribute('data-url')
            this.action = url
            this.submit()
        }
    }
</script>
<script>
    $(document).ready(function() {
        var checkedValues = []; // Mảng lưu trữ các giá trị đã chọn

        $('#check_all').click(function() {
            $('.delete_checkbox').prop('checked', $(this).prop('checked')).change(); // Gọi sự kiện "change" sau khi thiết lập thuộc tính
        });

        $('.delete_checkbox').change(function() {
            var value = $(this).val(); // Lấy giá trị của checkbox đã thay đổi

            // Kiểm tra xem checkbox đã được chọn hay không
            if ($(this).is(":checked")) {
                // Nếu đã chọn, thêm giá trị vào mảng
                checkedValues.push(value);
            } else {
                // Nếu bỏ chọn, loại bỏ giá trị khỏi mảng
                var index = checkedValues.indexOf(value);
                if (index !== -1) {
                    checkedValues.splice(index, 1);
                }
            }

        });

        $(document).on('click', '.lb_delete_checkbox', function() {
                event.preventDefault();
                let title = 'Bạn có chắc chắn muốn xóa những bản ghi mà bạn đã tích chọn';
                Swal.fire({
                    title: title,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, next step!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "GET",
                            url: "{{ route('admin.transaction.delete.all') }}",
                            data: { checkedValues: checkedValues },
                            success: function(data) {
                                if (data.code == 200) {
                                    location.reload();
                                }
                            }
                        });
                    }
                })
            });
    });
</script>
@endsection