@extends('fronted.layout.main')
@section('adcontent')
<style>
    .form-check-input:checked {
        background-color: #ffc107;
        border-color: #ffc107;
    }

    .error-message {
        font-size: 0.6rem;
    }
</style>
<div class="container-fluid mt-1">
    @if ($errors->any())
    <script>
        $(document).ready(function() {
            $("#setupModal").modal('show');
        });
    </script>
    @endif

    <div class="heading position-relative z-1">
        <div class="d-flex justify-content-evenly flex-fill">
            <div class="col-lg-7 col-md-6">
                <h6 class="float-end border border-4 border-dark-subtle p-2 px-4 rounded shadow-sm bg-light-subtle text-uppercase">Tenant Refer & Earn</h6>
            </div>
            <div class="col-lg-5 col-md-6">
                <button class="btn text-black border-3 btn-outline-warning text-bg-light fw-medium  text-uppercase float-end" data-bs-toggle="modal" data-bs-target="#setupModal">Setup</button>
            </div>
        </div>
    </div>
    <hr class="position-absolute start-0 top-0 w-100 p-1 bg-dark z-0 overflow-hidden">
    <div class="table-responsive dataTable">
        <table class="table  text-center roomSeatTable align-middle">
            <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>Discount</th>
                    <th>For Month</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody class="text-capitalize">
                @php
                $s_no = 1;
                $message = "";
                @endphp
                @forelse ($referedHosteled as $item)
                <tr>
                    <td>{{$s_no ++}}</td>
                    <td>{{ \Carbon\Carbon::parse($item->created_at)->format('d-M-Y') }}</td>
                    <td>{{ $item->studentName }}</td>
                    <td>{{ $item->mobile }}</td>
                    <td>{{ $item->refered_name }}</td>
                    <td>{{ $item->refered_mobile }}</td>
                    <td>{{ $item->referal_code }}</td>
                    <td>{{ $item->referal_count }}</td>
                    <td>{{ $item->discount }} %</td>
                    <td>{{ $item->for_month }}</td>
                    <td>
                        @if($item->status === 0)
                        <button class="btn border-0" type="button" disabled>Waiting</button>
                        <button class="btn border-0 text-danger deleteReferRecords" data-recordid="{{$item->id}}" type="button"><i class="fas fa-trash-can"></i></button>
                        @elseif($item->status === 1)
                        <button class="btn border-0" type="button" disabled>Expired</button>
                        <button class="btn border-0 text-danger deleteReferRecords" data-recordid="{{$item->id}}" type="button"><i class="fas fa-trash-can"></i></button>
                        @elseif($item->status === 2)
                        <button type="button" class="btn border-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="Name : {{ e($item->studentDetails->candidatename) }}<br> Join Date : {{ e( \Carbon\Carbon::parse($item->studentDetails->date)->format('d-M-Y') ) }}">
                            Redeemed
                        </button>
                        @endif
                        <button data-message='{{ $item->active_refer_message }}' class="btn showMessageModal" type="button"><i class="fa-solid fa-circle-info" style="color: #FFD43B;"></i></button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="10">Data not found</td>
                </tr>
                @endforelse

            </tbody>
        </table>
    </div>
</div>
<!-- start setup modal -->
<div class="modal fade" id="setupModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="setupModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header flex-fill">
                <div class="container d-flex justify-content-center z-1">
                    <h5 class="text-center border  border-4 border-dark-subtle p-2 px-4 rounded shadow-sm bg-light-subtle text-uppercase">Setup</h5>
                </div>
                <hr class="position-absolute start-0 top-25 w-100 p-1 bg-dark z-0 overflow-hidden">
                <button type="button" class="btn-close position-absolute top-0 end-0 mx-1 my-1" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="referAndEarnSetupForm" action="{{route('refer_and_earn.store')}}" method="post">
                    @csrf
                    <div class="row my-2">
                        <div class="col-lg-6">
                            <label class="d-block form-control form-label text-uppercase" for="referral_allowed">How many Referral allowed</label>
                        </div>
                        <div class="col-lg-6">
                            <input type="number" name="ref_allowed" min="0" value="{{ optional($referEarnSetup)->ref_allowed  }}" class="form-control" id="input_add" required>
                            @error('ref_allowed')
                            <span class="text-danger error-message">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div id="addOnDiv" class="row my-2">

                    </div>
                    <div class="row g-2 my-2">
                        <div class="col-lg-6">
                            <label class="d-block form-control form-label text-uppercase" for="referal_months">How many Month you want to give Discount</label>
                        </div>
                        <div class="col-lg-6">
                            <input type="number" name="ref_total_months" min="0" value="{{optional($referEarnSetup)->ref_total_months}}" class="form-control" id="referal_months" required>
                            @error('ref_total_months')
                            <span class="text-danger error-message">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-lg-4">
                            <label class="d-block form-control form-label text-uppercase">referal offer duration</label>
                        </div>
                        <div class="col-lg-2">
                            <input class="form-control" type="date" value="{{optional($referEarnSetup)->ref_start_date }}" name="ref_start_date" id="referStartDate" required />
                        </div>
                        <div class="col-lg-2">
                            <input class="form-control" type="time" value="{{optional($referEarnSetup)->ref_start_time ? \Carbon\Carbon::parse($referEarnSetup->ref_start_time)->format('H:i') :''}}" name="ref_start_time" id="referStartTime" required />

                        </div>
                        <div class="col-lg-2">
                            <input class="form-control" type="date" value="{{optional($referEarnSetup)->ref_end_date}}" name="ref_end_date" id="referEndDate" required />
                        </div>
                        <div class="col-lg-2">
                            <input class="form-control" type="time" value="{{optional($referEarnSetup)->ref_end_time  ? \Carbon\Carbon::parse($referEarnSetup->ref_end_time)->format('H:i') :''}}" name="ref_end_time" id="referEndTime" required />
                        </div>
                        <div class="col-12">
                            @error('ref_end_time')
                            <span class="text-danger error-message">{{ $message }}</span>
                            @enderror
                            @error('ref_end_date')
                            <span class="text-danger error-message">{{ $message }}</span>
                            @enderror
                            @error('ref_start_time')
                            <span class="text-danger error-message">{{ $message }}</span>
                            @enderror
                            @error('ref_start_date')
                            <span class="text-danger error-message">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-lg-10">
                            <input class="form-control text-capitalize" type="text" name="termsConditions" id="TermsAndConditions" placeholder="Enter Terms and condition one by one">
                        </div>
                        <div class="col-lg-2">
                            <button class="btn btn-warning" type="button" id="termsAndCondtionAddBtn" data-bs-toggle="tooltip" data-bs-placement="top" title="Add Terms And Conditons"><i class="fa-solid fa-plus fa-lg"></i></button>
                        </div>
                    </div>
                    <input type="hidden" name="terms_and_conditions" id="termsAndConditionsInput">
                    <input type="text" hidden name="message" id="referEarnMessageStore">

                    <div class="container border border-2 border-black rounded my-2">
                        <p id="referEarnMessage">
                            Refer your smart Hostel/pg to your friends and get <span id="firstDiscount">___</span><span id="secondDiscount">___</span>
                            Percentage discount on your next <span class="discountMonths">{{optional($referEarnSetup)->ref_total_months ?? '____'}}</span> months rent by Hostel/Pg admin.<br>Discount applied when your friend take registration in your Hostel/Pg. For discount remind your hostel/pg admin.<br>
                            <span class="text-warning">More T&C</span>
                        </p>
                        <ol id="termAndCondtionsList">
                            <li>Maximum <span id="offerPeriodsTime">{{optional($referEarnSetup)->ref_total_months ?? "____"}}</span> referral allowed in offer periods</li>
                            <li>offer duration from(<span id="offerStartDate">{{ optional($referEarnSetup)->ref_start_date ? \Carbon\Carbon::parse($referEarnSetup->ref_start_date)->format('d-M-Y') : "____" }}
                                </span> )( <span id="offerStartTime">{{optional($referEarnSetup)->ref_start_time ? \Carbon\Carbon::parse($referEarnSetup->ref_start_time)->format('g:i A') : "____"}}</span> ) to
                                ( <span id="offerEndDate">{{optional($referEarnSetup)->ref_end_date ? \Carbon\Carbon::parse($referEarnSetup->ref_end_date)->format('d-M-Y') : "____"}}</span> )( <span id="offerEndTime">{{optional($referEarnSetup)->ref_end_time ?  \Carbon\Carbon::parse($referEarnSetup->ref_end_time)->format('g:i A') : "____"}}</span> ).
                            </li>
                            <li>
                                For,<span id="referDiscounts">_____</span>.
                            </li>
                            <li>
                                Earned referral discount is applicable for your next <span class="discountMonths">{{optional($referEarnSetup)->ref_total_months ?? '____'}}</span> months rent.
                            </li>
                            @if(optional($referEarnSetup)->terms_and_conditions !== null)
                            @foreach(optional($referEarnSetup)->terms_and_conditions as $terms)
                            <li>{{$terms}} <button class="remove-btn btn btn-sm ml-2" data-bs-toggle='tooltip' data-bs-placement='top' title='remove'><i class="fa-solid fa-trash-can text-danger"></i> </button> </li>
                            @endforeach
                            @endif
                        </ol>
                    </div>
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="is_active" id="offerActiveYes" value="1" {{optional($referEarnSetup)->is_active === 1 ? "checked" : ""  }}>
                            <label class="form-check-label" for="offerActiveYes">Active</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="is_active" id="offerActiveNo" {{optional($referEarnSetup)->is_active === 0 ? "checked" : ""  }} value="0">
                            <label class="form-check-label" for="offerActiveNo">InActive</label>
                        </div>
                    </div>
                    @error('is_active')
                    <p class="text-danger error-message text-center">{{ $message }}</p>
                    @enderror
                </form>
            </div>
            <div class="modal-footer">
                <button id="referAndEarnSetupFormBtn" type="button" class="btn btn-warning"> {{ (optional($referEarnSetup)->ref_allowed) !== null ? 'Update' : 'Save' }} </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>
<!-- end setup modal -->
<script>
    function numberToword(number) {
        return numberToWords.toWords(number);
    }

    function addInputsDynamicaly(lenth, data) {
        var formRow = $("#addOnDiv");
        let firstDiscount = $("#firstDiscount");
        let secondDiscount = $("#secondDiscount");
        let referDiscounts = $("#referDiscounts");
        let referDiscountsMessage = '';

        formRow.empty();
        // Get the input value and convert it to an integer
        var inputValue = parseInt(lenth);
        // Loop and append new elements based on the inputValue
        for (var i = 1; i <= inputValue; i++) {
            // Create a new div with a label inside it
            var firstDiv = $("<div>").addClass('col-lg-6');
            var secondDiv = $('<div>').addClass('col-lg-6');
            var label = $("<label>").addClass('d-block form-control form-label text-uppercase').text('Discount for ' + numberToword(i) + ' referral');
            var input = $("<input type='number' min='1' name='ref_discounts[]' value='" + data[i - 1] + "' >").addClass('form-control dynamicInput')
            // Append the label to the div, and the div to the form row
            firstDiv.append(label);
            secondDiv.append(input);
            formRow.append(firstDiv);
            formRow.append(secondDiv);
        }

        if (data.length > 0) {
            var firstValue = data[0]; // First element
            var lastValue = data[data.length - 1]; // Last elemen
            firstDiscount.text(firstValue);
            data.length > 1 ? secondDiscount.text(" to " + lastValue) : secondDiscount.text('');

            for (var i = 1; i <= (data.length); i++) {
                referDiscountsMessage += numberToword(i) + " referal- " + data[i - 1] + "% discount  ";
            }
            referDiscounts.text(referDiscountsMessage);
        }
    }


    function validationInputs() {
        let ref_allowed_input = $("#input_add");
        let referal_months = $("#referal_months");
        let referStartDate = $("#referStartDate");
        let referStartTime = $("#referStartTime");
        let referEndDate = $("#referEndDate");
        let referEndTime = $("#referEndTime");
        let is_active = $('input[name="is_active"]');

        if (!is_active.is(':checked')) {
            is_active.addClass('is-invalid');
            return false;
        }

        if (ref_allowed_input.val() == '') {
            ref_allowed_input.addClass('is-invalid');
            return false;
        } else if (referal_months.val() == '') {
            referal_months.addClass('is-invalid');
            return false;
        } else if (referStartDate.val() == '') {
            referStartDate.addClass('is-invalid');
            return false;
        } else if (referStartTime.val() == '') {
            referStartTime.addClass('is-invalid');
            return false;
        } else if (referEndDate.val() == '') {
            referEndDate.addClass('is-invalid');
            return false;
        } else if (referEndTime.val() == '') {
            referEndTime.addClass('is-invalid');
            return false;
        } else {
            ref_allowed_input.removeClass('is-invalid');
            referal_months.removeClass('is-invalid');
            referStartDate.removeClass('is-invalid');
            referStartTime.removeClass('is-invalid');
            referEndDate.removeClass('is-invalid');
            referEndTime.removeClass('is-invalid');
            return true;
        }

    }

    $(document).ready(function() {
        // add discounts inputs if the olready exist
        let referDiscountsInpts =