@extends('layouts.app')

<link href="{{ asset('css/download.css') }}" rel="stylesheet">
 
@section('content')
<div class="container text-align-center">
    <nav class="navbar navbar-default nav-bar-backcolor">
        <div class="container-fluid">
            <div class="nav-bar-title">
                <i class="fa fa-tachometer"></i> 트립 파일 다운로드
            </div>
        </div>
    </nav>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">{{trans('properties.trip.title')}} {{trans('properties.download.title')}}</div>
                <div class="panel-body">
                    <div>
                        <div class="trip-container">
                            <div class="trip1">
                                <dl>
                                    <dt>{{trans('properties.trip.product_select')}}</dt>
                                    <dd>
                                        <div id="product" class="tripDiv1">
                                            <ul id="product_ul">
                                                @foreach($obj['models'] as $key => $value)
                                                <li class="product_li" value="{{$key}}">{{$value}}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="trip2">
                                <dl>
                                    <dt>{{trans('properties.trip.company_select')}}</dt>
                                    <dd>
                                        <div id="company" class="tripDiv2">
                                            <ul id="company_ul">
                                                <p class="selectMessage">{{trans('properties.trip.company_select_message')}}</p>
                                            </ul>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="trip3">
                                <dl>
                                    <dt>{{trans('properties.trip.car_select')}}</dt>
                                    <dd>
                                        <div id="car" class="tripDiv3">
                                            <ul id="car_ul">
                                                <p class="selectMessage">{{trans('properties.trip.car_select_message')}}</p>
                                            </ul>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="trip4">
                                <dl class="product">
                                    <dt>{{trans('properties.trip.trip_select')}}</dt>
                                    <dd>
                                        <div id="trip" class="tripDiv4">
                                            <ul id="trip_ul">
                                                @foreach($downdatas as $idx => $downdata)
                                                <li class="trip_li" value="{{$downdata->idx}}">{{$downdata->car}} {{$downdata->trip_name}}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <p>&nbsp;</p>
                            <div class="trip-img"></div>
                            <div class="trip-title"></div>
                            <div class="down-btn"></div>
                            <p>&nbsp;</p>
                        </div>
                    </div>
                    <a style="float:right;bottom:10px;right:10px;" href="javascript:goTop('0');" title=Top>
                        <i class="fa fa-arrow-up" style="color:#0000ff;font-size: 15px">Top</i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $(document).on('click', '.product_li', function(e) {
                $('.product_li').removeClass('on');
                $("#company_ul").children().remove();
                $("#car_ul").children().remove();
                $("#trip_ul").children().remove();
                $(this).addClass('on');
                getData('P', 'company', e.target.value);
                $('#car_ul').prepend("<p class='selectMessage'>제조사를 선택하세요.</p>");
            });
            $(document).on('click', '.company_li', function(e) {
                $('.company_li').removeClass('on');
                $("#car_ul").children().remove();
                $("#trip_ul").children().remove();
                $(this).addClass('on');
                getData('C', 'car', e.target.value);
            });
            $(document).on('click', '.car_li', function(e) {
                $('.car_li').removeClass('on');
                $("#trip_ul").children().remove();
                $(this).addClass('on');
                getData('T', 'trip', e.target.value);
            });
            $(document).on('click', '.trip_li', function(e) {
                $('.trip_li').removeClass('on');
                $(this).addClass('on');
                getData('', '', e.target.value);
            });
            $("select[name=\'p\']").change(function(e) {
                $("form").submit();
            });
            $("select[name=\'t\']").change(function(e) {
                $("form").submit();
            });
            $("select[name=\'t\']").change(function(e) {
                $("form").submit();
            });
        });
    });

    function makeList(target, list) {

        console.log(list);

        list.forEach(function(item, index) {
            if (target == 'trip') {
                var $li = $("<li value='" + item.idx + "' class='" + target + "_li' >" + item.car + ' ' + item.trip_name + "</li>");
            } else {
                var $li = $("<li value='" + item.no + "' class='" + target + "_li' >" + item.mname + "</li>");
            }
            $('#' + target + '_ul').prepend($li);
        });
    }

    function makeInfo(info) {

        console.log(info);

        $(".trip-img").children().remove();
        $(".trip-title").children().remove();
        $(".down-btn").children().remove();

        if (info) {
            if (info['image'])
                $(".trip-img").prepend('<img src="/data/trip/' + info['image'] + '" width="804" height="1060" alt=""/>');
            if (info['comment'])
                $(".trip-title").prepend('<div><p style="font-size:20px; font-weight:bold; color:#ED0F13; text-align:center; vertical-align:middle;">' + info['comment'] + '</p></div>');
            $(".down-btn").prepend('<div id="download_button"><a href="/downdata/trip_upgrade/' + info['manual'] + '""><img src="/images/download_btn1.png" width="227" height="122" alt="사용 및 장착설명서 다운로드"/></a>' +
                '<a href="/downdata/trip_upgrade/' + info['program'] + '""><img src="/images/download_btn2.png" width="227" height="122" alt="프로그램 다운로드"/></a></div>');

            var scrollPosition = $("#download_button").offset().top;
            goTop(scrollPosition);
        }
    }

    function getData(type, target, no) {
        var smodel = "";
        var scompany = "";
        var scar = "";
        var sidx = "";

        if ($(".product_li").hasClass("on")) {
            smodel = $(".product_li.on").val();
        }

        if ($(".company_li").hasClass("on")) {
            scompany = $(".company_li.on").val();
        }

        if ($(".car_li").hasClass("on")) {
            scar = $(".car_li.on").val();
        }

        if ($(".trip_li").hasClass("on")) {
            sidx = $(".trip_li.on").val();
        }

        var token = $("input[name='_token']").val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: "{{ route('select-tripAjax') }}",
            method: 'GET',
            data: {
                type: type,
                smodel: smodel,
                scompany: scompany,
                scar: scar,
                sidx: sidx,
                _token: token
            },
            success: function(data) {
                // console.log(data);
                makeList(target, data['selectList']);
                makeList('trip', data['tripList']);
                makeInfo(data['trip'][0]);
            }
        });

    }

    function goTop(v) {
        $('html, body').animate({
            'scrollTop': v
        }, 'slow');
    }
</script>
@endsection