@extends("common.layout-popup")

@section("header")
{!! resource('js/form.js') !!}

<style>
.scroll-section main { max-height: 300px; overflow-y: scroll}
</style>
@endsection

@section("page-title", $coupon?->name." 쿠폰 지급")

@section("content")
@if (! $coupon)
<section>
    <main>
        <form action="{{ route("promotion.coupon.popup.distribute-coupon") }}" method="get" class="search-form">
            @csrf
            @foreach ( $users as $userId )
            <input type="hidden" name="user_ids[]" value="{{ $userId }}" />
            @endforeach
            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="coupon_id">쿠폰</label>
                    <select name="coupon_id" id="coupon_id" class="form-select form-select-sm">
                        @foreach ( $coupons as $coupon )
                            <option value="{{ $coupon->id }}">{{ $coupon->name }}</option>
                        @endforeach
                    </select>
                </div>
                <button class="btn btn-sm btn-outline-dark search-button">적용</button>
            </div>

        </form>
    </main>
</section>
@else

<div class="alert alert-info">
    검색 선택된 사용자에게 순차적으로 쿠폰을 지급합니다.
    @if ($coupon->is_single_use_per_id)
        ID당 1회만 발급됩니다.
    @endif
</div>

<div class="layout-2-cols">
    <div>
        <section class="scroll-section">
            <header>
                지급 가능 쿠폰
                <input type="hidden" id="available_coupon_count" value="{{ count($unDistributedCoupons) }}">

                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-available-coupons"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="limit-height">
                @if (count($unDistributedCoupons) == 0)
                <div class="alert alert-danger">
                    지급 가능한 쿠폰이 없습니다.
                </div>
                @else
                <table class="table table-striped">
                    <colgrop>
                        <col width="30">
                    </colgrop>
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th class="text-start">쿠폰코드</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($unDistributedCoupons as $issuedCoupon)
                            <tr class="text-center">
                                <td>{{ $issuedCoupon->id }}</td>
                                <td class="text-start">{{ $issuedCoupon->code }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                @endif
            </main>
        </section>

        <section class="mt-3">
            <header>
                <div>지급된 쿠폰</div>
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-issued-coupons"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="limit-height" style="--height: 300px;">
                <table class="table table-striped">
                    <colgrop>
                        <col width="30">
                    </colgrop>
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th class="text-start">쿠폰코드</th>
                            <th class="text-start">사용자 (전화번호뒷자리)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($distributedCoupons as $issuedCoupon)
                            <tr class="text-center">
                                <td>{{ $issuedCoupon->id }}</td>
                                <td class="text-start">{{ $issuedCoupon->code }}</td>
                                <td class="text-start"><a href="javascript:edmPopupOpen('{{ route("user.detail", ['id' => $issuedCoupon->user_id, 'popup' => 1]) }}', 'userDetailPop{{ $issuedCoupon->user_id }}')">{{ $issuedCoupon->user->name }}</a> ({{ substr($issuedCoupon->user->phone, -4) }})</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>
    </div>

    <div>
        <section>
            <header>
                사용자
            </header>

            <main class="limit-height" style="--height: 1000px">
                @if (count($unDistributedCoupons) > 0)
                    @if ($coupon->isIssueDateInvalid())
                        <div class="alert alert-danger">
                            @if ($coupon->issue_start_date > now())
                                발행 시작일 전입니다.
                            @else
                                발행 기간이 만료되었습니다.
                            @endif
                        </div>
                    @else
                    <form id="user-find-form" action="{{ route('api.user.find') }}" class="mb-4" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="input-group input-group-sm mb-2">
                            <input class="form-control form-control-sm" type="text" name="keyword" autocomplete='on' placeholder="이름, 이메일, 전화번호 검색">
                            <button type="button" class="btn btn-secondary" onclick="findUser()"><i class="bi bi-search"></i></button>
                        </div>

                        <div class="input-group input-group-sm">
                            <span class="input-group-text">사용자 목록파일 (CSV, EXCEL)</span>
                            <input type="file" name="user_list_file" class="form-control">
                            <button type="button" class="btn btn-secondary" onclick="findUser()">업로드</button>
                        </div>

                        <div class="mt-2 alert alert-success"><a href="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/sample/SampleCouponUser.xlsx"><i class="bi bi-file-spreadsheet"></i>샘플 엑셀파일 다운로드</a></div>
                    </form>

                    <form id="distribute-form" action="{{ route('api.promotion.coupon.distribute-coupons') }}" method="POST">
                        <input type="hidden" name="coupon_id" value="{{ $coupon->id }}">

                        @csrf
                        <table id="users-table" class="table table-striped">
                            <colgrop>
                                <col width="30">
                                <col width="30">
                            </colgrop>
                            <thead>
                                <tr class="text-center">
                                    <th><input class="form-check-input" type="checkbox" name="select_all" onclick="selectAllUsers(this)"></th>
                                    <th>번호</th>
                                    <th class="text-start">이름</th>
                                    <th class="text-start">이메일</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($users != null)
                                    @foreach ($users as $user)
                                    <tr class="text-center">
                                        <td>
                                            <input class="form-check-input" type="checkbox" name="users[]" value="{{ $user->id }}" onclick="checkSelected(this)">
                                        </td>
                                        <td>{{ $user->id }}</td>
                                        <td class="text-start">{{ $user->name }}</td>
                                        <td class="text-start">{{ $user->email }}</td>
                                    </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>

                        <div class="input-group justify-content-end">
                            <span class="input-group-text">
                                <input class="form-check-input mt-0 me-1" type="checkbox" name="notify" value="1" checked> 지급 안내 알림톡 발송
                            </span>
                            <button id="distribute-btn" type="submit" class="btn btn-primary" {{ $users == null ? "disabled" : "" }}>쿠폰 지급</button>
                        </div>
                    </form>
                    @endif
                @endif
            </main>
        </section>
    </div>
</div>

@endif
@endsection

@push("script")
<script>
    function findUser()
    {
        const targetUrl = $('#user-find-form').attr('action');
        const formData = new FormData($('#user-find-form')[0]);

        $.ajax({
            type: "POST",
            data: formData,
            dataType: "json",
            url: targetUrl,
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
            },
            success: function(response) {
                if (response.length > 0) {
                    let tbody = $("#users-table tbody");
                    //tbody.empty();
                    response.forEach(function(user) {
                        if (tbody.find(`input[name="users[]"][value="${user.id}"]`).length === 0) {
                            let row = `
                                <tr class="text-center">
                                    <td>
                                        <input class="form-check-input" type="checkbox" name="users[]" value="${user.id}" onclick="checkSelected(this)">
                                    </td>
                                    <td>${user.id}</td>
                                    <td class="text-start">${user.name}</td>
                                    <td class="text-start">${user.email}</td>
                                </tr>
                            `;
                            tbody.append(row);
                        }
                    });
                } else {
                    $('#distribute-btn').prop('disabled', true);
                    alertify.alert('Message', 'No users found');
                }
            },
            error: function(xhr, status, error) {
                alertify.alert('Error', xhr.responseJSON.message);
            }
        });
    }

    function checkSelected(obj)
    {
        const $obj = $(obj);
        let available_coupon_count = $('#available_coupon_count').val();
        let checkboxes = $("#users-table tbody").find('input[name="users[]"]');
        let checkedCheckboxes = checkboxes.filter(':checked');

        if (checkedCheckboxes.length > 0) {
            $('#distribute-btn').prop('disabled', false);
            if (checkedCheckboxes.length > available_coupon_count) {
                alertify.alert('error', '지급 가능한 쿠폰은 '+ available_coupon_count +'개입니다.');
                $obj.prop('checked', false);
                return true;
            }
        } else {
            $('#distribute-btn').prop('disabled', true);
        }
    }

    function selectAllUsers(obj)
    {
        const $obj = $(obj);
        let available_coupon_count = $('#available_coupon_count').val();
        let checkboxes = $("#users-table tbody").find('input[name="users[]"]');

        if ($obj.prop('checked')) {
            checkboxes.prop('checked', true);
            if (checkSelected()) {
                let i = 0;
                checkboxes.each(function(){
                    i++;
                    if (i > available_coupon_count) $(this).prop('checked', false);
                });
            }
        } else {
            checkboxes.prop('checked', false);
        }
    }

    $(document).ready(function() {
        fitWindowHeight();

        $('#user-find-form').submit(function(e){
            e.preventDefault();
            findUser();
        });
    });
</script>
@endpush