@extends('backend.layouts.master')

@section('title')
Quản lý Khách hàng
@endsection

@section('styles')
@include('backend.pages.partials.style_index')
@endsection

@section('page-header')
<div class="row g-2 align-items-center">
    <div class="col">
        <h2 class="page-title">
            Tất cả Khách hàng
        </h2>
    </div>
    <div class="col-auto ms-auto d-print-none">
        @if (Auth::guard('admin')->user()->can('customer.create'))
        <a href="{{ route('admin.customer.create') }}" class="btn btn-primary">
            <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 5l0 14"></path>
                <path d="M5 12l14 0"></path>
            </svg>
            Tạo mới Khách hàng
        </a>
        @endif
    </div>
</div>
@endsection

@section('admin-content')
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    Danh sách Khách hàng
                </h4>
            </div>
            <!--col-->
        </div>
        <!--row-->
        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive" style="overflow-y:visible;overflow-x:visible;">
                    @include('backend.layouts.partials.messages')
                    <table class="table" id="dataTable">
                        <thead>
                            <tr>
                                <th width="5%">No</th>
                                <th width="20%">Tên</th>
                                <th width="5%">Tuổi</th>
                                <th width="20%">Email</th>
                                <th width="15%">Số điện thoại</th>
                                <th width="10%">Tổng điểm</th>
                                <th width="15%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($customers as $customer)
                            <tr>
                                <td>{{ $loop->index+1 }}</td>
                                <td>{{ $customer->name }}</td>
                                <td>{{ $customer->age }}</td>
                                <td>{{ $customer->email }}</td>
                                <td>{{ $customer->phone }}</td>
                                <td>{{ $customer->total_point }}</td>
                                <td>
                                    @if (Auth::guard('admin')->user()->can('admin.edit'))
                                    <a class="btn btn-success text-white btn-edit"
                                        href="{{ route('admin.customer.edit', $customer->id) }}">Sửa</a>
                                    @endif

                                    @if (Auth::guard('admin')->user()->can('admin.edit'))
                                    <form method="POST" action="{{ route('admin.customer.destroy', $customer->id) }}">
                                        @method('DELETE')
                                        @csrf
                                        <input name="_method" type="hidden" value="DELETE">
                                        <button type="submit" class="btn btn-danger btn-flat remove_row"
                                            data-toggle="tooltip" title="Delete">
                                            <i class="fa fa-trash"></i> Xóa
                                        </button>
                                    </form>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!--col-->
        </div>
        <!--row-->
    </div>
    <!--card-body-->
</div>
@endsection


@section('scripts')
@include('backend.pages.partials.script_index')
<script>
    /*================================
    datatable active
    ==================================*/
    if ($('#dataTable').length) {
        $('#dataTable').DataTable({
            dom: "Bfrtip",
            buttons: [
                { extend: 'csv', text: 'Export CSV', title: 'Danh sách Khách hàng', className: 'btn-primary', exportOptions: { columns: ':not(:last-child)' } },
            ],
            responsive: false
        });
    }

    $('.remove_row').click(function(event) {
        event.preventDefault();

        Swal.fire({
            title: "Bạn có chắc muốn xóa dòng này không?",
            text: "Nếu như bạn xóa, dòng dữ liệu này sẽ không thể khôi phục.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Xóa"
        }).then((result) => {
            if (result.isConfirmed) {
                $(this).closest("form").submit();
            }
        });
    });
</script>
@endsection