<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<div class="account-warranty-container">
    <h1><?= ucfirst(lang('warranty_title')) ?></h1>
    <p><?= ucfirst(lang('warranty_sub_title')) ?></p>
    <div id="alertContainer" class="account-alert-container" style="display: none;">
        <div class="account-alert">
            <span id="alertMessage"></span>
        </div>
    </div>
    <form id="warrantyClaimForm">
        <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
        <input type="hidden" id="item_name_hidden" name="item_name">

        <div class="account-form-group">
            <!-- Menampilkan list order yang dikirimkan dari database (orders_list), optionnya akan menyimpan id_orders -->
            <label for="order_id">Pilih Nomor Order</label>
            <select id="order_id" name="order_id" required onchange="updateOrderDate()">
                <option value="">Pilih atau ketik Order ID</option>
                <?php foreach ($orders_list as $order): ?>
                    <option value="<?= $order->id_orders; ?>"
                        data-date="<?= $order->order_date; ?>"
                        data-order-detail="Order ID <?= $order->id_orders; ?> - <?= date('d M Y', strtotime($order->order_date)); ?>">
                        Order ID <?= $order->id_orders; ?> - <?= date('d M Y', strtotime($order->order_date)); ?>
                    </option>
                <?php endforeach; ?>
            </select>
            <input type="hidden" name="order_date" value="<?= $order->order_date; ?>">
        </div>
        <div class="account-form-group">
            <!-- Menampilkan list produk dari order details berdasarkan id_orders yang dipilih -->
            <label for="product_select">Pilih Produk</label>
            <select id="product_select" name="product_select" required>
            </select>
        </div>
        <div class="account-form-group">
            <label for="claim_reasons">Alasan Claim Garansi</label>
            <input type="text" id="claim_reasons" name="claim_reasons" required>
        </div>
        <div class="account-form-group">
            <label for="claim_proof_video">Link Video Bukti</label>
            <input type="text" id="claim_proof_video" name="claim_proof_video" required>
            <small>Kamu bisa mengupload video ke Google Drive atau Dropbox, lalu copy linknya di sini.</small>
        </div>
        <div class="account-form-actions">
            <button type="button" id="claimBtn" class="account-btn" disabled>Claim</button>
        </div>
    </form>

    <h1><?= ucfirst(lang('warranty_history_title')) ?></h1>
    <p><?= ucfirst(lang('warranty_history_sub_title')) ?></p>
    <ul class="claim-warranty-list" id="claimWarrantyList">
        <?php if (!empty($claim_history_list)): ?>
            <?php foreach ($claim_history_list as $claim_history): ?>
                <li class="claim-warranty-item">
                    <div class="claim-warranty-header">
                        <span class="claim-warranty-date"><?= date('d M Y', strtotime($claim_history->order_date)) ?></span>
                        <span class="claim-warranty-status <?= $claim_history->status_class ?>">
                            <?= $claim_history->status_text ?>
                        </span>
                        <span class="claim-warranty-id">ID Claim: <?= $claim_history->id_claim ?></span>
                    </div>
                    <div class="claim-warranty-detail">
                        <span class="claim-warranty-item-name">Produk: <?= $claim_history->item_name ?></span>
                        <span class="claim-warranty-reasons">Alasan Claim: <?= $claim_history->reason_claim ?></span>
                        <span class="claim-warranty-video">Link Video: <a href="<?= $claim_history->link_bukti ?>" target="_blank">Lihat Bukti</a></span>
                    </div>
                    <div class="transaction-actions">
                        <!-- Disetujui Produk -->
                        <?php if ($claim_history->status_text == 'Disetujui' && $claim_history->payment_confirm == NULL): ?>
                            <button class="order-btn-confirm" onclick="openConfirmClaimPaymentModal(<?= $claim_history->id_claim ?>)">
                                Konfirmasi Pembayaran
                            </button>
                        <?php endif; ?>
                        <?php if ($claim_history->payment_confirm == '1'): ?>
                            <span>Menunggu Konfirmasi</span>
                        <?php endif; ?>
                    </div>
                </li>
            <?php endforeach; ?>
        <?php else: ?>
            <p>Belum ada klaim garansi.</p>
        <?php endif; ?>
    </ul>
</div>

<div id="confirmClaimPaymentModal" class="confirm-payment-modal hidden" inert>
    <div class="confirm-payment-modal-content" role="dialog" aria-labelledby="confirmClaimPaymentModalTitle" aria-describedby="confirmClaimPaymentModalDescription">
        <button class="confirm-payment-close-btn" aria-label="Close" onclick="closeConfirmClaimPaymentModal()">&times;</button>
        <h2 id="confirmClaimPaymentModalTitle"><?= strtoupper(lang('payment_confirmation')) ?> #<span id="claimID"></span></h2>
        <p id="confirmClaimPaymentModalDescription"><?= ucwords(lang('please_fill')); ?></p>
        <form id="confirm-claim-payment-form">
            <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">

            <input type="hidden" name="claim_id" value="">
            <div class="confirm-payment-form-group">
                <label for="payment_date"><?= ucwords(lang('payment_date')); ?></label>
                <input type="date" name="payment_date" id="payment_date" class="datepicker" value="<?= set_value('payment_date') ?>" required>
            </div>

            <div class="confirm-payment-form-group">
                <label for="total_amount"><?= ucwords(lang('payment_amount')); ?> (IDR)</label>
                <input type="number" name="total_amount" id="total_amount" value="<?= set_value('total_amount') ?>" required>
            </div>

            <div class="confirm-payment-form-group">
                <label for="to_bank"><?= ucwords(lang('transfer_to')); ?></label>
                <select id="to_bank" name="to_bank" required>
                    <option value="bca" selected>BCA</option>
                    <option value="mandiri">MANDIRI</option>
                </select>
            </div>

            <div class="confirm-payment-form-group">
                <label for="from_bank"><?= ucwords(lang('transfer_from')); ?></label>
                <input type="text" name="from_bank" id="from_bank" value="<?= set_value('from_bank') ?>" required>
            </div>

            <div class="confirm-payment-form-group">
                <label for="account_name"><?= ucwords(lang('from_account_name')); ?></label>
                <input type="text" name="account_name" id="account_name" value="<?= set_value('account_name') ?>" required>
            </div>

            <div class="confirm-payment-form-group">
                <label for="account_number"><?= ucwords(lang('from_account_number')); ?></label>
                <input type="text" name="account_number" id="account_number" value="<?= set_value('account_number') ?>" required>
            </div>

            <div class="confirm-payment-form-group">
                <label for="receipt_file">Bukti Pembayaran</label>
                <input type="file" name="receipt_file" id="receipt_file" required>
                <span class="file-tip"><?= lang('file_type_notice'); ?></span>
            </div>

            <div class="confirm-payment-form-actions">
                <button type="submit" class="confirm-payment-submit-btn"><?= ucwords(lang('confirm_payment')); ?></button>
            </div>
        </form>
    </div>
</div>
<style>
    /* Optional: Add some custom styling for Tom Select */
    .tom-select .order-option,
    .tom-select .order-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tom-select .order-id {
        font-weight: bold;
        margin-right: 10px;
    }

    .tom-select .order-date {
        color: #6c757d;
        font-size: 0.9em;
    }

    .ts-wrapper.single .ts-control {
        padding: 8px 12px;
        border-radius: 4px;
    }
</style>

<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

<script>
    function openConfirmClaimPaymentModal(claimId) {
        const modal = document.getElementById('confirmClaimPaymentModal');
        const form = document.getElementById('confirm-claim-payment-form');
        const formOrderID = document.getElementById('claimID');

        formOrderID.textContent = claimId;
        modal.classList.remove('hidden');
        modal.setAttribute('aria-hidden', 'false');
        modal.removeAttribute('inert');
        form.querySelector('input[name="claim_id"]').value = claimId;
    }

    function closeConfirmClaimPaymentModal() {
        const modal = document.getElementById('confirmClaimPaymentModal');
        modal.classList.add('hidden');
        modal.setAttribute('aria-hidden', 'true');
        modal.setAttribute('inert', '');
    }
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('warrantyClaimForm');
        const claimButton = document.getElementById('claimBtn');
        const alertContainer = document.getElementById('alertContainer');
        const alertMessage = document.getElementById('alertMessage');
        const csrfTokenName = '<?= $this->security->get_csrf_token_name(); ?>';

        function showAlert(message, isError = false) {
            alertMessage.innerHTML = message;
            alertContainer.style.display = 'block';
            alertContainer.className = `account-alert-container ${isError ? 'error' : 'success'}`;

            // Hide alert after 5 seconds
            setTimeout(() => {
                alertContainer.style.display = 'none';
            }, 5000);
        }

        claimButton.addEventListener('click', async () => {
            claimButton.disabled = true; // Disable button to prevent multiple submissions
            try {
                const formData = new FormData(form);
                const baseUrl = '<?= base_url(); ?>';

                const response = await fetch(baseUrl + 'account/claim_warranty', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.csrf_token) {
                    const csrfInput = form.querySelector(`input[name="${csrfTokenName}"]`);
                    if (csrfInput) {
                        csrfInput.value = data.csrf_token;
                    }
                }

                if (data.status === 'success') {
                    showAlert(data.message);
                    form.reset(); // Reset form on successful submission
                } else {
                    showAlert(data.message, true);
                    if (data.errors) {
                        // Handle field-specific errors if any
                        Object.entries(data.errors).forEach(([field, error]) => {
                            const inputElement = form.elements[field];
                            if (inputElement) {
                                inputElement.classList.add('error');
                                // Add error message below the field
                                const errorDiv = document.createElement('small');
                                errorDiv.className = 'field-error';
                                errorDiv.textContent = error;
                                inputElement.parentNode.appendChild(errorDiv);
                            }
                        });
                    }
                }
            } catch (error) {
                showAlert('An error occurred while submitting the claim. Please try again.', true);
            } finally {
                claimButton.disabled = false; // Re-enable button after processing
            }
        });

        // Remove error styling when input changes
        form.addEventListener('input', (e) => {
            if (e.target.classList.contains('error')) {
                e.target.classList.remove('error');
                const errorDiv = e.target.parentNode.querySelector('.field-error');
                if (errorDiv) {
                    errorDiv.remove();
                }
            }
        });

        new TomSelect('#order_id', {
            create: false,
            sortField: {
                field: 'text',
                direction: 'desc'
            },
            placeholder: 'Pilih atau ketik Order ID',
            render: {
                option: function(data, escape) {
                    return `
                    <div class="order-option">
                        <span class="order-id">${escape(data.value)}</span>
                        <span class="order-date">${escape(data.text)}</span>
                    </div>
                `;
                },
                item: function(data, escape) {
                    return `
                    <div class="order-item">
                        <span class="order-id">${escape(data.value)}</span>
                        <span class="order-date">${escape(data.text)}</span>
                    </div>
                `;
                }
            },
            onChange: function(value) {
                // Update order date when selection changes
                const selectedOption = this.getItem(value);
                if (selectedOption) {
                    const orderDate = selectedOption.getAttribute('data-date');
                    // document.getElementById('order_date').value = orderDate || '';

                    // Trigger product list update
                    $('#order_id').trigger('change');
                }
            }
        });
    });

    const notyf = new Notyf({
        duration: 3000,
        position: {
            x: 'right',
            y: 'top'
        },
        types: [{
                type: 'success',
                background: '#7A4397',
                icon: {
                    className: 'fas fa-check',
                    tagName: 'i',
                    color: 'white'
                }
            },
            {
                type: 'error',
                background: '#dc3545',
                icon: {
                    className: 'fas fa-times',
                    tagName: 'i',
                    color: 'white'
                }
            }
        ]
    });

    $(document).on('submit', '#confirm-claim-payment-form', function(e) {
        e.preventDefault(); // Prevent the default form submission

        // Get form data
        var formData = new FormData(this);

        // Send AJAX request
        $.ajax({
            url: '<?= base_url('account/update_claimpaymentconfirmation') ?>',
            type: 'POST',
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('#confirm-payment-submit-btn').prop('disabled', true);
                $('#confirm-payment-submit-btn').text('Processing...');
            },
            success: function(response) {
                $('#confirm-payment-submit-btn').prop('disabled', false);
                $('#confirm-payment-submit-btn').text('<?= ucwords(lang('confirm_payment')); ?>');

                if (response.status === 'error') {
                    notyf.error(response.message);
                } else {
                    notyf.success('Payment confirmation successful!');
                    window.location.reload();
                }
            },
            error: function(xhr, status, error) {
                $('#confirm-payment-submit-btn').prop('disabled', false);
                $('#confirm-payment-submit-btn').text('<?= ucwords(lang('confirm_payment')); ?>');
                notyf.error('An error occurred. Please try again.');
                // console.log(xhr.responseText);
            }
        });
    });

    $(document).ready(function() {
        $('#product_select').html('<option value="">Pilih Order ID terlebih dahulu</option>');
        $('#order_id').change(function() {
            var orderId = $(this).val();
            if (orderId) {
                $.ajax({
                    url: '<?= site_url('account/get_order_details_list'); ?>',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'order_id': orderId,
                        '<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>'
                    },
                    success: function(response) {
                        $('#product_select').empty();
                        var options = '<option value="">Pilih Produk</option>';
                        $.each(response, function(key, product) {
                            options += '<option value="' + product.id_orders_detail + '" data-item-name="' + product.item_name + '">' + product.item_name + '</option>';
                        });
                        $('#product_select').html(options);
                        $('#claimBtn').prop('disabled', false);
                        $('#product_select').change(function() {
                            var selectedItemName = $('#product_select option:selected').data('item-name');
                            $('#item_name_hidden').val(selectedItemName);
                        });
                    },
                    error: function() {
                        alert('Gagal mengambil data produk.');
                    }
                });

            } else {
                $('#product_select').empty().append('<option value="">Pilih Produk</option>');
                $('#claimBtn').prop('disabled', true);
            }
        });
    });

    function updateOrderDate() {
        var select = document.getElementById("order_id");
        var selectedOption = select.options[select.selectedIndex];
        document.getElementById("order_date").value = selectedOption.getAttribute("data-date") || "";
    }
</script>