@extends('layouts.app')



@section('css')
    <link rel="stylesheet" href="{{ secure_asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ secure_asset('assets/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            @if ($message = Session::get('success'))
                <div class="col-md-12">
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        {{ $message }}
                    </div>
                </div>
            @endif
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header" style="background-color: #632b8d; color:white;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">

                            <span id="card_title">
                                {{ __('Customer') }}
                            </span>
                             <div class="float-right">
                                    <a class="btn btn-sm  " data-toggle="modal" style="background-color: #a9ce37; color:#632b8d;"
                                        data-target="#modal-exel">
                                    Excel
                                    </a>

                                @if(auth()->user()->can('create-customer'))
                                    <a class="btn btn-sm " href="/upload_customer" style="background-color: #a9ce37; color:#632b8d;">
                                        Upload Customer
                                    </a>
                                    <a href="{{ route('customer.create') }}" class="btn btn-sm float-right ml-2"  data-placement="left" style="background-color: #a9ce37; ">
                                        {{ __('Tambah Data') }}
                                    </a>
                                @endif
                              </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-3">
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="list-data" class="table table-striped table-hover">
                                <thead class="thead">
                                    <tr>
                                        <th>No</th>
					                    <th>Nama Customer</th>
					                    <th>Tanggal Lahir</th>
					                    <th>Email</th>
					                    <th>Nomor Handphone</th>
					                    <th>Kode Referal</th>
					                    <th>Poin</th>
                                        <th>Coin</th>
                                        <th>XP</th>
                                        <th>Nomor Member</th>
                                        <th>Status</th>
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modal-exel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Anda Ingin Export Excel?</h4>
                </div>
                <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
                        <button id="unduh" onclick="location.href='/customers/excel_all'" type="button" class="btn btn-success" >Unduh</button>
                    </div>
            </div>

        </div>
    </div>
    </div>
    <div class="modal fade" id="modal-exel" id="exportModal">
    </div>
@endsection

@section('js')
    <script>
        var authUserCanEditCustomer = @json(auth()->user()->can('edit-customer'));
    </script>
    <script src="{{ secure_asset('assets/plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ secure_asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ secure_asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const btnSimpan = document.getElementById("unduh");
            btnSimpan.addEventListener("click", function (event) {
                event.preventDefault();
                $('#modal-exel').modal('hide');
                $.ajax({
                    url: '/customers/excel_all',
                    method: 'GET',
                    success: function(response) {

                        alert('Data Berhasil di unduh')

                    },
                })
            })
        })

        var table = $('#list-data').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
                },
                order: [
                    [0, "desc"]
                ],
                ajax: {
                    url: '/list-customer',
                    error: function(xhr, errorType, exception) {
                        if (xhr.status === 500) {
                            // Reload the DataTable after an interval
                            setTimeout(function() {
                                table.ajax.reload();
                            }, 100); // Reload after 3 seconds
                        } else {
                            // Handle other errors as needed
                            console.error('Error:', xhr.responseText);
                        }
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'customer.customer_id',
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'nama',
                        name: 'nama_customer'
                    },
                    {
                        data: 'tanggal_lahir',
                        name: 'tanggal_lahir',
                        render: function(data) {
                            if (!data) return '';
                            var dateParts = data.split('-');
                            return dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                        }
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'no_hp',
                        name: 'no_hp'
                    },
                    {
                        data: 'referal_code',
                        name: 'referal_code'
                    },
                    {
                        data: 'point',
                        name: 'point',
                        render: function(data, type) {
                            return type === 'display' ? parseFloat(data).toLocaleString('id-ID') : data;
                        }
                    },
                    {
                        data: 'coin',
                        name: 'coin',
                        render: function(data, type) {
                            return type === 'display' ? parseFloat(data || 0).toLocaleString('id-ID') : data;
                        }
                    },
                    {
                        data: 'xp',
                        name: 'level_point',
                        render: function(data, type) {
                            return type === 'display' ? parseFloat(data).toLocaleString('id-ID') : data;
                        }
                    },
                    {
                        data: 'nomor_member',
                        name: 'customer.nomor_member'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    }
                ],
                pageLength: 10,
                lengthMenu: [
                    [5, 10, 20],
                    [5, 10, 20]
                ]
            });
    </script>
@endsection