<div class="formipay-screen-menu">
    <?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- This image is a plugin asset and not a WordPress attachment. ?>
    <img src="<?php echo esc_html( FORMIPAY_URL . 'admin/assets/img/formipay-logo-circle-white_256.png' ); ?>" alt="Formipay"> <!-- phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -->
    <div class="screen-title">
        <h1>
            <?php echo 
            // translators: %d is the current order ID.
            sprintf( esc_html__( 'Order %d', 'formipay'), intval(isset($_GET['order_id']) ? $_GET['order_id'] : 0) ) 
            ?>
        </h1>
    </div>
</div>
<div class="wrap">
    <input type="hidden" id="order_id" value="<?php echo intval(isset($_GET['order_id']) ? $_GET['order_id'] : 0); ?>">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-7">
                <div class="order-detail-card items-card">
                    <div class="card-title mt-3 mb-0"><?php echo esc_html__( 'Items', 'formipay' ); ?></div>
                    <div class="card mt-1 border-0 rounded-4 shadow-sm">
                        <div class="card-body p-0">
                            <table class="table placeholder-glow mb-0" id="order-items-table">
                                <tbody>
                                    <tr>
                                        <th><span class="placeholder col-6"></span></th>
                                        <td><span class="placeholder col-4"></span></td>
                                    </tr>
                                    <tr>
                                        <th><span class="placeholder col-6"></span></th>
                                        <td><span class="placeholder col-4"></span></td>
                                    </tr>
                                    <tr>
                                        <th><span class="placeholder col-6"></span></th>
                                        <td><span class="placeholder col-4"></span></td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr class="border-bottom-0">
                                        <th class="border-bottom-0"><?php echo esc_html__( 'Total Order Value', 'formipay' ); ?></th>
                                        <td id="order-total" class="border-bottom-0"><span class="placeholder col-4"></span></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="card-footer bg-white d-flex justify-content-between align-items-center px-0" style="padding: .5rem!important;">
                            <?php echo esc_html__( 'Order Status', 'formipay' ); ?>
                            <select name="order_status" id="order_status" class="form-select rounded border border-secondary-subtle" data-order-id="<?php echo intval(isset($_GET['order_id']) ? $_GET['order_id'] : 0); ?>">
                                <?php 
                                $order_statuses = formipay_order_status_list();
                                foreach($order_statuses as $key => $status) {
                                    echo '<option value='. esc_html($key) .'>'. esc_html($status) .'</option>';
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="order-detail-card form-data-card">
                    <div class="card-title mt-3 w-100 mb-0 d-flex justify-content-between align-items-center">
                        <?php echo esc_html__( 'Form Data', 'formipay' ); ?> 
                        <button type="button" class="btn btn-secondary btn-sm edit-transaction-data rounded-4 px-3" data-loaded-button-text="<?php echo esc_html__( 'Edit Data', 'formipay' ); ?>" disabled>
                            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                            <span class="visually-hidden" role="status"></span>
                        </button>
                        <div class="update-transaction-buttons d-none">
                            <button type="button" class="btn btn-secondary btn-sm cancel-transaction-data rounded-4 px-3"><?php echo esc_html__( 'Cancel', 'formipay' ); ?></button>
                            <button type="button" class="btn btn-primary btn-sm update-transaction-data rounded-4 px-3"><?php echo esc_html__( 'Save Changes', 'formipay' ); ?></button>
                        </div>
                    </div>
                    <div class="card mt-1 border-0 rounded-4 shadow-sm">
                        <div class="card-body p-0 placeholder-glow">
                            <ul class="list-group list-group-flush" id="form-data-list">
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="order-detail-card transaction-card">
                    <div class="card-title mt-3 mb-0">
                        <?php echo esc_html__( 'Transactions', 'formipay' ); ?>
                    </div>
                    <div class="card mt-1 border-0 rounded-4 shadow-sm">
                        <div class="card-body p-0">
                            <div class="rb-container">
                                <ul class="rb" id="transaction-list">
                                    <li class="rb-item placeholder-glow">
                                        <span class="placeholder col-3"></span>
                                        <span class="placeholder col-10"></span>
                                    </li>
                                    <li class="rb-item placeholder-glow">
                                        <span class="placeholder col-3"></span>
                                        <span class="placeholder col-10"></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-detail-card notification-card">
                    <div class="card-title mt-3 mb-0"><?php echo esc_html__( 'Notification', 'formipay' ); ?></div>
                    <div class="card mt-1 border-0 rounded-4 shadow-sm">
                        <div class="card-body p-0 placeholder-glow">
                            <ul class="list-group list-group-flush" id="notification-list">
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="order-detail-card submission-detail-card">
                    <div class="card-title mt-3 mb-0"><?php echo esc_html__( 'Submission Details', 'formipay' ); ?></div>
                    <div class="card mt-1 border-0 rounded-4 shadow-sm">
                        <div class="card-body p-0 placeholder-glow">
                            <ul class="list-group list-group-flush" id="submission-detail-list">
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="order-detail-card product-access-card">
                    <div class="card-title mt-3 w-100 mb-0 d-flex justify-content-between align-items-center">
                        <?php echo esc_html__( 'Product Access', 'formipay' ); ?>
                        <button type="button" class="btn btn-secondary btn-sm edit-access-data rounded-4 px-3" data-loaded-button-text="<?php echo esc_html__( 'Edit Data', 'formipay' ); ?>" disabled>
                            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                            <span class="visually-hidden" role="status"></span>
                        </button>
                        <div class="update-access-buttons d-none">
                            <button type="button" class="btn btn-secondary btn-sm cancel-access-data rounded-4 px-3"><?php echo esc_html__( 'Cancel', 'formipay' ); ?></button>
                            <button type="button" class="btn btn-primary btn-sm update-access-data rounded-4 px-3"><?php echo esc_html__( 'Save Changes', 'formipay' ); ?></button>
                        </div>
                    </div>
                    <div class="card mt-1 border-0 rounded-4 shadow-sm">
                        <form class="card-body p-0 placeholder-glow">
                            <ul class="list-group list-group-flush" id="access-detail-list">
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                                <li class="list-group-item">
                                    <b><span class="placeholder col-3"></span></b>
                                    <p class="mb-0"><span class="placeholder col-8"></span></p>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="image-ligthbox">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body p-0">
                <?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- This image is a placeholder for image lightbox. ?>
                <img src="" style="width: 100%;">
            </div>
        </div>
    </div>
</div>
<script id="order-item-row-template" type="text/x-handlebars-template">
    {{#each items}}
        <tr>
            <th class="item-name fw-normal">{{item}}{{#if qty}}<br><span class="d-flex align-items-center gap-1"><span style="font-size: 10px;">✕</span>{{qty}}{{/if}}</span></th>
            <td class="item-subtotal">{{subtotal_formatted}}</td>
        </tr>
    {{/each}}
</script>
<script id="form-data-item-template" type="text/x-handlebars-template">
    {{#each datas as |data|}}
        <li class="list-group-item px-0">
            <b class="field-name">{{data.label}}</b>
            <p class="field-value mt-1 mb-0" data-field-name="{{data.name}}">
                {{data.value}}
            </p>
        </li>
    {{/each}}
</script>
<script id="notification-data-template" type="text/x-handlebars-template">
    {{#each datas as |row|}}
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-3">
                <div class="notification-title">
                    <p class="mb-0"><b class="notification-title">{{row.title}}</b> <?php echo esc_html__('to', 'formipay'); ?> <span class="recipient-type">{{row.recipient_type}}</span> <?php echo esc_html__('at', 'formipay'); ?> <b class="notification-date">{{row.meta_data.request_date}}</b></p>
                    <span class="recipient badge text-bg-secondary rounded-pill me-1">
                        {{#ifEquals row.media "email"}}
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
                                <g fill="#fff">
                                    <path d="M22 7.535V17a3 3 0 0 1-2.824 2.995L19 20H5a3 3 0 0 1-2.995-2.824L2 17V7.535l9.445 6.297l.116.066a1 1 0 0 0 .878 0l.116-.066z" />
                                    <path d="M19 4c1.08 0 2.027.57 2.555 1.427L12 11.797l-9.555-6.37a3 3 0 0 1 2.354-1.42L5 4z" />
                                </g>
                            </svg>
                        {{/ifEquals}}
                        {{#ifEquals row.media "whatsapp"}}
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
                                <path fill="#fff" d="M18.497 4.409a10 10 0 0 1-10.36 16.828l-.223-.098l-4.759.849l-.11.011a1 1 0 0 1-.11 0l-.102-.013l-.108-.024l-.105-.037l-.099-.047l-.093-.058l-.014-.011l-.012-.007l-.086-.073l-.077-.08l-.067-.088l-.056-.094l-.034-.07l-.04-.108l-.028-.128l-.012-.102a1 1 0 0 1 0-.125l.012-.1l.024-.11l.045-.122l1.433-3.304l-.009-.014A10 10 0 0 1 5.056 4.83l.215-.203a10 10 0 0 1 13.226-.217M9.5 7.5A1.5 1.5 0 0 0 8 9v1a6 6 0 0 0 6 6h1a1.5 1.5 0 0 0 0-3h-1l-.144.007a1.5 1.5 0 0 0-1.128.697l-.042.074l-.022-.007a4.01 4.01 0 0 1-2.435-2.435l-.008-.023l.075-.041A1.5 1.5 0 0 0 11 10V9a1.5 1.5 0 0 0-1.5-1.5" />
                            </svg>
                        {{/ifEquals}}
                        <span class="recipient-text">{{row.recipient}}<span>
                    </span>
                </div>
                <span class="badge text-bg-primary rounded-pill notification-status">{{row.status}}</span>
            </li>
    {{/each}}
</script>
<script id="transaction-timeline-item" type="text/x-handlebars-template">
    {{#each datas as |row|}}
        <li class="rb-item" ng-repeat="itembx">
            <div class="timestamp">
                {{row.time}}
            </div>
            <div class="item-title">{{row.activity}}</div>
            {{#ifEquals row.attachment "none"}}
            {{else}}
            <div class="item-thumbnail">
                <?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- This image is a placeholder to show payment receipt. ?>
                <img src="{{row.attachment}}" alt="payment-receipt" width="250" class="timeline-item-image border border-2 border-secondary shadow-sm rounded-3">
            </div>
            {{/ifEquals}}
        </li>
    {{/each}}
</script>
<script id="thankyou-access-template" type="text/x-handlebars-template">
    <li class="list-group-item px-0 access-link">
        <b><?php echo esc_html__('Access Link', 'formipay'); ?></b>
        <div class="input-group mb-0 access-link-wrapper">
            <input type="text" class="form-control rounded-start border border-secondary-subtle" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="copy-link-access" value="{{data.link}}" readonly>
            <button class="btn btn-outline-secondary rounded-end border border-secondary-subtle formipay-copy-button" type="button" id="copy-link-access" data-copy-value="{{data.link}}" data-copied-text="<?php echo esc_html__( 'Copied', 'formipay' ); ?>" data-copy-text="<?php echo esc_html__( 'Copy', 'formipay' ); ?>" data-not-copied-text="<?php echo esc_html__( 'Failed', 'formipay' ); ?>"><i class="bi bi-copy"></i> <?php echo esc_html__( 'Copy', 'formipay' ); ?></button>
        </div>
    </li>
    <li class="list-group-item px-0 access-method" data-access-method="{{data.pass_method}}">
        <b><?php echo esc_html__('Access Method', 'formipay'); ?></b>
        <p class="mb-0">{{data.pass_method_label}}</p>
    </li>
    <li class="list-group-item px-0 access-password d-none" data-access-password="{{data.pass_word}}">
        <b><?php echo esc_html__('Access Password', 'formipay'); ?></b>
        <p class="mb-0">******</p>
    </li>
</script>