@extends('layouts.app')
@section('content')
    <section>
        <div class="container">
            <h2 class="sectionHeading">CarWrap page</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <form id="msform" name="steps">
                        @csrf
                        <!-- progressbar -->
                            <ul id="progressbar">
                                <li class="active"><span>01 <small>step</small></span></li>
                                <li><span>02 <small>step</small></span></li>
                                <li><span>03 <small>step</small></span></li>
                                <li><span>04 <small>step</small></span></li>
                                <li><span>05 <small>step</small></span></li>
                                <li><span>06 <small>step</small></span></li>
                            </ul>
                            <!-- <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                    aria-valuemin="0" aria-valuemax="100"></div>
                            </div> -->
                            <fieldset class="step-1">
                                <div class="form-card">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="vehicleContent">
                                                <h2>Vehicle Graphic Estimator</h2>
                                                <p>Please note that your information is saved on our as you enter it.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <label class="wrapContent">Wrap Type *</label>
                                        </div>
                                        <div class="col-md-6">

                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/jeep1.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="wrap_type" value="Commercial">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Commercial</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/jeep2.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="wrap_type" value="Color Change">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Color Change</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="button" name="next" class="next action-button" value="Next"/>
                            </fieldset>
                            <fieldset class="step-2">
                                <div class="form-card">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label class="wrapContent">Select Vechicle Type *</label>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/vehicle1.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_type" value="Sedan">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Sedan</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/vehicle2.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_type" value="Crossover">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Crossover</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/vehicle3.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_type" value="SUV">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>SUV</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/vehicle4.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_type" value="Pickup">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Pickup</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/vehicle5.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_type" value="Van">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Van</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/vehicle6.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_type" value="Box Truck">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Box Truck</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/vehicle7.png')}}" class="img-fluid"
                                                         alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_type" value="Trailer">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Trailer</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="button" name="next" class="next action-button" value="Next"/>
                                <input type="button" name="previous" class="previous action-button-previous"
                                       value="Previous"/>
                            </fieldset>
                            <fieldset class="step-3">
                                <div class="form-card">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="vehicleContent estimatorHeading">
                                                <h2>Vehicle Graphic Estimator</h2>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="estimatorForm">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>Year *</label>
                                                <input type="text" name="year" class="validate-check">
                                            </div>
                                            <div class="col-md-6">
                                                <label>Make *</label>
                                                <input type="text" name="make" class="validate-check">
                                            </div>
                                            <div class="col-md-6">
                                                <label>Model *</label>
                                                <input type="text" name="model" class="validate-check">
                                                <!--                                                <select>-->
                                                <!--                                                    <option>i3</option>-->
                                                <!--                                                </select>-->
                                            </div>
                                            <div class="col-md-6">
                                                <label>Option *</label>
                                                <select class="validate-check" name="option">
                                                    <option value="No Additional Options">No Additional Options</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Would you Like the Roof Wrapped? *</label>
                                                <select class="validate-check" name="roof_wrapped">
                                                    <option value="No">No</option>
                                                    <option value="Yes">Yes</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Design Option *</label>
                                                <select class="validate-check" name="design_option">
                                                    <option value="Artwork Will be Provided">Artwork Will be Provided
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-md-6" id="length_input_container">
                                                <label>Length (ft)*</label>
                                                <input type="number" name="length" class="validate-check">
                                            </div>
                                            <div class="col-md-6" id="width_input_container">
                                                <label>Width (ft)*</label>
                                                <input type="number" name="width" class="validate-check">
                                            </div>
                                            <div class="col-md-6" id="height_input_container">
                                                <label>Height (ft)*</label>
                                                <input type="number" name="height" class="validate-check">
                                            </div>
                                            <div class="col-md-6">
                                                <label>Quantity*</label>
                                                <input type="number" name="quantity" class="validate-check">
                                            </div>
                                            <div class="col-md-12">
                                                <div class="seContent">
                                                    <h6>Don’t See Your vehicle?</h6>
                                                    <div class="chkBox">
                                                        <input type="checkbox" id="vehicle1" name="vehicle1"
                                                               value="Bike">
                                                        <label for="vehicle1">My vehicle is not listed as an
                                                            option.</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="button" name="next" class="next action-button" value="Next"/>
                                <input type="button" name="previous" class="previous action-button-previous"
                                       value="Previous"/>
                            </fieldset>
                            <fieldset class="step-4">
                                <div class="form-card">
                                    <div class="row estimatorForm">
                                        <div class="col-md-6">
                                            <label>Print Only *</label>
                                            <select class="validate_check" name="is_print">
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label>State *</label>
                                            <select class="validate_check" name="state">
                                                <option value="">Select State</option>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->name }}">{{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label>First name *</label>
                                            <input type="text" class="validate_check" name="first_name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Last name *</label>
                                            <input type="text" class="validate_check" name="last_name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Company name *</label>
                                            <input type="text" class="validate_check" name="company_name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Email *</label>
                                            <input type="text" class="validate_check" name="email">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Phone *</label>
                                            <input type="text" class="validate_check" name="phone">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Date *</label>
                                            <input type="date" class="validate_check" name="date">
                                        </div>
                                    </div>
                                </div>
                                <input type="button" name="next" class="next action-button" value="Next"/>
                                <input type="button" name="previous" class="previous action-button-previous"
                                       value="Previous"/>
                            </fieldset>
                            <fieldset class="step-5">
                                <div class="form-card lastOne">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label class="wrapContent">Select Vechicle Type *</label>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/van1.png')}}" class="img-fluid" alt="img">
                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_types" value="Full Wrap">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Full Wrap</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/van2.png')}}" class="img-fluid" alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_types" value="3/4 Wrap">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>3/4 Wrap</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/van3.png')}}" class="img-fluid" alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_types" value="Half Wrap">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Half Wrap</h6>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="setCheck">
                                                <figure>
                                                    <img src="{{asset('images/van4.png')}}" class="img-fluid" alt="img">

                                                </figure>
                                                <label class="count">
                                                    <input type="radio" name="vehicle_types" value="Spot Graphic">
                                                    <span class="checkmark"></span>
                                                </label>
                                                <h6>Spot Graphic</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="button" name="next" class="next action-button" value="Submit"/>
                                <input type="button" name="previous" class="previous action-button-previous"
                                       value="Previous"/>
                            </fieldset>
                            <fieldset class="step-6">
                                <div class="form-card">
                                    <h2 class="sectionHeading">Commerical Wrap Summary</h2>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="stepSix">
                                                <li>First Name: <span id="view_first_name"></span></li>
                                                <li>Last Name: <span id="view_last_name"></span></li>
                                                <li>Email Address: <span id="view_email"></span></li>
                                                <li>Phone Number: <span id="view_phone"></span></li>
                                                <li>Date: <span id="view_date"></span></li>
                                                <li>Wrap Type: <span id="view_wrap_type"></span></li>
                                                <li>Roof Wrapped: <span id="view_roof_wrapped"></span></li>
                                                <li>Vehicle Type: <span id="view_vehicle_type"></span></li>
                                                <li>Year: <span id="view_year"></span></li>
                                                <li>Make: <span id="view_make"></span></li>
                                                <li>Model: <span id="view_model"></span></li>
                                                <li>Width: <span id="view_width"></span></li>
                                                <li>Height: <span id="view_height"></span></li>
                                                <li>length: <span id="view_length"></span></li>
                                                <li class="d-none">Size: <span id="view_size"></span></li>
                                                <li>Quantity: <span id="view_quantity"></span></li>
                                                <li>Options: <span id="view_option"></span></li>
                                                <li>Graphics Coverage: <span id="view_vehicle_types"></span></li>
                                                <li>Price: <span id="total_price"></span></li>
                                                <input type="hidden" id="cal_price" name="total">
                                            </ul>
                                        </div>
                                        <div class="co-12">
                                            <div class="BtnGroup">
                                                <a href="{{ route('contacts') }}" class="themeBtn">I Need More
                                                    Information's</a>
                                                <button type="button" id="schedule_my_wrap_btn" class="themeBtn">
                                                    Schedule My
                                                    Wrap
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!--                                    <h2 class="purple-text text-center"><strong>SUCCESS !</strong></h2> <br>-->
                                    <!--                                    <div class="row justify-content-center">-->
                                    <!--                                        <div class="col-3"> <img src="https://i.imgur.com/GwStPmg.png"-->
                                    <!--                                                class="fit-image"> </div>-->
                                    <!--                                    </div> <br><br>-->
                                    <!--                                    <div class="row justify-content-center">-->
                                    <!--                                        <div class="col-7 text-center">-->
                                    <!--                                            <h5 class="purple-text text-center">You Have Successfully Signed Up</h5>-->
                                    <!--                                        </div>-->
                                    <!--                                    </div>-->
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        // Next Page And Previous Page Working With Validation
        const _prices = {
            "sedan": [193, 221],
            "crossover": [226, 267],
            "suv": [295, 358],
            "pickup": [285, 324],
            "van": [296, 394]
        };
        var inputs = {};

        $(document).ready(function () {

            var current_fs, next_fs, previous_fs; //fieldsets
            var opacity;
            var current = 1;
            var steps = $('fieldset').length;


            setProgressBar(current);

            $('.next').click(function () {
                current_fs = $(this).parent();
                next_fs = $(this).parent().next();
                let is_error = null;

                if (current_fs.hasClass('step-1')) {
                    if (current_fs.find('input[name=wrap_type]:checked').length === 0) {
                        is_error = "Please select any option!";
                    } else {
                        inputs['wrap_type'] = current_fs.find('input[name=wrap_type]:checked').first().val();
                    }
                } else if (current_fs.hasClass('step-2')) {
                    if (current_fs.find('input[name=vehicle_type]:checked').length === 0) {
                        is_error = "Please select any option!";
                    } else {
                        inputs['vehicle_type'] = current_fs.find('input[name=vehicle_type]:checked').first().val();
                    }
                } else if (current_fs.hasClass('step-3')) {
                    current_fs.find('.validate-check').each(function () {
                        if ($(this).val().trim() === '') {
                            is_error = "Please fill out this " + $(this).attr('name') + " field!";
                            return false;
                        } else {
                            inputs[$(this).attr('name')] = $(this).val().trim();
                        }
                    })
                } else if (current_fs.hasClass('step-4')) {
                    current_fs.find('.validate_check').each(function () {
                        if ($(this).val().trim() === '') {
                            is_error = "Please fill out this " + $(this).attr('name') + " field!";
                            return false;
                        } else {
                            inputs[$(this).attr('name')] = $(this).val().trim();
                        }
                    })
                } else if (current_fs.hasClass('step-5')) {
                    if (current_fs.find('input[name=vehicle_types]:checked').length === 0) {
                        is_error = "Please select any option!";
                    } else {
                        inputs['vehicle_types'] = current_fs.find('input[name=vehicle_types]:checked').first().val();
                        for (const inputsKey in inputs) {
                            if ($('#view_' + inputsKey).length > 0) {
                                $('#view_' + inputsKey).text(inputs[inputsKey]);
                            }
                        }
                        calculateWrapPrice();
                    }
                }
                if (is_error) {
                    toastr.error(is_error);
                    return false;
                }
                //Add Class Active
                $('#progressbar li').eq($('fieldset').index(next_fs)).addClass('active');

                //show the next fieldset
                next_fs.show();
                //hide the current fieldset with style
                current_fs.animate(
                    {opacity: 0},
                    {
                        step: function (now) {
                            // for making fielset appear animation
                            opacity = 1 - now;

                            current_fs.css({
                                display: 'none',
                                position: 'relative'
                            });
                            next_fs.css({opacity: opacity});
                        },
                        duration: 500,
                        start: function () {
                            if (next_fs.hasClass('step-3')) {
                                if (_priceIndex(inputs) !== null) {
                                    $('#length_input_container').hide()
                                    $('#length_input_container').find('input').removeClass('validate-check').val('')
                                    $('#width_input_container').hide()
                                    $('#width_input_container').find('input').removeClass('validate-check').val('')
                                    $('#height_input_container').hide()
                                    $('#height_input_container').find('input').removeClass('validate-check').val('')
                                } else {
                                    $('#length_input_container').show()
                                    $('#length_input_container').find('input').addClass('validate-check')
                                    $('#width_input_container').show()
                                    $('#width_input_container').find('input').addClass('validate-check')
                                    $('#height_input_container').show()
                                    $('#height_input_container').find('input').addClass('validate-check')
                                }
                            }
                        }
                    }
                );
                setProgressBar(++current);
                $('html, body').animate({
                    scrollTop: $("#progressbar").offset().top
                }, 1000);
            });

            $('.previous').click(function () {
                current_fs = $(this).parent();
                previous_fs = $(this).parent().prev();

                //Remove class active
                $('#progressbar li').eq($('fieldset').index(current_fs)).removeClass('active');

                //show the previous fieldset
                previous_fs.show();

                //hide the current fieldset with style
                current_fs.animate(
                    {opacity: 0},
                    {
                        step: function (now) {
                            // for making fielset appear animation
                            opacity = 1 - now;

                            current_fs.css({
                                display: 'none',
                                position: 'relative'
                            });
                            previous_fs.css({opacity: opacity});
                        },
                        duration: 500
                    }
                );
                setProgressBar(--current);
                $('html, body').animate({
                    scrollTop: $("#progressbar").offset().top
                }, 1000);
            });

            function setProgressBar(curStep) {
                var percent = parseFloat(100 / steps) * curStep;
                percent = percent.toFixed();
                $('.progress-bar').css('width', percent + '%');
            }
        });

        function _priceIndex(inputs) {
            const _check = Object.keys(_prices)
            if (inputs['vehicle_type']) {
                const val = inputs['vehicle_type'].toLowerCase()
                return _check.indexOf(val) > -1 ? val : null
            }
            return null
        }

        const vehicleWrapValues = {
            "3/4 Wrap": 0.75,
            "Half Wrap": 0.5
        }

        function calculateWrapPrice() {
            let length = parseFloat($('input[name="length"]').val()),
                width = parseFloat($('input[name="width"]').val()),
                height = parseFloat($('input[name="height"]').val()),
                quantity = parseFloat($('input[name="quantity"]').val());

            // console.log("inputs", inputs)
            const baseAmount = 1100;
            const commission = 4.5;
            const _width = 54 / 12;
            const _length = 1440 / 12;
            let costPerFeet = baseAmount / (_width * _length);

            let pricePerFeet = costPerFeet * commission;

            let size;
            if (_priceIndex(inputs) !== null) {
                const is_roof = $('[name=roof_wrapped]').val() === 'Yes' ? 1 : 0
                size = _prices[_priceIndex(inputs)][is_roof]
                if (vehicleWrapValues[inputs['vehicle_types']]) {
                    size *= vehicleWrapValues[inputs['vehicle_types']]
                }
                $('#height_input_container').find('input').attr('name', '')
                $('#length_input_container').find('input').attr('name', '')
                $('#width_input_container').find('input').attr('name', 'size').val(size)
                $('#view_size').text(size.toFixed(2) * 1);
                $('#view_size').parent().removeClass('d-none')
                $('#view_length, #view_width, #view_height').parent().addClass('d-none')
            } else {
                pricePerFeet = 7.13
                const x = length * height
                const y = width * height
                size = (x + y) * 2
                if (vehicleWrapValues[inputs['vehicle_types']]) {
                    size *= vehicleWrapValues[inputs['vehicle_types']]
                }
            }

            // const baseAmount = 1100;
            // const commission = 4.5;
            // const _width = 54 / 12;
            // const _length = 1440 / 12;
            // let costPerFeet = baseAmount / (_width * _length);
            //
            // let pricePerFeet = costPerFeet * commission;
            // console.log("pricePerFeet", pricePerFeet)
            let totalPrice = (size * pricePerFeet) * quantity;

            $('#total_price').html(commafy(totalPrice.toFixed(2)));
            $('#cal_price').val(commafy(totalPrice.toFixed(2)));

        }

        function commafy(num) {
            var str = num.toString().split('.');
            if (str[0].length >= 5) {
                str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
            }
            if (str[1] && str[1].length >= 5) {
                str[1] = str[1].replace(/(\d{3})/g, '$1 ');
            }
            return str.join('.');
        }

        $('#schedule_my_wrap_btn').on('click', function () {
            $.ajax({
                url: "{{route('carWrap.index')}}",
                data: $('#msform').serialize(),
                type: 'post',
                success: function (data) {
                    if (data.success) {
                        toastr.success(data.success);
                        return true;
                    } else {
                        toastr.success(data.error);
                        return false;
                    }
                }
            });
        });
    </script>
@endsection