<?php
/**
 * $block FiloBlu\Storelocator\Block\Shop
 */
$shop = $block->getShop();
$product = $block->getProduct();
$workingTimes = $block->getShopWorkingTimeArray();
$workingTimesToJs = json_encode($block->getShopWorkingTimes());
$isAppointmentEnabled = $block->isAppointmentEnabled();
$allTimeSlots = $block->getTimeSlots();
$wishlist = $block->getCustomerWhislist();
$iframeExternal = $block->getStoreIframeExternalAppointment();
?>
<div class="shop-view-wrapper">
    <div class="left-side">
        <div class="shop-info">
            <h3 class="shop-name"><?= $shop['title']; ?></h3>
            <div class="shop-street"><?= $shop['street']; ?></div>
            <?php if ($shop['postcode']) { ?><div class="shop-street"><?= $shop['postcode']; ?></div> <?php } ?>
            <div class="shop-city"><?= $shop['city']; ?></div>
            <?php if ($shop['region']) { ?><div class="shop-region"><?= $shop['region']; ?></div> <?php } ?>
            <?php if ($shop['country']) { ?><div class="shop-country">(<?= $shop['country']; ?>)</div> <?php } ?>
            <?php if ($shop['phone_1']) { ?><div class="shop-first-phone"><?= $shop['phone_1']; ?></div> <?php } ?>
            <?php if ($shop['phone_2']) { ?><div class="shop-second-phone"><?= $shop['phone_2']; ?></div> <?php } ?>
            <?php if ($shop['email']) { ?><div class="shop-email"><?= $shop['email']; ?></div> <?php } ?>
        </div>
        <div class="shop-working-times">
            <h4><?php echo __('Opening hours'); ?></h4>
            <?php foreach ($workingTimes as $day => $time) { ?>
                <div class="shop-working-day"><?php echo __($day) . ' ' . $time?></div>
            <?php } ?>
        </div>
    </div>
    <div class="right-side">
        <?php if ($wishlist) { ?>
            <div class="wishlist-appointment" id="wishlist-appointment" data-mage-init='{"appointment_wishlist":{}}'>
                <div class="wishlist-panel">
                    <h4 class="wishlist-appointment-title"><?php echo __('You have some products in your wishlist, do you want to try it on in this boutique?') ?></h4>
                    <button id="view-wishlist" class="primary">
                        <span><?php echo __('view your wishlist'); ?></span>
                    </button>
                </div>

                <div class="wishlist-wrapper">
                    <h3><?php echo __('Your wishlist'); ?></h3>
                    <div class="wishlist-info">
                        <?php foreach ($wishlist as $item) {
                            $wishlistProduct = $item->getProduct();
                            ?>
                            <div class="wishlist-product-info-container">
                                <img class="wishlist-product-image" src="<?php echo $block->getProductImg($wishlistProduct) ?>">
                                <div class="wishlist-product-info-wrapper">
                                    <p class="wishlist-product-name"><?php echo $wishlistProduct->getName(); ?></p>
                                    <p class="wishlist-product-sku"><?php echo $wishlistProduct->getSku(); ?></p>
                                </div>
                                <div class="wishlist-product-price">
                                    <p class="product-price"><?php echo $block->getProductPrice($wishlistProduct); ?></p>
                                </div>
                                <input id="<?php echo $wishlistProduct->getSku(); ?>" value="<?php echo $wishlistProduct->getName() . "|" . $wishlistProduct->getSku() . "|" . $block->getProductPrice($wishlistProduct) . "|" . $block->getProductImg($wishlistProduct) ?>" type="checkbox" class="checkbox wishlist-checkbox" name="<?php echo $wishlistProduct->getName() ?>">
                                <label for="<?php echo $wishlistProduct->getName() ?>"><?php echo __('Try') ?></label>
                            </div>
                        <?php } ?>
                    </div>
                </div>

            </div>
        <?php } ?>

        <?php if ($product) { ?>
            <div class="product-wrapper">
                <h3 class="product-wrapper-title"><?php echo __('Chosen product'); ?></h3>
                <div class="product-info">
                    <img class="product-image" src="<?php echo $block->getProductImg($product) ?>">
                    <div class="product-info-wrapper">
                        <p class="product-name"><?php echo $product->getName(); ?></p>
                        <p class="product-sku"><?php echo $product->getSku(); ?></p>
                    </div>
                    <div class="product-price">
                        <p class="product-price"><?php echo $block->getProductPrice($product); ?></p>
                    </div>
                </div>
            </div>
        <?php } ?>
        <?php if($isAppointmentEnabled && $iframeExternal === null) { ?>
            <h3 class="form-title"><?php echo __('Book an appointment') ?></h3>
            <form action="<?php echo $block->getFormAction() ?>" method="post" id="booking-form" class="booking-form"
            data-mage-init='{"storelocator_appointment":
            {"workingDays":<?php echo $workingTimesToJs ?>,
            "timeSlots":<?php echo $allTimeSlots ?>,
            "product_name":"<?php if ($product) { echo $product->getName(); } ?>",
            "product_sku":"<?php if ($product) { echo $product->getSku(); } ?>",
            "product_price":"<?php if ($product) { echo $block->getProductPrice($product); } ?>",
            "product_image":"<?php if ($product) { echo $block->getProductImg($product); } ?>"
            },
            "validation":{}
            }'
            data-hasrequired="* Required Fields">
            <fieldset class="fieldset">
                <div class="field field-name required">
                    <label class="label" for="appointment_name"><span><?php /* @escapeNotVerified */ echo __('Name') ?></span></label>
                    <div class="control">
                        <input title="appointment_name" name="appointment_name" class="input-text required" type="text"/>
                    </div>
                </div>
                <div class="field field-lastname required">
                    <label class="label" for="appointment_lastname"><span><?php /* @escapeNotVerified */ echo __('Lastname') ?></span></label>
                    <div class="control">
                        <input name="appointment_lastname" class="input-text" type="text" data-validate="{required:true}"/>
                    </div>
                </div>
                <div class="field field-phone required">
                    <label class="label" for="appointment_phone"><span><?php /* @escapeNotVerified */ echo __('Phone') ?></span></label>
                    <div class="control">
                        <input name="appointment_phone" class="input-text" type="tel" data-validate="{required:true}"/>
                    </div>
                </div>
                <div class="field field-email required">
                    <label class="label" for="appointment_email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
                    <div class="control">
                        <input name="appointment_email" class="input-text" type="email" data-validate="{required:true}"/>
                    </div>
                </div>
                <div class="field field-date required">
                    <label class="label" for="appointment_date"><span><?php /* @escapeNotVerified */ echo __('Choose a date') ?></span></label>
                    <div class="control">
                        <input id="appointment_date" name="appointment_date" class="input-text" type="text" data-validate="{required:true}"/>
                    </div>
                </div>
                <div class="field field-time-slot required">
                    <label class="label" for="appointment_time_slot"><span><?php /* @escapeNotVerified */ echo __('Choose a time slot') ?></span></label>
                    <div class="control">
                        <select id="appointment_time_slot" name="appointment_time_slot" disabled class="input-text" data-validate="{required:true}">
                            <option value=""><?php echo __('Choose a date first') ?></option>
                        </select>
                    </div>
                </div>
                <div class="field field-appointment-message">
                    <label class="label" for="appointment_message"><span><?php /* @escapeNotVerified */ echo __('Message') ?></span></label>
                    <div class="control">
                        <textarea name="appointment_message"><?php echo '' ?></textarea>
                    </div>
                </div>

                <h6 class="contact-time-title"><?php echo __('We will contact you by phone, when do you prefer to be contacted?'); ?></h6>

                <div class="field field-appointment-hours required">
                    <label class="label" for="appointment_hours"><span><?php /* @escapeNotVerified */ echo __('Contact time') ?></span></label>
                    <div class="control">
                        <select name="appointment_hours" class="input-text" data-validate="{required:true}">
                            <option value="morning"><?php echo __('Morning') ?></option>
                            <option value="afternoon"><?php echo __('Afternoon') ?></option>
                            <option value="evening"><?php echo __('Evening') ?></option>
                        </select>
                    </div>
                </div>
                <?php if($block->getChildHtml('appointment.privacy')):?>
                    <div class="privacyPolicy-wrap">
                        <div class="field privacy required">
                            <input type="checkbox" name="privacy" data-validate="{required:true}"  title="<?php /* @escapeNotVerified */ echo __('Privacy Policy') ?>"   class="checkbox" />
                            <label class="label" for="privacy-policy">
                                <?php echo $block->getChildHtml('appointment.privacy')?>
                            </label>
                        </div>
                    </div>
                <?php endif;?>
            </fieldset>

            <button type="submit" class="primary" id="appointment-submit">
                <span>
                    <?php echo __('book an appointment'); ?>
                </span>
            </button>
        </form>
        <div id="submit-success-section" class="submit-success-section">
            <div class="appointment-success" style="display: none;">
                <h5 class="appointment-thankyou"><?php echo __('Thank you for booking your appointment, It will be confirmed directly by the boutique that you have chosen') ?></h5>
                <button class="primary" onclick="window.location.href='<?php echo $this->getUrl(); ?>'">
                    <span>
                        <?php echo __('Continue shopping') ?>
                    </span>
                </button>
            </div>
            <h5 class="appointment-error" style="display: none;"></h5>
        </div>
        <?php } else if($iframeExternal != null) { ?>
            <?php echo $block->getStoreIframeExternalAppointment();?>
        <?php } ?>
    </div>
</div>

<script>
    window.wishlistItems = [];
</script>
