@extends("common.layout")

@section("content")
<h1 class="split">
    <a href="{{ route('user.list') }}">회원 목록</a>
    @can('create.user', $User)
        <button type="button" class="btn btn-primary" onclick="location.href='{{ route('user.add') }}'">회원 등록</button>
    @endcan
</h1>

<section>
    <main>
        <form action="{{ route('user.list') }}" class="search-form" method="GET">
            @csrf

            <div class="search-input-wrap">
                <div class="search-input">
                    <label for="register_start_date">가입일</label>
                    <div class="input-group">
                        <input class="form-control form-control-sm" type="date" id="register_start_date" name="register_start_date"
                            @if (Request::get("register_start_date"))
                                value="{{ Request::get("register_start_date") }}"
                            @endif
                        ><input class="form-control form-control-sm" type="date" name="register_end_date"
                            @if (Request::get("register_end_date"))
                                value="{{ Request::get("register_end_date") }}"
                            @endif
                        >
                    </div>
                </div>
                <div class="search-input">
                    <label for="activated">활성구분</label>
                    <select class="form-select form-select-sm" name="activated" id="activated">
                        <option value="all" @selected(Request::get("activated") === null)>전체</option>
                        <option value="0" @selected(Request::get("activated") === "0")>휴면</option>
                        <option value="1" @selected(!Request::has("activated") or Request::get("activated") == "1")>활성</option>
                    </select>
                </div>
                <div class="search-input">
                    <label for="role">역할</label>
                    <select class="form-select form-select-sm" name="role" id="role">
                        <option value="" @selected(empty(Request::get("role")))>전체</option>
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}" @selected(Request::get("role") == $role->id)>{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="search-input">
                    <label for="charged_by">담당자</label>
                    <select class="form-select form-select-sm" name="charged_by" id="charged_by">
                        <option value="" @selected(empty(Request::get("charged_by")))>전체</option>
                        @foreach ($staffs as $staff)
                            <option value="{{ $staff->id }}" @selected(Request::get("charged_by") == $staff->id)>{{ $staff->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="search-input">
                    <label for="name">이름</label>
                    <input class="form-control form-control-sm" type="text" name="name" id="name" autocomplete='on'
                        @if (Request::get("name"))
                            value="{{ Request::get("name") }}"
                        @endif
                    >
                </div>
                <div class="search-input">
                    <label for="phone">휴대폰</label>
                    <input class="form-control form-control-sm" type="text" name="phone" id="phone" oninput="oninputPhone(this)" maxlength="13" autocomplete='on'
                        @if (Request::get("phone"))
                            value="{{ Request::get("phone") }}"
                        @endif
                    >
                </div>
                <div class="search-input">
                    <label for="edm_id">아이디</label>
                    <input class="form-control form-control-sm" type="text" name="edm_id" id="edm_id" autocomplete='on'
                        @if (Request::get("edm_id"))
                            value="{{ Request::get("edm_id") }}"
                        @endif
                    >
                </div>
                <div class="search-input">
                    <label for="online_status">인강상태</label>
                    <select class="form-select form-select-sm" name="online_status" id="online_status">
                        <option value="">전체</option>
                    </select>
                </div>
                <div class="search-input">
                    <label for="academy_status">어학원상태</label>
                    <select class="form-select form-select-sm" name="academy_status" id="academy_status">
                        <option value="">전체</option>
                    </select>
                </div>
                <div class="search-input">
                    <input type="hidden" name="paginate"
                        @if (Request::get("paginate"))
                            value="{{ Request::get("paginate") }}"
                        @endif
                    >
                    <input type="hidden" name="order_by"
                        @if (Request::get("order_by"))
                            value="{{ Request::get("order_by") }}"
                        @else
                            value="id"
                        @endif
                    >
                    <input type="hidden" name="sort"
                        @if (Request::get("sort"))
                            value="{{ Request::get("sort") }}"
                        @else
                            value="desc"
                        @endif
                    >
                </div>
            </div>
            <button type="submit" class="btn btn-secondary search-button">조회</button>
        </form>
    </main>
</section>

<section>
    <header>
        <h6>조회 결과 <strong>{{ $users->total() }}</strong>명</h6>

        <button type="button" class="btn btn-sm btn-success" onclick="excelDownload('.search-form', '{{ route('api.user.excel') ?? '' }}')"><i class="bi bi-file-spreadsheet"></i></button>
    </header>

    <main>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    {!! \BaseHelper::sortHead('번호', 'id', 'number align-right', 'desc') !!}
                    {!! \BaseHelper::sortHead('이름', 'name') !!}
                    {!! \BaseHelper::sortHead('아이디', 'edm_id') !!}
                    {!! \BaseHelper::sortHead('가입일시', 'created_at') !!}
                    <th>활성구분</th>
                    <th>역할</th>
                    <th>휴대폰</th>
                    <th>담당자</th>
                    <th class="text-center">마케팅 수신 동의</th>
                    <th>인강 상태</th>
                    <th>어학원 상태</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                    @php
                        $userDetailRoute = route('user.detail') . "/{$user->id}";
                    @endphp
                    <tr @if (!$user->activated) class="deactivated" @endif>
                        <td class="number align-right">
                            {{ $user->id }}
                        </td>
                        <td>
                            @if (!empty($user->photo))
                                <img class="thumbnail" src="{{ $user->photo_url }}">
                            @endif
                            <a href="{{$userDetailRoute}}">{{ $user->name }}</a>
                        </td>
                        <td>{{ $user->edm_id }}</td>
                        <td class="number">
                            @if (isset($user->created_at))
                                <span>{{ explode(" ", $user->created_at)[0] }}</span>
                                <span>{{ explode(" ", $user->created_at)[1] }}</span>
                            @else
                                <span>-</span>
                            @endif
                        </td>
                        <td>
                            @if ($user->activated)
                                활성
                            @else
                                비활성
                            @endif
                        </td>
                        <td>
                            {{ $user->role->name ?? "-" }}
                        </td>
                        <td class="number">
                            @if ($user->phone_code and $user->phone_code!='82') +{{ $user->phone_code }} @endif
                            {{ \BaseHelper::formatPhoneNumber($user->phone) }}
                        </td>
                        <td>
                            @if (isset($user->chargedStaff))
                                {{ $user->chargedStaff->name }}
                            @else
                                -
                            @endif
                        </td>
                        <td class="text-center">
                            @if($user->is_accepted_email)
                                <i class="bi bi-envelope-check"></i>
                            @endif
                            @if($user->is_accepted_phone)
                                <i class="bi bi-phone-vibrate"></i>
                            @endif
                        </td>
                        <td>수강중</td>
                        <td>수강예정</td>
                    </tr>
                @endforeach

            </tbody>
        </table>
    </main>

    <footer>
        <div class="pagination-wrap">
            {{ $users->links() }}

            <select id='paginate-control' class='form-select form-select-sm-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
            </select>
        </div>
    </footer>
</section>

@endsection

@push("script")
<script>
    window.addEventListener("load", () => {
        let paginationElem = document.querySelector(".data-length-select");
        let paginationHiddenElem = document.querySelector('input[name="paginate"]');
        let formElem = document.querySelector(".search-form");

        // paginationElem.value = paginate;
        paginationElem.addEventListener("change", (e) => {
            paginationHiddenElem.value = e.target.value;
            formElem.submit();
        });
    });

    // document.addEventListener("DOMContentLoaded", () => {
    // });
</script>
@endpush