@extends('admin.layouts.master')

@section('content')
    <div class="card">
        <div class="card-header d-sm-flex d-block">
            <div class="me-auto mb-sm-0 mb-3">
                <h4 class="card-title mb-2">รายการสมัครสมาชิก</h4>
                {{-- <span>Lorem Ipsum sit amet</span> --}}
            </div>
            {{-- <a href="javascript:void(0);" class="btn btn-info light me-3"><i
                class="las la-download scale3 me-2"></i>Download Csv</a> --}}
            {{-- <a href="javascript:;" onclick="notifyMe()" class="btn btn-info">คลิ๊กผมหน่อยครับ</a> --}}
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-responsive-sm">
                    <thead>
                        <th>#</th>
                        <th>ชื่อ</th>
                        <th>ไอดีไลน์</th>
                        <th>เบอร์โทรศัพท์</th>
                        <th>สถานะ</th>
                        <th>วันที่สมัคร</th>
                    </thead>
                    <tbody>
                        @php
                            $i = 0;
                        @endphp
                        @foreach ($users as $user)
                            <tr>
                                <td>
                                    <div class="custom-control custom-checkbox checkbox-success me-3">
                                        <input type="checkbox" class="form-check-input" id="customCheckBox{{ $i }}"  onchange="checkBoxToggleTable(this)" required="" />
                                        <label class="custom-control-label" for="customCheckBox{{ $i }}"></label>
                                    </div>
                                </td>
                                <td>
                                    {{ $user->name }}
                                </td>
                                <td>
                                    {{ $user->line_id }}
                                </td>
                                <td>
                                    {{ $user->phone_number }}
                                </td>
                                <td>
                                    <span class="badge badge-warning">PENDING</span>
                                    <span class="badge badge-success d-none">CONFIRM</span>
                                </td>
                                <td>
                                    {{ $user->created_at }}
                                </td>
                            </tr>
                        @endforeach
                        {{-- <tr>
                            <th>1</th>
                            <td>Kolor Tea Shirt For Man</td>
                            <td><span class="badge badge-primary">Sale</span></td>
                            <td>January 22</td>
                            <td class="color-primary">$21.56</td>
                        </tr> --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="add-route-modal">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <form onsubmit="storeRoute(event, this)" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Route</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Route Name</label>
                        <input type="text" class="form-control input-default" name="name" placeholder="Please Fill Route Name" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function() {

        });

        function checkBoxToggleTable(el)
        {
            const self = $(el);

            const $tr = self.closest('tr');
            $tr.toggleClass('table-success');
            swal('ถามก่อน', ' ', 'info');

            return changeBadgeStatus($tr);
        }

        function changeBadgeStatus($tr)
        {

            $td = $tr.find('td:eq(4)');
            $td.find('.badge-warning').toggleClass('d-none');
            $td.find('.badge-success').toggleClass('d-none');
        }
    </script>
@endsection