@extends('users.layouts.index')


@section('page_content')

<link href="{{ asset('css/customization.css') }}" rel="stylesheet">

<section>

    <div class="jumbotron jumbotron-fluid overlay-primary"
    style="background-image:url(https://nofearpetmats.com/wp-content/themes/nofear/img/hero-inner.jpg)">
        <div class="container">
                {{-- <div class="jumbo-heading">
                    <h1>Customization</h1>
                </div> --}}
        </div>
    </div>
    <div class="divider-zindex-top">
        <img src="https://nofearpetmats.com/wp-content/themes/nofear/img/svg/top-divider.svg" alt="">
    </div>



    <div class="container-fluid costomaizmain">
        <div class="col-sm-6 col-xs-12">
            <h2 class="heading" id="mycustomize">CUSTOMIZATION</h2>
            <p class="customizDesc" id="mats">Our mats are 100% Customizable for an additional fee, as listed below:</p>
            <ul class="makesul">
                <li>Same design on both sides: Onetime $20.00* set-up fee, with up to three proofs included.</li>
                {{-- <li>One time set up fee $20.00* up to 3 proofs included.</li> --}}
                <li>Different designs on both sides: Onetime $35.00* set-up fee, with up to three proofs included.</li>
                {{-- <li>One time set up fee $35.00* up to 3 proofs included.</li> --}}
                <li>High resolution artwork to be provided by the client</li>
            </ul>
        </div>
        <div class="col-sm-6 col-xs-12">
            <img src="{{ asset('images/what2.jpeg') }}" class="img-responsive imgCustomize" alt="">
        </div>
    </div>


    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="blackline">

                </div>
            </div>
        </div>
    </div>


    <div class="variationList container-fluid costomaizmain">
        <div class="variationListHeading">
            <h4>We can create the following variations:</h4>
        </div>
        <ul class="makesul">
            <li>Same solid color on both sides with no printing. </li>



            <li>Different solid colors on each side with no printing (e.g., blue on one side and yellow on the other).
            </li>
            <li>Design on one side and solid color on the other.</li>
            <li>Different design on each side can be done, eg. Dog friendly side and a cat friendly side. </li>
            <li>Clinic or Company logos. </li>

            {{-- <li>Customize your colors. </li> --}}
            {{-- <li>Unlike our competitors we customize on color backgrounds vs. white only </li> --}}
        </ul>
        <div class="variationListHeadings">
            <h4>The price for custom mats varies with the number of colors used:</h4>
        </div>
        <ul class="makesul">
            <li>2 color printing: $34.99 ea. </li>
            <li>3 color printing: 37.99 ea </li>
            <li>4 color printing: 39.99 ea. </li>
        </ul>
        {{-- <ul class="makesul"> --}}
         <h3> Minimum quantity for custom mats: 10 units</h3>
         <h3> Lead time for custom mats: six weeks</h3>
         <h3> Cage, kennel, and other mats are available on a special order basis.</h3>
         <h3> If you have questions or need further clarification, please reach out to our team! </h3>
         <h3> *The set-up fee is non- refundable</h3>
            {{-- <li>Lead time for custom mats: six weeks </li>
            <li>Cage, kennel and other mats are available on a special order basis. </li>
            <li>If you have questions or need further clarification, please reach out to our team!  </li> --}}

            {{-- <li>*The set-up fee is non- refundable </li> --}}
        {{-- </ul> --}}
        <div class="col-md-6 shopformatTXT">
            <h1><strong>Shop Our Mats</strong></h1>
            <p>
                NoFear Pet Mats are an innovative product designed to give pets confidence and security,
                 and improve their experience in your facility. Calmer pets equal easier visits and happier clients—see
                  the difference for yourself. Our mats are available in a variety of colors and sizes,
                and are completely customizable. Order via our website, email us at info@nofearpetmats.com, or call 800-616-7674. 
            </p>
            {{-- <img src="{{ asset('images/JVF03164.jpg') }}" alt="Snow" style="width:30%"  class="img-responsive"> --}}

        </div>
    </div>
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-4" style=" width:15% ;margin-left: 65px;  ";>
            <div class="WCUCOLSd">
                <img src="{{ asset('images/JVF03164.jpg') }}"  class="img-responsive">
            </div>
        </div>
        <div class="col-md-4 " style="width:15%">
            <div class="WCUCOLS">
                <img src="{{ asset('images/JVF03165.jpg') }}"  class="img-responsive">
            </div>
        </div>
        <div class="col-md-4 " style="width:15%">
            <div class="WCUCOLS">
                <img src="{{ asset('images/JVF03171.jpg') }}"  class="img-responsive">
            </div>

        </div>
         <div class="col-md-4 " style="width:15%">
            <div class="WCUCOLS">
                <img src="{{ asset('images/JVF03175.jpg') }}"  class="img-responsive">
            </div>

        </div>
        <div class="col-md-4 " style="width:15%">
            <div class="WCUCOLS">
                <img src="{{ asset('images/JVF03171.jpg') }}"  class="img-responsive">
            </div>
        </div>
        <div class="col-md-4 " style="width:15%">
            <div class="WCUCOLS">
                <img src="{{ asset('images/JVF03165.jpg') }}"  class="img-responsive">
            </div>
        </div>

    </div>







    </div>

</section>

<section>
    <div class="blackplace">
        <div class="container-fluid">
            <div class="row">
                <div class="blacktext">
                    <h4>If you need further clarification, please contact us (provide a radio button that takes customer
                        to email template)</h4>
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="row">
        <div class="col-md-4 ">
            <div class="blacktext">
                <h4>If you need further clarification, please contact us (provide a radio button that takes customer
                    to email template)</h4>
            </div>
        </div>
    </div> --}}
</section>

<section>
    <div class="petsline">
        <div class="container-fluid">
            @if ($message = Session::get('success'))
            {{-- <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div> --}}
            @endif
            <div class="row">
                <div class="col-sm-12">
                    <div class="petslinetext">
                        <h4>Customize Pet Mats</h4>
                    </div>
                    <div class="petsblackline"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="petmatsform">
        <div class="container-fluid">
            <div class="row">
                <div class="myforms">
                    {!! Form::open(['id'=>'my_form','method' => 'POST', 'route' => ['customer.save' ],
                    'files'=>true])!!}
                    {{-- <form method="get" action="{!!asset('user/custom_order/save')!!}" enctype="multipart/form-data"> --}}
                    <div class="form-row">
                        <div class="form-group myform col-md-6">
                            <input type="text" name="name" class="form-control myformin" id="inputName"
                                placeholder="Name" required>
                        </div>
                        <div class="form-group myform col-md-6">
                            <input type="email" name="email" class="form-control myformin" id="inputEmail"
                                placeholder="Email" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-4">

                            <input type="text" name="size" class="form-control myformin" id="size" placeholder="size"
                                required>
                        </div>
                        <div class="form-group col-md-4">
                            <input type="text" name="color" class="form-control myformin" id="color" placeholder="color"
                                required>
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <input type="number" name="quantity" class="form-control myformin" id="quantity" min="10"
                            placeholder="quantity" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-12">
                        <textarea class="form-control myformin" name="construction" rows="5" id="construction"
                            placeholder="Instruction" spellcheck="false" required></textarea>
                    </div>
                </div>
            </div>




            <div class="custom-file-upload">
                <input type="file" id="file" name="myfiles[]" multiple />
            </div>
            <button type="submit" class="btn btn-primary click">Submit</button>

        </div>


    </div>
    {!!Form::close()!!}




</section>
<div class="container">
    @if ($message = Session::get('success'))
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog ">

            <!-- Modal content-->
            <div class="modal-content modalbgio">
                <div class="modal-body">
                    <div class="text-center">
                        <img src="{{ asset('images/tick.png') }}" alt="">
                        <p class="placees"> Our representive would contact you shortly</p>
                        <p class="placeu">YOUR ORDER HAS BEEN PLACED SUCCESSFULLY.</p>
                        <p class="placer">THANKYOU </p>

                        <div class="row text-cnter">
                            <div class="col-sm-12">

                                <div class="modal-footer">



                                    <a href='{{url('user/home')}}' class="btn btn-lg btngotocart">

                                        <span> <img src="{{ asset('images/left.png') }}"/>
                                            </span> Go to Home</a>

                                </div>

                            </div>
                            <div class="col-sm-4"></div>
                        </div>

                    </div>
                </div>

            </div>

        </div>
    </div>





 @endif
    </div>


@endsection




@section('app_jquery')

<script>

    ///

    $(window).on('load',function(){
        $('#myModal').modal('show');
    });


    ////
    ;(function($) {

// Browser supports HTML5 multiple file?
var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined',
    isIE = /msie/i.test( navigator.userAgent );

$.fn.customFile = function() {

  return this.each(function() {

    var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input
        $wrap = $('<div class="file-upload-wrapper">'),
        // $input = $('<input type="text" class="file-upload-input" />'),
        // Button that will be used in non-IE browsers
        $button = $('<button type="button" class="file-upload-button">UPLOAD </button>'),
        // Hack for IE


        $label = $('<label class="file-upload-button"   for="'+ $file[0].id +'">Select a File</label>');
        $input = $('<input type="readonly" id="uploader" class="file-upload-input" disabled  />'),


    // Hide by shifting to the left so we
    // can still trigger events
    $file.css({
      position: 'absolute',
      left: '-9999px'
    });

    $wrap.insertAfter( $file )
      .append( $file,( isIE ? $label : $button ),  $input );

    // Prevent focus
    $file.attr('tabIndex', -1);
    $button.attr('tabIndex', -1);

    $button.click(function () {
      $file.focus().click(); // Open dialog
    });

    $file.change(function() {

      var files = [], fileArr, filename;

      // If multiple is supported then extract
      // all filenames from the file array
      if ( multipleSupport ) {
        fileArr = $file[0].files;
        for ( var i = 0, len = fileArr.length; i < len; i++ ) {
          files.push( fileArr[i].name );
        }
        filename = files.join(', ');

      // If not supported then just take the value
      // and remove the path to just show the filename
      } else {
        filename = $file.val().split('\\').pop();
      }

      $input.val( filename ) // Set the value
        .attr('title', filename) // Show filename in title tootlip
        .focus(); // Regain focus

    });

    $input.on({
      blur: function() { $file.trigger('blur'); },
      keydown: function( e ) {
        if ( e.which === 13 ) { // Enter
          if ( !isIE ) { $file.trigger('click'); }
        } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del
          // On some browsers the value is read-only
          // with this trick we remove the old input and add
          // a clean clone with all the original events attached
          $file.replaceWith( $file = $file.clone( true ) );
          $file.trigger('change');
          $input.val('');
        } else if ( e.which === 9 ){ // TAB
          return;
        } else { // All other keys
          return false;
        }
      }
    });

  });

};

// Old browser fallback
if ( !multipleSupport ) {
  $( document ).on('change', 'input.customfile', function() {

    var $this = $(this),
        // Create a unique ID so we
        // can attach the label to the input
        uniqId = 'customfile_'+ (new Date()).getTime(),
        $wrap = $this.parent(),

        // Filter empty input
        $inputs = $wrap.siblings().find('.file-upload-input')
          .filter(function(){ return !this.value }),

        $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>');

    // 1ms timeout so it runs after all other events
    // that modify the value have triggered
    setTimeout(function() {
      // Add a new input
      if ( $this.val() ) {
        // Check for empty fields to prevent
        // creating new inputs when changing files
        if ( !$inputs.length ) {
          $wrap.after( $file );
          $file.customFile();
        }
      // Remove and reorganize inputs
      } else {
        $inputs.parent().remove();
        // Move the input so it's always last on the list
        $wrap.appendTo( $wrap.parent() );
        $wrap.find('input').focus();
      }
    }, 1);

  });
}

}(jQuery));

$('input[type=file]').customFile();





</script>

@endsection