@extends("common.layout")

@section("header")
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
@endsection

@section("content")
<h1>
    <a href="{{ route('config.access') }}">IP 설정</a>
</h1>
<section class="mb-3">
    <main>
        <form action="{{ route('config.access') }}" class="search-form" method="GET">
            @csrf

            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><input type="checkbox" name="is_all" value="1" @checked(Request::get("is_all"))> 전체보이기</span>
                </div>
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>


<section>
    <header>IP 목록</header>
    <main>
        <table class="table table-striped table-hover table-management">
            <thead>
                <tr>
                    <th>IP</th>
                    <th>name</th>
                    <th>비고</th>
                    <th>혀용여부</th>
                    <th>제한시간</th>
                    <th>등록자</th>
                    <th>등록일</th>
                    <th>관리</th>
                </tr>
                <tr>
                    <td><input type="text" name="ip" value="" class="form-control" /></td>
                    <td><input type="text" name="name" value="" class="form-control" /></td>
                    <td>
                        <textarea name="memo" row="5" class="form-control form-control-sm" style="width: 300px;"></textarea>
                    </td>
                    <td>
                        <select class="form-control is_allow" name="is_allow">
                            <option value="1">허용</option>
                            <option value="2">일시허용</option>
                            <option value="0" selected>비허용</option>
                        </select>
                    </td>
                    <td>
                        <input type="date" name="end_date" id="end_date" value="" class="form-control" disabled>
                        <input type="time" name="end_time" id="end_time" value="" class="form-control" disabled>
                    </td>
                    <td></td>
                    <td></td>
                    <td>
                        <button class="btn btn-sm btn-primary onSubmit" type="button">등록</button>
                    </td>
                </tr>
            </thead>
            <tbody>

                @foreach ($list as $item)
                    @php
                        $isAllow = true;
                        if ( $item->is_allow == 0 || ( $item->is_allow == 2 && $item->ended_at < date('Y-m-d H:i:s')))  {
                            $isAllow = false;
                        }

                    @endphp

                    <tr @class([''])>
                        <td><input type="text" name="ip" value="{{ $item->ip }}" class="form-control" /></td>
                        <td><input type="text" name="name" value="{{ $item->name }}" class="form-control" /></td>
                        <td>
                            <textarea name="memo" row="5" class="form-control form-control-sm" style="width: 300px;">{{ $item->memo }}</textarea>
                        </td>
                        <td>
                            <select class="form-control is_allow" name="is_allow">
                                <option value="1" @selected($item->is_allow == 1)>허용</option>
                                <option value="2" @selected($item->is_allow == 2)>일시허용</option>
                                <option value="0" @selected($item->is_allow == 0)>비허용</option>
                            </select>
                        </td>
                        <td>
                            <input type="date" name="end_date" id="end_date{{ $item->id }}" value="{{ $item->ended_at ? date('Y-m-d', strtotime($item->ended_at)) : '' }}" class="form-control" @disabled($item->is_allow != 2) />
                            <input type="time" name="end_time" id="end_time{{ $item->id }}" value="{{ $item->ended_at ? date('H:i', strtotime($item->ended_at)) : ''  }}" class="form-control" @disabled($item->is_allow != 2) />
                        </td>
                        <td>{{ $item->user->name }}</td>
                        <td>{{ date('Y-m-d H:i', strtotime($item->created_at)) }}</td>
                        <td>
                            @if ( $isAllow )
                                <button class="btn btn-sm btn-primary onSubmit" type="button" data-id="{{ $item->id }}">저장</button>
                                <button class="btn btn-sm btn-danger onRemove" data-id="{{ $item->id }}">삭제</button>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </main>
</section>

@endsection

@push("script")
    <script>
        $(function() {
            $('.is_allow').on("change", function() {
                const target = $(this).closest('tr').find('input[name=end_date], input[name=end_time]');
                target.prop("disabled", $(this).val() != 2);
                if ( $(this).val() == 2) {
                    if ( $.isEmptyObject(window.datepickers[ $(this).closest('tr').find('input[name=end_date]').attr('id') ]) ) {
                        onLoadDatePicker()
                        onLoadTimePicker()
                    }
                } else {
                    $.each(target, function() {
                        target.val("");
                    })
                }
            });

            $('.onSubmit').on("click", async function() {
                const target = $(this).closest('tr');
                if ( $.isEmptyObject(target.find("input[name=ip]").val())) {
                    alertify.alert("error", "아이피를 입력하세요");
                    return false;
                }

                if ( target.find("select[name=is_allow] option:selected").val() == 2 ) {
                    if ( $.isEmptyObject(target.find("input[name=end_date]").val()) || $.isEmptyObject(target.find("input[name=end_time]").val()) ) {
                        alertify.alert("error", "접속 허용 시간을 입력하세요");
                        return false;
                    }
                }


                const params = {}
                $.each(target.find("input, select, textarea"), function() {
                    params[$(this).attr('name')] = $(this).val();
                })


                const result = await customFetch("{{ route('api.access.modify') }}", {
                    method: "POST",
                    body : JSON.stringify({"id" : $(this).data('id'), ...params}) ,
                    headers: { "Content-Type" : "application/json" }
                });

                if ( result.status ) {
                    alertify.alert("success", "완료되었습니다.", () => { location.reload(); });

                } else {
                    alertify.alert("error", result.message);
                }

            })

            $('.onRemove').on("click",  function() {
                alertify.confirm("알림", "제거하시겠습니까?", async () => {
                    const result = await customFetch("{{ route('api.access.remove') }}", {
                        method: "POST",
                        body : JSON.stringify({"id" : $(this).data('id')}) ,
                        headers: { "Content-Type" : "application/json" }
                    });

                    if ( result.status ) {
                        alertify.alert("success", "완료되었습니다.", () => { location.reload(); });

                    } else {
                        alertify.alert("error", result.message);
                    }
                },  () => {})
            })
        })

    </script>
@endpush