@extends('fronted.layout.main')
@section('adcontent')
<div class="container-fluid mt-3">
    <div class="container">
        <!-- referral button -->
        <div class="d-flex justify-content-end align-items-center mb-2">
            <button id="adminReferalBtn" class="btn btn-warning" type="button">Refer</button>
        </div>
        <!-- show its refers -->
        <div class="table-responsive dataTable">
            <table class="table  text-center roomSeatTable">
                <thead class="text-uppercase">
                    <tr>
                        <th>S No</th>
                        <th>Date</th>
                        <th>Referral Name</th>
                        <th>Mobile</th>
                        <th>Refer To</th>
                        <th>Mobile No</th>
                        <th>Referral Code</th>
                        <th>Referral Count</th>
                        <th>Offer Type</th>
                        <th>Referred Offer Type</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody class="text-capitalize">
                    @php $count = 1 @endphp
                    @forelse ($referedList as $item)
                    <tr>
                        <td>{{$count++}}</td>
                        <td>{{ \Carbon\Carbon::parse($item->created_at)->format('d-M-Y') }}</td>
                        <td>{{ $item->adminName }}</td>
                        <td>{{ $item->mobile }}</td>
                        <td>{{ $item->refered_name }}</td>
                        <td>{{ $item->refered_mobile }}</td>
                        <td>{{ $item->referral_code }}</td>
                        <td>{{ $item->referral_count }}</td>
                        <td>{{ $item->discount }} {{$item->offer_type == "discount" ? ("%".$item->offer_type)  : $item->offer_type}}</td>
                        <td>{{ $item->referral_discount }} {{$item->offer_type == "discount" ? ("%".$item->offer_type)  : $item->offer_type}}</td>
                        <td>
                            <div class="d-flex justify-content-between align-items-center">
                                <span>{{ $item->status == 1 ? "wating" : 'redemed' }}</span>
                                <button data-message='{{$item->active_refer_message}}' class="btn showMessageModal" type="button"><i class="fa-solid fa-circle-info" style="color: #FFD43B;"></i></button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="12">Data not found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="adminReferalModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="adminReferalModalLable" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="adminReferalModalLable">Refer Application</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="referAmdinsReferForm" action="{{route('referAdmin.refer.post')}}" method="post">
                        @csrf
                        <div class="form-group mb-2">
                            <label for="refer_name" class="form-lable">Name</label>
                            <input class="form-control" id="refer_name" type="text" name="referal_name" oninput="this.value = this.value.match(/^[A-Za-z\s]+$/) ? this.value : this.value.replace(/[^A-Za-z\s]/g, '')" required>
                        </div>
                        <div class="form-group mb-2">
                            <label for="referal_mobile" class="form-lable">Mobile</label>
                            <input class="form-control" id="referal_mobile" type="text" maxlength="10" minlength="10" name="referal_mobile" oninput="validateNumber(this)" required>
                        </div>
                        <div class="setupMessage border border-1 p-2" style="font-size:0.8rem"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="referAdminFromBtn" type="button" class="btn btn-warning">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="activeReferMessageModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="activeReferMessageModalLable" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="activeReferMessageModalLable">Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#adminReferalBtn").on('click', function() {
            // open  admin referal modal
            // get setup data 
            $.ajax({
                type: "get",
                url: "{{route('get.admin.refer.setup')}}",
                success: function(response) {
                    $('#adminReferalModal').on('show.bs.modal', function() {
                        const data = response.data;
                        let message = JSON.parse(data.message);
                        let setupMessage = $(".setupMessage");
                        setupMessage.empty();
                        let responseDiv = $("<div>").text(message.responseMessage);
                        let termConditionList = $("<ul>");
                        let termAndCondtions = message.termsAndConditions;
                        if (termAndCondtions != null && termAndCondtions.length > 0) {
                            $.each(termAndCondtions, function(indexInArray, valueOfElement) {
                                let listItem = $("<li>").text(valueOfElement);
                                termConditionList.append(listItem);
                            });
                        }
                        setupMessage.append(responseDiv, termConditionList);
                    }).modal('show');
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        'text': 'Not Active any referal  program'
                    })
                }
            });
        });

        $("#referAdminFromBtn").on('click', function() {
            let form = $("#referAmdinsReferForm");
            let refer_name_input = $("#refer_name");
            let refer_mobile_input = $('#referal_mobile');
            if (refer_name_input.val() === "" || refer_name_input.val() == undefined) {
                refer_name_input.addClass('is-invalid');
                return false;
            }
            if (refer_mobile_input.val() === "" || refer_mobile_input.val() == undefined) {
                refer_mobile_input.addClass('is-invalid');
                return false;
            }
            form.submit();
        });

        $(".showMessageModal").on('click', function() {
            const messageData = $(this).data('message');
            let messageModal = $("#activeReferMessageModal");
            let modalBody = messageModal.find('.modal-body');
            modalBody.empty();
            let messagePera = messageData.responseMessage;
            let ulData = messageData.termsAndConditions;
            let ul = $('<ul>');
            let p = $("<p>");

            p.html(messagePera);
            ulData.forEach(item => {
                let li = $("<li>");
                li.html(item);
                ul.append(li);
            });

            modalBody.append(p, ul);
            messageModal.modal('show');
        });
    });
</script>
@endsection