<div class="offcanvas <?php echo esc_html(wpbookit_append_class_base_on_rtl('offcanvas-end', 'offcanvas-start')) ?> wpb-booking-import" tabindex="-1" id="wpb-booking-import" data-bs-scroll="false" data-bs-backdrop="true" aria-labelledby="wpb-booking-import-label">
    <form action="" class="offcanvas-form" method="POST" enctype="multipart/form-data" >
        <input type="hidden" name="wp_import_module" value="booking">
        <div class="offcanvas-header">
            <div class="d-flex align-items-center">
                <h4 class="offcanvas-title" id="wpb-booking-import-label"><?php esc_html_e('Booking import', 'wpbookit'); ?></h4>
            </div>
            <button type="button" class="btn-close add-btn-close text-reset shadow-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body data-scrollbar">
            <div class="form-group">
                <label class="form-label"><?php esc_html_e('Select File Type', 'wpbookit'); ?></label>
                <select class="form-control" name="wpb_file" style="width: 100%;">
                    <?php foreach (wpbookit_available_import_file_type() as $wpbookit_import_file) : ?>
                        <option value="<?php echo esc_attr($wpbookit_import_file['key']); ?>">
                            <?php echo esc_html($wpbookit_import_file['label']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="mb-3">
                <label for="wpb_import_file" class="form-label"><?php esc_html_e('Upload a File', 'wpbookit'); ?></label>
                <div class="position-relative custom-upload-container">
                    <input class="form-control" type="file" id="wpb_import_file" name="wpb_import_file">
                    <div class="custom-upload">
                        <?php echo wpbookit_render_filtered_svg('upload'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                        <div class="mt-3 title"><?php esc_html_e('Drag & Drop or choose file to upload', 'wpbookit'); ?></div>
                    </div>
                    <div class="invalid-feedback"></div>
                </div>
            </div>
            <div class="mb-5">
                <a href="<?php echo esc_url(IQWPB_PLUGIN_URL."sample-data/sample-booking.csv")?>" target="_blank" class="text-primary small" rel="noopener noreferrer"><?php esc_html_e("Click here to download sample file", 'wpbookit') ?></a>
            </div>
            <div class="form-group">
                <label class="form-label"><?php esc_html_e('Create guest user(s)', 'wpbookit'); ?></label>
                <select class="form-control" name="wpb_guest_user" style="width: 100%;">
                   <option value="1">
                        <?php echo esc_html__('Yes','wpbookit')?>
                   </option>
                   <option value="0">
                        <?php echo esc_html__('No','wpbookit')?>
                   </option>
                </select>
            </div>
            <div class="mb-3 small">
                <p class=" text-black"><?php esc_html_e("Following fields is required in CSV file", 'wpbookit') ?></p>
                <dl>
                    <?php foreach (wpbookit_get_require_csv_fields()['booking'] as $wpbookit_field) : ?>
                        <dd><span class="me-1"><?php echo wpbookit_render_filtered_svg('double-check'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span> <?php echo esc_html($wpbookit_field); ?></dd>
                    <?php endforeach; ?>
                </dl>
            </div>
            <div class="mb-3">
                <div class="form-control import-data-log d-none">
                    <h6><?php esc_html_e('Appointments Import', 'wpbookit'); ?></h6>
                    <div class="row">
                        <div class="col"><?php esc_html_e('Total rows:', 'wpbookit'); ?><span class="text-black" id="total_rows">0</span></div>
                        <div class="col"><?php esc_html_e('Total rows inserted:', 'wpbookit'); ?><span class="text-black" id="total_imported_rows">0</span></div>
                        <div class="w-100"></div>
                        <div class="col"><?php esc_html_e('Booking type not found:', 'wpbookit'); ?><span class="text-black" id="name_not_found">0</span></div>
                        <div class="col"><?php esc_html_e('Customer not found:', 'wpbookit'); ?><span class="text-black" id="email_not_found">0</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas-footer">
            <div class="row">
                <div class="col-6">
                    <button id="wpb_apply_booking_reset" type="button" class="btn btn-secondary  w-100 mt-5">
                        <?php esc_html_e('Cancle', 'wpbookit'); ?>
                    </button>
                </div>
                <div class="col-6">
                    <button id="wpb_apply_booking_filters" type="submit" class="btn btn-primary  w-100 mt-5">
                        <span class="loader d-none">
                            <?php echo wpbookit_render_filtered_svg('spinner') // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                        </span>
                        <?php esc_html_e('Import', 'wpbookit'); ?>
                    </button>
                </div>
            </div>
        </div>
    </form>

</div>