<?php
$this->load->view("top_application");
$sizeArray = explode(',', $res['size_ids']);
$colorArray = explode(',', $res['color_ids']);
$sizeArr = array();
if ($this->input->get_post('cfn') == 'et') {
  $dataTmp = $this->cart->contents();
  $productId = (int) $this->uri->segment(3);
  $sizeArr = array();
  foreach ($dataTmp as $item) {
    if ($item['pid'] == $productId) {
      $sizeArr = $item['options']['Size'];
      break;
    }
  }
}
?>
<!-- breadcrumb -->
<link href='<?php echo theme_url(); ?>magiczoomplus/magiczoomplus.css' rel='stylesheet' type='text/css'>
<link href='<?php echo theme_url(); ?>magiczoomplus/magiczoomplus-inline.css' rel='stylesheet' type='text/css'>
<script src="<?php echo theme_url(); ?>magiczoomplus/magiczoomplus.js"></script>
</script>
<div class="main-container col2-right-layout">
  <div class="main">
    <div class="container">
      <div class="row">
        <!-- breadcrumb -->
        <div class="breadcrumb clearfix">
          <div class="container" >
            <a class="home" href="<?php echo site_url(); ?>" title="Return to Home">Home</a>
            <span class="navigation-pipe">&nbsp;</span>
            <span class="navigation_page"><?php echo $res['product_name']; ?></span>
            <span class="navigation-pipe">&nbsp;</span>
            <span class="navigation_page">Customize Your Fit</span>
          </div>
        </div>
        <!-- ./breadcrumb -->
        <div class="col-main col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="row">
            <div id="messages_product_view">
            </div>
            <div class="product-view">
              <div class="product-essential">
                <input type="hidden" value="MG4MpXwwnitHheJz" name="form_key">
                <div class="no-display">
                  <input type="hidden" value="916" name="product">
                  <input type="hidden" value="" id="related-products-field" name="related_product">
                </div>
                <div id="product">
                  <div class="product-img-box col-lg-7 col-md-7col-sm-7 col-xs-12">
                    <div class="inner">
                      <div class="img-left">
                        <div class="product-image product-image-zoom">
                          <div class="product-image-gallery">
                            <div class="preview">
                              <div class="app-figure" id="zoom-fig"> 
                                <div class="row">
                                  <div class="col-lg-9 col-sm-9 col-xs-9">
                                    <a id="Zoom-1" class="MagicZoom" title="" href="<?php echo get_image('product_images', $res['media'], '', '', 'R'); ?>" data-image="<?php echo get_image('product_images', $res['media'], '800', '1634', 'R'); ?>" > 
                                      <img src="<?php echo get_image('product_images', $res['media'], '', '', 'AR'); ?>" alt=""/> 
                                    </a>
                                  </div>
                                  <?php
                                  if (is_array($media_res) && !empty($media_res)) {
                                    ?>
                                    <div class="col-lg-3 col-sm-3 col-xs-3">
                                      <div class="selectors">
                                        <?php
                                        foreach ($media_res as $mkey => $mval) {
                                          ?>
                                          <a data-zoom-id="Zoom-1" title="" href="<?php echo get_image('product_images', $mval['media'], '', '', 'R'); ?>" data-image="<?php echo get_image('product_images', $mval['media'], '', '', 'AR'); ?>"> 
                                            <img src="<?php echo get_image('product_images', $mval['media'], '80', '161', 'R'); ?>" /> 
                                          </a>
                                          <?php
                                        }
                                        ?>
                                      </div>
                                    </div>
                                  </div>
                                  <?php
                                }
                                ?>

                              </div>
                            </div>
                          </div>
                        </div>
                        <!--product-image-zoom-->
                      </div>
                      <!--more-views-->
                    </div>
                  </div>
                  <div class="product-shop col-lg-5 col-md-5 col-sm-5 col-xs-12">
                    <div class="pb-right-column col-xs-12" >
                      <div class="tabs-style-bar" >
                        <h3 class="review-title">STEP 1 : What's your size? </h3>
                      </div>
                      <div class="content-discription">
                        <form method="post" class="cart" id="cartForm" action="<?php echo site_url() ?>cart/add_to_cart" >
                          <section class="section1">
                            <h4 class="title-text" >Choose your custom size:</h4>
                            <div class="select-size">
                              <p>Go with a custom size and give us your body measurements in inches:</p>
                              <p>Make it to your exact size! It is easy!<br/>
                                (For custom size and/or custom style, a single fee of $9.95 per garment will apply)</p>
                              <p>If you've shopped with us before, please sign in to your account so that we can pre-fill your size profile information.</p>
                              <ul class="select-size-drop">
                                <li>
                                  <div class="s-size-d">
                                    <p>Bust</p>
                                    <select name="bust" id="bust" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[0]) && $sizeArr[0] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/bust-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>Chest</p>
                                    <select name="chest" id="chest" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[1]) && $sizeArr[1] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/chest-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>Hip</p>
                                    <select name="hip" id="hip" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[2]) && $sizeArr[2] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/hip-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>Shoulder</p>
                                    <select name="shoulder" id="shoulder" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[3]) && $sizeArr[3] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/shoulder-to-shoulder-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>Under Bust</p>
                                    <select name="under_bust" id="under_bust" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[4]) && $sizeArr[4] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/underbust-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>Upper Arm</p>
                                    <select name="upper_arm" id="upper_arm" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[5]) && $sizeArr[5] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/upper-arm-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>Waist</p>
                                    <select name="waist" id="waist" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[6]) && $sizeArr[6] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/waist-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                              </ul>
                              <p class="m-tb20">The measurements below are optional. If you have a long torso or long legs, please consider providing them to help us achieve a great fit. For best results, please ask someone to help measure you</p>
                              <ul class="select-size-drop">
                                <li>
                                  <div class="s-size-d">
                                    <p>High Point Shoulder to Bust Point</p>
                                    <select name="point_shoulder_bust" id="point_shoulder_bust" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[7]) && $sizeArr[7] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/hps-to-apex-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>High Point Shoulder to Waist</p>
                                    <select name="point_shoulder_waist" id="point_shoulder_waist" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[8]) && $sizeArr[8] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/hps-to-waist-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                                <li>
                                  <div class="s-size-d">
                                    <p>High Point Shoulder to Knee</p>
                                    <select name="point_shoulder_knee" id="point_shoulder_knee" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 20; $i <= 100; $i++) {
                                        $sel = (isset($sizeArr[9]) && $sizeArr[9] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                    <span class="forhelp">
                                      <a class="fancybox fancybox.iframe img-popup-link" href="<?php echo theme_url(); ?>images/hps-to-knee-size.jpg" id="">?</a>
                                    </span>
                                  </div>
                                </li>
                              </ul>
                            </div>
                            <div class="tabs-style-bar">
                              <h3 class="review-title">STEP 2 : What's your height (cm) </h3>
                            </div>
                            <div class="select-size">
                              <p>We always adjust our garments to your height at no additional cost.</p>
                              <ul class="select-size-drop">
                                <li>
                                  <div class="s-size-d">
                                    <select name="height" id="height" onchange="">
                                      <option value="">SELECT</option>
                                      <?php
                                      for ($i = 90; $i <= 210; $i++) {
                                        $sel = (isset($sizeArr[10]) && $sizeArr[10] == $i) ? 'selected' : '';
                                        ?>
                                        <option value="<?php echo $i; ?>" <?php echo $sel; ?>><?php echo $i; ?></option>
                                        <?php
                                      }
                                      ?>
                                    </select>
                                  </div>
                                </li>
                              </ul>
                            </div>
                            <div class="select-size">
                              <p>Length</p>
                              <ul class="sleeve-img clearfix">
                                <li> 
                                  <img src="<?php echo theme_url(); ?>images/as-shown.jpg" alt="" class="length  <?php echo (isset($sizeArr[13]) && $sizeArr[13] == 'As Shown' || $this->input->get_post('cfn') != 'et') ? 'sactive' : ''; ?>">
                                  <span class="vector-title">As Shown</span></li>
                                <li><img src="<?php echo theme_url(); ?>images/mini.jpg" alt="" class="length <?php echo (isset($sizeArr[13]) && $sizeArr[13] == 'Mini') ? 'sactive' : ''; ?>">
                                  <span class="vector-title">Mini</span></li>
                                <li ><img src="<?php echo theme_url(); ?>images/above-knee-length.jpg" alt="" class="length <?php echo (isset($sizeArr[13]) && $sizeArr[13] == 'Above knee length') ? 'sactive' : ''; ?>">
                                  <span class="vector-title">Above knee length</span></li>
                                <li ><img src="<?php echo theme_url(); ?>images/knee-length.jpg" alt="" class="length <?php echo (isset($sizeArr[13]) && $sizeArr[13] == 'Knee length') ? 'sactive' : ''; ?>">
                                  <span class="vector-title">Knee length</span></li>
                              </ul>
                            </div>
                            <input type="hidden" name="neckline" id="neckline" class="form-control" value="<?php echo (isset($sizeArr[11])) ? $sizeArr[11] : 'As Shown'; ?>" />
                            <input type="hidden" name="sleev" id="sleev" class="form-control" value="<?php echo (isset($sizeArr[12])) ? $sizeArr[12] : 'As Shown'; ?>" />
                            <input type="hidden" name="length" id="length" class="form-control" value="<?php echo (isset($sizeArr[13])) ? $sizeArr[13] : 'As Shown'; ?>" />
                            <input type="hidden" name="size" id="size" value="custom" />
                            <input type="hidden" name="product_id" id="product_cart_id" class="form-control" value="<?php echo $res['products_id']; ?>" />
                            <input type="hidden" name="cfn" value="<?php echo $this->input->get_post('cfn'); ?>">
                          </section>
                        </form>
                      </div>	
                    </div>
                  </div> 
                </div>
              </div>
            </div>
          </div>
        </div>        
      </div>
    </div>
    <footer id="footer2" class="custom-footer" >
      <div class="footer-bottom">
        <div class="container">
          <div class="footer-bottom-wapper">
            <div class="row">
              <div class="col-sm-6">
                <div class="footer-coppyright" style="text-align:left;">
                  <strong>Made to Order for you</strong><br/>
                  Please allow 13-17 days for us to make it and get it to your door.
                </div>
              </div>
              <div class="col-sm-6" >
                <div class="pull-right"> <div class="final-price"><i class="fa fa-inr"></i><?php echo ($res['product_discounted_price'] > 0) ? $res['product_discounted_price'] : $res['product_price']; ?></div>
                  <a class="buttonbag buttonbag_bottom" href="javascript:void(0);">Add to Cart</a></div></div>
            </div>
          </div>
        </div>
      </div>
      <!-- ./footer paralax-->
    </footer>

  </div>
</div>
<script type="text/javascript">
  var mzOptions = {
  };
  mzOptions = {
    onZoomReady: function () {
      console.log('onReady', arguments[0]);
    }
    ,
    onUpdate: function () {
      console.log('onUpdated', arguments[0], arguments[1], arguments[2]);
    }
    ,
    onZoomIn: function () {
      console.log('onZoomIn', arguments[0]);
    }
    ,
    onZoomOut: function () {
      console.log('onZoomOut', arguments[0]);
    }
    ,
    onExpandOpen: function () {
      console.log('onExpandOpen', arguments[0]);
    }
    ,
    onExpandClose: function () {
      console.log('onExpandClosed', arguments[0]);
    }
  };
  var mzMobileOptions = {
  };
</script>
<?php $this->load->view("bottom_application"); ?>
<script type="text/javascript" src="http://webpulse.co/rinku-sobti/assets/designer/themes/default/lib/fancyBox/jquery.fancybox.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('.fancybox').fancybox();
    $('.fancybox-buttons').fancybox({
      openEffect: 'none',
      closeEffect: 'none',
      prevEffect: 'none',
      nextEffect: 'none',
      closeBtn: false,
      helpers: {
        title: {
          type: 'inside'
        },
        buttons: {}
      },
      afterLoad: function () {
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
      }
    });

    $('.fancybox-thumbs').fancybox({
      prevEffect: 'none',
      nextEffect: 'none',
      closeBtn: false,
      arrows: false,
      nextClick: true,
      helpers: {
        thumbs: {
          width: 50,
          height: 50
        }
      }
    });

    $('.fancybox-media').attr('rel', 'media-gallery').fancybox({
      openEffect: 'none',
      closeEffect: 'none',
      prevEffect: 'none',
      nextEffect: 'none',
      arrows: false,
      helpers: {
        media: {},
        buttons: {}
      }
    });

    /*
     *  Open manually
     */

    $("#fancybox-manual-a").click(function () {
      $.fancybox.open('1_b.jpg');
    });

    $("#fancybox-manual-b").click(function () {
      $.fancybox.open({
        href: 'iframe.html',
        type: 'iframe',
        padding: 5
      });
    });

    $("#fancybox-manual-c").click(function () {
      $.fancybox.open([
        {
          href: '1_b.jpg',
          title: 'My title'
        }, {
          href: '2_b.jpg',
          title: '2nd title'
        }, {
          href: '3_b.jpg'
        }
      ], {
        helpers: {
          thumbs: {
            width: 75,
            height: 50
          }
        }
      });
    });


  });
</script>

<script type="text/javascript">
  $('.length').click(function () {
    $('.length').removeClass('sactive');
    $(this).addClass('sactive');
    $('#length').val($(this).next('.vector-title').html());
  });

  $('.buttonbag_bottom').click(function () {
    if ($('#bust').val() == "") {
      alert("Please select bust size for custom size in step 1.");
      $('#bust').focus();
      return false;
    }
    if ($('#chest').val() == "") {
      alert("Please select chest size for custom size in step 1.");
      $('#chest').focus();
      return false;
    }
    if ($('#hip').val() == "") {
      alert("Please select hip size for custom size in step 1.");
      $('#hip').focus();
      return false;
    }
    if ($('#shoulder').val() == "") {
      alert("Please select shoulder size for custom size in step 1.");
      $('#shoulder').focus();
      return false;
    }
    if ($('#under_bust').val() == "") {
      alert("Please select under bust size for custom size in step 1.");
      $('#under_bust').focus();
      return false;
    }
    if ($('#upper_arm').val() == "") {
      alert("Please select upper arm size for custom size in step 1.");
      $('#upper_arm').focus();
      return false;
    }
    if ($('#waist').val() == "") {
      alert("Please select waist size for custom size in step 1.");
      $('#waist').focus();
      return false;
    }
    if ($('#point_shoulder_bust').val() == "") {
      alert("Please select High Point Shoulder to Bust Point size for custon size in step 1.");
      $('#point_shoulder_bust').focus();
      return false;
    }
    if ($('#point_shoulder_waist').val() == "") {
      alert("Please select High Point Shoulder to Waist size for custom size in step 1.");
      $('#point_shoulder_waist').focus();
      return false;
    }
    if ($('#point_shoulder_knee').val() == "") {
      alert("Please select High Point Shoulder to Knee size for custom size in step 1.");
      $('#point_shoulder_knee').focus();
      return false;
    }
    if ($('#height').val() == "") {
      alert("Please select height for custom size in step 2.");
      $('#height').focus();
      return false;
    }
    //submit form
    $('#cartForm').submit();

  });
</script>
