@extends('admin.admin_dashboard')
@section('admin')

<div class="content container-fluid">

    <div class="page-header">
        <div class="row">
            <div class="col">
                <h3 class="page-title">Card Verify</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                    <li class="breadcrumb-item active">Loyalty</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content container-fluid">
        <div class="row justify-content-lg-center">
            <div class="col-lg-12">
                <div class="text-center mb-5">
                    <label class="avatar avatar-xxl profile-cover-avatar" for="avatar_upload">
                        <img class="avatar-img"
                            src="{{ (!empty($partner->partner_image)) ? asset($partner->partner_image) : asset('upload/no_image.jpg') }}"
                            alt="Partner Image">
                    </label>
                    <h2><strong>{{ $partner->partner_name }}</strong> <i class="fas fa-certificate text-primary small"
                            data-toggle="tooltip" data-placement="top" title="" data-original-title="Verified"></i></h2>

                    <ul class="list-inline">
                        <li class="list-inline-item">
                            <i class="fas fa-map-marker-alt"></i> {{ $partner->location }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h3>Check for Eligible</h3>
                </div>
                <hr>
                <div class="card-body">
                    <form id="loyaltyForm" method="POST">
                        @csrf
                        <input type="hidden" id="partner_id" value="{{ $partner->id }}">

                        <div class="mb-3">
                            <label>
                                <input type="radio" name="verify_type" value="loyalty" id="verify_loyalty">
                                Loyalty Card Number
                            </label>
                            <label class="ms-3">
                                <input type="radio" name="verify_type" value="phone" id="verify_phone">
                                Phone Number
                            </label>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-9 mb-2" id="loyalty_card_field" style="display: none;">
                                <label for="loyalty_card_number">Loyalty Card</label>
                                <input type="text" class="form-control" id="loyalty_card_number"
                                    name="loyalty_card_number" placeholder="Please input 16 digit UCN" maxlength="16"
                                    disabled>
                            </div>

                            <div class="col-md-9" id="phone_number_field" style="display: none;">
                                <label for="phone_number">Phone Number</label>
                                <input type="text" class="form-control" id="phone_number" name="phone_number"
                                    placeholder="Please input phone number" maxlength="16" disabled>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg">Verify</button>
                    </form>
                </div>
            </div>

        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Discount Terms & Conditions</h5>
                </div>
                <div class="card-body card-body-height">
                    @if($discounts->isNotEmpty())
                    <ul class="activity-feed">
                        @foreach($discounts as $discount)
                        @foreach(explode("\n", $discount->discount_terms_condition) as $term)
                        <li class="feed-item">
                            <span class="feed-text">{{ $term }}</span>
                        </li>
                        @endforeach
                        @endforeach
                    </ul>
                    @else
                    <p>No discount terms found for this partner.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!--verify card and create discount script-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11">
</script>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('input[name="verify_type"]');
    const loyaltyField = document.getElementById('loyalty_card_field');
    const phoneField = document.getElementById('phone_number_field');
    const loyaltyInput = document.getElementById('loyalty_card_number');
    const phoneInput = document.getElementById('phone_number');
    const form = document.getElementById('loyaltyForm');

    // Hide fields initially
    loyaltyField.style.display = 'none';
    phoneField.style.display = 'none';
    loyaltyInput.disabled = true;
    phoneInput.disabled = true;

    // Handle radio toggle
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'loyalty') {
                loyaltyField.style.display = 'block';
                phoneField.style.display = 'none';
                loyaltyInput.disabled = false;
                phoneInput.disabled = true;
            } else if (this.value === 'phone') {
                loyaltyField.style.display = 'none';
                phoneField.style.display = 'block';
                loyaltyInput.disabled = true;
                phoneInput.disabled = false;
            }
        });
    });

    // Auto trigger initial state if any selected
    document.querySelector('input[name="verify_type"]:checked')?.dispatchEvent(new Event('change'));

    // Form submit
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const partner_id = document.getElementById('partner_id').value;
        const verifyType = document.querySelector('input[name="verify_type"]:checked');

        if (!verifyType) {
            return Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Please select verification method.'
            });
        }

        const identifier = verifyType.value === 'loyalty' ?
            loyaltyInput.value.trim() :
            phoneInput.value.trim();

        if (!identifier) {
            return Swal.fire({
                icon: 'error',
                title: 'Missing Info',
                text: `Please enter your ${verifyType.value === 'loyalty' ? 'Loyalty Card Number' : 'Phone Number'}`
            });
        }

        // Prepare body for verification
        const verifyBody = {
            partner_id
        };
        verifyBody[verifyType.value === 'loyalty' ? 'loyalty_card_number' : 'phone_number'] =
            identifier;

        // AJAX call for verification
        fetch("{{ route('scan.verify') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                body: JSON.stringify(verifyBody)
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    let selectedButton = null;
                    let selectedDiscountId = null;
                    let selectedCustomerId = data.customer_id;

                    const generateButtonsHtml = () => {
                        return data.discounts.map(discount => `
                        <button type="button"
                            class="btn btn-outline-primary m-2 discount-btn"
                            data-discount-id="${discount.id}"
                            data-customer-id="${data.customer_id}"
                            data-partner-id="${partner_id}">
                            ${discount.discount_name} (${discount.discount_percentage}%)
                        </button>
                    `).join('');
                    };

                    Swal.fire({
                        title: `Hi, ${data.customer_name}!`,
                        html: `
                        <p>From <strong>${data.partner_name}</strong> (${data.partner_location})</p>
                        <p>You are eligible for our special discount. Please select your preferred offer and enjoy!</p>
                        <div id="discount-container">${generateButtonsHtml()}</div>
                        <div id="apply-button-container" class="mt-3" style="display:none;">
                            <button id="apply-discount-btn" class="btn btn-success">Get Discount</button>
                        </div>
                    `,
                        showConfirmButton: false,
                        didOpen: () => {
                            function activateButtons() {
                                document.querySelectorAll('.discount-btn').forEach(
                                    btn => {
                                        btn.style.display = 'inline-block';
                                        btn.disabled = false;
                                        btn.classList.remove('btn-warning',
                                            'btn-secondary', 'btn-success');
                                        btn.classList.add('btn-outline-primary');
                                    });
                                document.getElementById('apply-button-container').style
                                    .display = 'none';
                                selectedButton = null;
                                selectedDiscountId = null;
                            }

                            activateButtons();

                            document.querySelectorAll('.discount-btn').forEach(btn => {
                                btn.addEventListener('click', function() {
                                    if (selectedButton === this) {
                                        activateButtons(); // deselect
                                    } else {
                                        selectedButton = this;
                                        selectedDiscountId = this
                                            .dataset.discountId;

                                        document.querySelectorAll(
                                                '.discount-btn')
                                            .forEach(other => {
                                                if (other !==
                                                    this) {
                                                    other.disabled =
                                                        true;
                                                    other.style
                                                        .display =
                                                        'none';
                                                }
                                            });

                                        this.classList.remove(
                                            'btn-outline-primary');
                                        this.classList.add(
                                            'btn-warning');

                                        document.getElementById(
                                                'apply-button-container'
                                            ).style.display =
                                            'block';
                                    }
                                });
                            });

                            document.getElementById('apply-discount-btn')
                                .addEventListener('click', function() {
                                    if (!selectedDiscountId || !selectedCustomerId)
                                        return;

                                    selectedButton.innerHTML =
                                        `<span class="spinner-border spinner-border-sm"></span> Applying...`;
                                    selectedButton.disabled = true;

                                    fetch("{{ route('apply.discount') }}", {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                            },
                                            body: JSON.stringify({
                                                customer_id: selectedCustomerId,
                                                partner_id: partner_id,
                                                discount_id: selectedDiscountId
                                            })
                                        })
                                        .then(res => res.json())
                                        .then(response => {
                                            if (response.status === 'success') {
                                                selectedButton.innerText =
                                                    'Discount Applied ✓';
                                                selectedButton.classList.remove(
                                                    'btn-warning');
                                                selectedButton.classList.add(
                                                    'btn-success');

                                                Swal.fire({
                                                    icon: 'success',
                                                    title: 'Discount Applied!',
                                                    text: response
                                                        .message
                                                }).then(() => {
                                                    window.location
                                                        .reload();
                                                });
                                            } else {
                                                Swal.fire({
                                                    icon: 'error',
                                                    title: 'Error',
                                                    text: response
                                                        .message ||
                                                        'Something went wrong. Please try again.'
                                                });
                                                activateButtons();
                                            }
                                        });
                                });
                        }
                    });

                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message || 'Verification failed. Please try again.'
                    });
                }
            });
    });
});
</script>






<!--<script>
document.getElementById('loyaltyForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const partner_id = document.getElementById('partner_id').value;
    const loyalty_card_number = document.getElementById('loyalty_card_number').value;

    fetch("{{ route('scan.verify') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                partner_id,
                loyalty_card_number
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                let selectedButton = null;
                let selectedDiscountId = null;
                let selectedCustomerId = data.customer_id;

                const generateButtonsHtml = () => {
                    return data.discounts.map(discount => `
                    <button type="button"
                        class="btn btn-outline-primary m-2 discount-btn"
                        data-discount-id="${discount.id}"
                        data-customer-id="${data.customer_id}"
                        data-partner-id="${partner_id}">
                        ${discount.discount_name} (${discount.discount_percentage}%)
                    </button>
                `).join('');
                };

                Swal.fire({
                    title: `Hi, ${data.customer_name}!`,
                    html: `
                    <p>From <strong>${data.partner_name}</strong> (${data.partner_location})</p>
                    <p>You are eligible for our special discount. Please select your preferred offer and enjoy!</p>
                    <div id="discount-container">${generateButtonsHtml()}</div>
                    <div id="apply-button-container" class="mt-3" style="display:none;">
                        <button id="apply-discount-btn" class="btn btn-success">Get Discount</button>
                    </div>
                `,
                    showConfirmButton: false,
                    didOpen: () => {
                        function activateButtons() {
                            document.querySelectorAll('.discount-btn').forEach(btn => {
                                btn.style.display = 'inline-block';
                                btn.disabled = false;
                                btn.classList.remove('btn-warning', 'btn-secondary',
                                    'btn-success');
                                btn.classList.add('btn-outline-primary');
                            });
                            document.getElementById('apply-button-container').style
                                .display =
                                'none';
                            selectedButton = null;
                            selectedDiscountId = null;
                        }

                        activateButtons();

                        document.querySelectorAll('.discount-btn').forEach(btn => {
                            btn.addEventListener('click', function() {
                                if (selectedButton === this) {
                                    // deselect
                                    activateButtons();
                                } else {
                                    selectedButton = this;
                                    selectedDiscountId = this.dataset
                                        .discountId;

                                    // hide others
                                    document.querySelectorAll(
                                            '.discount-btn')
                                        .forEach(other => {
                                            if (other !== this) {
                                                other.disabled = true;
                                                other.style.display =
                                                    'none';
                                            }
                                        });

                                    this.classList.remove(
                                        'btn-outline-primary');
                                    this.classList.add('btn-warning');

                                    document.getElementById(
                                            'apply-button-container').style
                                        .display = 'block';
                                }
                            });
                        });

                        // Apply Discount Click
                        document.getElementById('apply-discount-btn').addEventListener(
                            'click',
                            function() {
                                if (!selectedDiscountId || !selectedCustomerId) return;

                                selectedButton.innerHTML =
                                    `<span class="spinner-border spinner-border-sm"></span> Applying...`;
                                selectedButton.disabled = true;

                                fetch("{{ route('apply.discount') }}", {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                        },
                                        body: JSON.stringify({
                                            customer_id: selectedCustomerId,
                                            partner_id: partner_id,
                                            discount_id: selectedDiscountId
                                        })
                                    })
                                    .then(res => res.json())
                                    .then(response => {
                                        if (response.status === 'success') {
                                            selectedButton.innerText =
                                                'Discount Applied ✓';
                                            selectedButton.classList.remove(
                                                'btn-warning');
                                            selectedButton.classList.add(
                                                'btn-success');

                                            Swal.fire({
                                                icon: 'success',
                                                title: 'Discount Applied!',
                                                text: response.message
                                            }).then(() => {
                                                window.location.reload();
                                            });
                                        } else {
                                            Swal.fire({
                                                icon: 'error',
                                                title: 'Error',
                                                text: 'Something went wrong. Please try again.'
                                            });
                                            activateButtons();
                                        }
                                    });
                            });
                    }
                });

            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.message
                });
            }
        });
});
</script>-->
@endsection