@extends('admin.layouts.main')
@section('title', 'Danh sách thông tin liên hệ')
@section('css')
    <style>
        ul {
            padding-left: 0px;
        }

        table {
            font-size: 13px;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">
        @include('admin.partials.content-header', ['name' => 'Liên hệ', 'key' => 'Danh sách'])
        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                {{--<div class="col-sm-12">
                        <div class="list-count">
                            <div class="row">
                                @foreach ($dataContactGroupByStatus as $item)
                                    @if ($item['status'] != -1)
                                        <div class="col-md-3 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ố liên hệ {{ $item['name'] }} </span>
                                                    <span
                                                        class="info-box-number"><strong>{{ number_format($item['total'] ?? 0) }}</strong>
                                                        / tổng số {{ $totalContact }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>--}}
                    <div class="col-sm-12">
                        <div class="card card-outline card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Danh sách liên hệ</h3>
                                <div class="card-tools w-60">
                                    <form action="" method="GET">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="row">
                                                    <div class="form-group col-md-4 mb-0">
                                                        <input id="keyword" value="{{ $keyword }}" name="keyword"
                                                            type="text" class="form-control" placeholder="Từ khóa">
                                                        <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 gửi
                                                                tăng
                                                                dần</option>
                                                            <option value="dateDESC"
                                                                {{ $order_with == 'dateDESC' ? 'selected' : '' }}>Ngày gửi
                                                                giảm
                                                                dần</option>
                                                            {{--<option value="statusASC"
                                                                {{ $order_with == 'statusASC' ? 'selected' : '' }}>Trạng
                                                                thái 1-n
                                                            </option>
                                                            <option value="statusDESC"
                                                                {{ $order_with == 'statusDESC' ? 'selected' : '' }}>Trạng
                                                                thái
                                                                n-1</option>--}}
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-md-4 mb-0" style="min-width:100px;">
                                                        <select id="status" name="status" class="form-control">
                                                            <option value="">Tình trạng </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">
                                                <button data-url='{{ route('admin.contact.index') }}'
                                                    class="btn btn-success search-query">Tìm
                                                    kiếm</button>
                                                <a href="{{ route('admin.contact.index') }}" class="btn btn-danger">Làm
                                                    lại</a>
                                                {{-- <form action="{{ route('admin.contact.export.excel.database') }}" method="GET">
                                                        <button type="submit" class="btn btn-success">Xuất Excel</button>
                                                    </form> --}}
                                                <button data-url='{{ route('admin.contact.export.excel.database') }}'
                                                    class="btn btn-success export-excel">Xuất
                                                    Excel</button>
                                            </div>

                                        </div>
                                    </form>

                                </div>

                            </div>
                            {{-- <div class="card-header">
                                <div class="card-tools w-60" style="min-width:100px;">
                                    <form action="{{ route('admin.contact.export.excel.database') }}" method="GET">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="row">
                                                    <div class="form-group col-md-8 mb-0" style="min-width:100px;">

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4 text-right">
                                                <button type="submit" class="btn btn-primary" title="Xuất Excel"><i
                                                        class="fas fa-file-export"></i></button>

                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div> --}}
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0">
                                <table class="table table-head-fixed">
                                    <thead>
                                        <tr>
                                            <th class="text-nowrap text-center">STT</th>
                                            <th class="text-nowrap">Thông tin</th>
                                            {{--<th class="text-nowrap" >Tài khoản</th>--}}
                                            <th class="text-nowrap" >Trạng thái</th>
                                            <th class="text-nowrap" >Nội dung</th>
                                            <th class="text-nowrap" >Thời gian</th>
                                            <!-- <th class="text-nowrap" >Hành động</th> -->
                                            <th class="text-nowrap" style="display: flex; align-items: center;">
                                                  <input type="checkbox" style="margin-right: 10px" id="check_all">
                                                <div >
                                                    <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(count($data) > 0)
                                        @foreach ($data as $key=>$contact)
                                            <tr>

                                                <td class="text-center">{{ $loop->iteration }}</td>
                                                <td>
                                                    <ul>
                                                        @if ($contact->name)
                                                            <li>
                                                                <strong>Tên:</strong> {{ $contact->name }}
                                                            </li>
                                                        @endif
                                                        @if ($contact->email)
                                                            <li>
                                                                <strong>Email:</strong> {{ $contact->email }}
                                                            </li>
                                                        @endif
                                                        @if ($contact->phone)
                                                            <li>
                                                                <strong>Điện thoại:</strong> {{ $contact->phone }}
                                                            </li>
                                                        @endif
                                                        @if ($contact->address_detail)
                                                            <li>
                                                                <strong>Địa chỉ:</strong> {{ $contact->address_detail }}
                                                            </li>
                                                        @endif
                                                        @if ($contact->name_product)
                                                            <li>
                                                                <strong>Sản phẩm:</strong> {{ $contact->name_product }}
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </td>
                                                {{--<td class="text-nowrap">
                                                    {{ $contact->user_id ? 'Thành viên' : 'Khách vãng lai' }}</td>--}}
                                                <td class="text-nowrap status-2"
                                                    data-url="{{ route('admin.contact.loadNextStepStatus', ['id' => $contact->id]) }}">
                                                    @include('admin.components.status-2', [
                                                        'dataStatus' => $contact,
                                                        'listStatus' => $listStatus,
                                                    ])
                                                </td>

                                                <td class="text-nowrap"> {!! $contact->content !!} </td>
                                                <td class="text-nowrap"> {{ date_format($contact->created_at, 'd/m/Y') }}
                                                </td>
                                                {{-- 
                                                <td>
                                                <a class="btn btn-sm btn-info" id="btn-load-transaction-detail"
                                                        data-url="{{ route('admin.contact.detail', ['id' => $contact->id]) }}"><i
                                                            class="fas fa-eye"></i></a>
                                                    <!-- <a href=""
                                                        data-url="{{ route('admin.contact.destroy', ['id' => $contact->id]) }}"
                                                        class="btn btn-sm btn-info btn-danger lb_delete tooltip11"><i
                                                            class="far fa-trash-alt"></i><span
                                                            class="tooltiptext">Xóa</span></a> -->
                                                </td>
                                                --}}
                                                <td>
                                                    <input class="delete_checkbox" type="checkbox" name="deleteCheckbox" value="{{$contact->id}}">
                                                </td>
                                            </tr>
                                        @endforeach
                                        @else
                                        <tr>
                                            <td colspan="6" class="text-center">Không có dữ liệu</td>
                                        </tr>
                                        @endif

                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->

                            <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> / {{ $totalContact }}
                                </div>
                            </div>
                        </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">Close</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.contact.delete.all') }}",
                            data: { checkedValues: checkedValues },
                            success: function(data) {
                                if (data.code == 200) {
                                    location.reload();
                                }
                            }
                        });
                    }
                })
            });
        });
    </script>
@endsection