@extends('backend.layouts.app')

@section('content')

    @if (isset($is_confirm))
        <h2 class="title">車両【確認】</h2>
    @else
        <h2 class="title">車両【閲覧】</h2>
        @include('backend.layouts.flash-message')
    @endif

    @include('backend.share.vehicle._header_info', ["is_detail" => true])
    <div class="tab_all_wrap" style="position: relative">
        <ul class="tab {{ ($department == 'parts') ? "four" : ($department == 'moritis' ? "three" : "five") }} main_tab">
            <li class="{{ $tab == 'TAB1' ? 'select' : '' }}" id="TAB1">仕入・車両情報</li>
            <li class="{{ $tab == 'TAB2' ? 'select' : '' }}" id="TAB2">車両チェックシート</li>
            <li class="{{ $tab == 'TAB3' ? 'select' : '' }}" id="TAB3">写真</li>
            @unless($department == 'moritis')
                <li class="{{ $tab == 'TAB4' ? 'select' : '' }}" id="TAB4">HP掲載</li>
                @unless($department == 'parts')
                <li class="{{ $tab == 'TAB5' ? 'select' : '' }}" id="TAB5">問い合わせ履歴</li>
                @endunless
            @endunless
            {{--
            <li class="{{ $tab == 'TAB6' ? 'select' : '' }}" id="TAB6">販売情報</li>
            --}}
        </ul>
        @if(isset($vehicle['info']['id']))
            {{ Form::open(['route' => "backend.{$department}.vehicle.update_info", 'id' => 'vehicle_info_form', 'name' => 'vehicle_info_form', 'method' => 'PUT', 'files'=>true]) }}

            <input type="hidden"  name="vehicle[info][id]" value="{{ $vehicle['info']['id'] }}">
        @else
            {{ Form::open(['route' => "backend.{$department}.vehicle.create_info", 'id' => 'vehicle_info_form', 'name' => 'vehicle_info_form', 'method' => 'POST', 'files'=>true]) }}
        @endif

        <input type="hidden" name="sale_status" value="{{ isset($sale_status) ? $sale_status : '' }}">
        <input type="hidden" name="home" value="{{ isset($home_page) ? $home_page : '' }}">
        @if (isset($vehicle['id']))
            <input type="hidden" name="vehicle[id]" value="{{ $vehicle['id'] }}">
        @endif
        <input type="hidden" name="vehicle[suffix]" value="{{ isset($vehicle['suffix']) ? $vehicle['suffix'] : '' }}"/>
        <ul class="content" id="vehicle_main_tab">
            <!-- 仕入・車両情報 ********************************** -->
        @include('backend.share.vehicle.confirm._t_info', ['vehicle_info' => isset($vehicle['info']) ? ($vehicle['info']) : null])

        <!-- 車両チェックシート ********************************** -->
        @include('backend.share.vehicle.confirm._t_check', ['vehicle_check' => isset($vehicle['check']) ? \App\Helper\SystemHelper::explodeCheckParametersForView($vehicle['check']) : null])

        <!-- 写真入力 ********************************** -->
        @include('backend.share.vehicle.confirm._t_image', ['vehicle_image' => isset($vehicle['image']) ? $vehicle['image'] : null])

        @unless($department == 'moritis')
            <!-- HP掲載 ********************************** -->
            @include('backend.share.vehicle.confirm._t_hp_publish', ['vehicle_hp_publish' => isset($vehicle['hp_publish']) ? $vehicle['hp_publish'] : null] )
            @unless($department == 'parts')
            <!-- 問い合わせ履歴 ********************************** -->
            @include('backend.share.vehicle.confirm._t_enquiry', ['vehicle_enquiry_history'=>isset($vehicle['enquiry_history']) ? $vehicle['enquiry_history'] : null])
            @endunless
        @endunless
            {{--
        <!-- 販売情報 ********************************** -->
            @include('backend.share.vehicle.confirm._t_sale', ['vehicle_sale_info' => isset($vehicle['sale_info']) ? $vehicle['sale_info'] : null])
            --}}

        </ul>
        <input type="hidden" name="tab" value="{{ isset($tab) ? $tab : 'TAB1' }}" class="current_main_tab">
        <input type="hidden" name="sub_tab" value="{{ isset($sub_tab) ? $sub_tab : 'TAB1-1' }}" class="current_sub_tab">
        {{ Form::close() }}
    </div>

    {{ Form::open(["route"=>"backend.{$department}.vehicle.pdf_download", "method"=>"get", "id"=>"download_submit", "target"=>"_blank"]) }}
        <input type="hidden" name="id" id="download_id">
        <input type="hidden" name="file_path" id="download_file_path">
        <input type="hidden" name="file_name" id="download_file_name">
        <input type="hidden" name="field_index" id="download_field_index">
    {{ Form::close() }}

    {{ Form::open(["route"=>"backend.{$department}.vehicle.create", "method"=>"get", "id"=>"back_dir_submit"]) }}
        <input type="hidden" name="tab" value="{{ isset($tab) ? $tab : 'TAB1' }}" class="current_main_tab">
        <input type="hidden" name="sub_tab" value="{{ isset($sub_tab) ? $sub_tab : 'TAB1-1' }}" class="current_sub_tab">
        <input type="hidden" name="is_confirm" value="1">
        <input type="hidden" name="home" value="{{ isset($home_page) ? $home_page : '' }}">
        <input type="hidden" name="suffix" value="{{ isset($vehicle['suffix']) ? $vehicle['suffix'] : '' }}">
        @if(isset($sale_status))
            <input type="hidden" name="sale_status" value="{{ $sale_status }}">
        @endif
    {{ Form::close() }}
@endsection

@section('modals')
    @include('backend.share.vehicle.confirm._m_hanbai')
    @include('backend.share.vehicle.confirm._m_hanbai_rireki')
@endsection

@section('page_css')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/backend/css/truck.css') }}" rel="stylesheet">
    <style>
        .header-table td.th {
            background: #F7F7F7;
        }
        .header-table td {
            padding: 5px !important;
        }
        /*Header Table Fix CSS */
        #vehicle_info_form {
            height: 600px !important;
        }
        #header_table {
            margin-bottom: 0 !important;
        }
        .title {
            margin-bottom: 5px !important;
        }
        #r-content {
            padding-top: 10px !important;
        }
        #vehicle_main_info_box {
            padding-top: 10px !important;
        }
        #wrapper {
            margin-bottom: 0 !important;
        }
        .header-price-part {
            font-weight: bold !important;
            font-size: 18px !important;
        }
        .normal-price {
            color: #4777ba !important;
        }
        .outlet-price {
            color: #fe6060 !important;
        }

        .csch_option2 {
            color: #4777ba !important;
        }
        .csch_option3 {
            color: #fe6060 !important;
        }

        .two_table th {
            width: 15% !important;
        }
        .two_table td {
            width: 35% !important;
        }
        #header_table th,
        #header_table td {
            border: 1px solid black !important;
        }
        #TAB1-1 {
            background-color: #ec1b23 !important;
        }
        #TAB1-2 {
            background-color: #00b28b !important;
        }
        #TAB1-3 {
            background-color: #4777ba !important;
        }
        #TAB1-4 {
            background-color: #f08300 !important;
        }
        /*車両情報*/

        .border-none {
            border: none !important;
        }

        #vehicle_main_info_tab th.border-left {
            border-left: 1px solid #DDD !important;
        }
        #vehicle_main_info_tab {
            border: 3px solid rgba(236, 27, 35, 1) !important;
            /*background-color: rgba(236, 27, 35, 0.4);*/
            padding: 10px;
        }
        /*#vehicle_main_info_tab th,*/
        /*#vehicle_main_info_tab td,*/
        /*#vehicle_main_info_tab input[type="text"],*/
        /*#vehicle_main_info_tab select,*/
        /*#vehicle_main_info_tab textarea,*/
        /*#vehicle_main_info_tab .dropzone {*/
        /*    background-color: rgba(236, 27, 35, 0.1) !important;*/
        /*}*/
        /*車両原価*/
        #vehicle_pprice_info_parts  {
            border: 3px solid rgba(0, 178, 139, 1) !important;
            /*background-color: rgba(0, 178, 139, 0.4);*/
            padding: 10px;
            margin-top: 10px;
        }
        /*#vehicle_pprice_info_parts th,*/
        /*#vehicle_pprice_info_parts td,*/
        /*#vehicle_pprice_info_parts input[type="text"],*/
        /*#vehicle_pprice_info_parts select,*/
        /*#vehicle_pprice_info_parts textarea,*/
        /*#vehicle_pprice_info_parts .dropzone  {*/
        /*    background-color: rgba(0, 178, 139, 0.1) !important;*/
        /*}*/

        /*販売価格*/
        #vehicle_sprice_info_parts {
            border: 3px solid rgba(71, 119, 186, 1) !important;
            /*background-color: rgba(71, 119, 186, 0.4);*/
            padding: 10px;
            margin-top: 10px;
        }
        /*#vehicle_sprice_info_parts th,*/
        /*#vehicle_sprice_info_parts td,*/
        /*#vehicle_sprice_info_parts input[type="text"],*/
        /*#vehicle_sprice_info_parts select,*/
        /*#vehicle_sprice_info_parts textarea,*/
        /*#vehicle_sprice_info_parts .dropzone  {*/
        /*    background-color: rgba(71, 119, 186, 0.1) !important;*/
        /*}*/
        /*販売情報*/
        #vehicle_sale_info_parts {
            border: 3px solid rgba(240, 131, 0, 1) !important;
            /*background-color: rgba(240, 131, 0, 0.4);*/
            padding: 10px;
            margin-top: 10px;
        }
        /*#vehicle_sale_info_parts th,*/
        /*#vehicle_sale_info_parts td,*/
        /*#vehicle_sale_info_parts input[type="text"],*/
        /*#vehicle_sale_info_parts select,*/
        /*#vehicle_sale_info_parts textarea,*/
        /*#vehicle_sale_info_parts .dropzone {*/
        /*    background-color: rgba(240, 131, 0, 0.1) !important;*/
        /*}*/
        #header_table th,
        #header_table td {
            border: 1px solid black !important;
        }
        #vehicle_main_tab {
            padding-top: 0 !important;
        }

        .TAB5 {
            padding-top: 30px !important;
        }
        .TAB4 {
            padding-top: 30px !important;
        }
        .TAB3 {
            padding-top: 30px !important;
        }
        .vehicle_confirm_submit {
            position: fixed;
            bottom: 10px;
            margin-bottom: 15px !important;
        }
        @if($department == 'parts' || $department == 'moritis')
        .TAB1 {
            padding-top: 30px !important;
        }
        @endif
    </style>
@endsection

@section('page_js')
    <script src="{{ asset('vendor/jquery-ui/i18n/datepicker-ja.js') }}"></script>
    <script src="{{ asset('vendor/ajaxupload/jquery.ajaxupload.js') }}"></script>

    <script src="{{ asset('assets/backend/js/page/vehicle.js') }}"></script>
    <script>
        $(function(){
            $(document).ready(function(){
                $("input[type='text']").each(function () {
                    $(this).after('<span>' + $(this).val() + '</span>');
                    $(this).remove();
                });
                let main_tab = "{{ $tab }}";

                @unless($department == 'parts')
                if(main_tab == "TAB1"){
                    let sub_tab = "{{ isset($sub_tab) ? $sub_tab : 'TAB1-1' }}";
                    if(sub_tab != 'TAB1-1' && $("#secret_area1" + sub_tab.substr(5)).length){
                        $("#secret_area1" + sub_tab.substr(5))[0].scrollIntoView({behavior: "smooth"});
                        $("#secret_area12").css('top', '-60px');
                    }
                }
                @endunless

                let title = "{{ isset($title) ? $title : '' }}";
                if(title != ''){
                    $('title').html(title);
                }

                $(".back_dir_btn").click(function () {
                    $("#back_dir_submit").attr('action', $(this).data('url'));
                    $("#back_dir_submit").submit();
                });
                $(".main_tab li").click(function () {
                    $(".current_main_tab").val($(this).attr('id'));
                });

                $(".vehicle_sub_tab li").each(function () {
                    if($(this).attr("id") == "{{ isset($sub_tab) ? $sub_tab : 'TAB1-1' }}"){
                        $(this).addClass('select');
                        let sub_tab = $("." + $(this).attr('id'));
                        sub_tab.removeClass('hide');
                        sub_tab.addClass('select');
                        sub_tab.css('display', 'list-item');
                    }
                });

                $(".vehicle_sub_tab li").click(function () {
                    $(".current_sub_tab").val($(this).attr('id'));
                });
                $("#TAB2").click(function () {
                    let is_exist = 0;
                    $(".vehicle_check_tab").each(function () {
                        if($(this).hasClass('select')){
                            is_exist = 1;
                        }
                    });
                    if(!is_exist){
                        $("#TAB3-1").addClass('select');
                        let vehicle_engine = $("#vehicle_check_engine_tab");
                        vehicle_engine.removeClass('hide');
                        vehicle_engine.addClass('select');
                        vehicle_engine.css('display', 'list-item');
                    }
                });

                $("#TAB1").click(function () {
                    let is_exist = 0;
                    $(".vehicle_info_tab").each(function () {
                        if($(this).hasClass('select')){
                            is_exist = 1;
                        }
                    });
                    if(!is_exist){
                        $("#TAB1-1").addClass('select');
                        let vehicle_basic = $("#vehicle_basic_tab");
                        vehicle_basic.removeClass('hide');
                        vehicle_basic.addClass('select');
                        vehicle_basic.css('display', 'list-item');
                    }
                });
                let check_meter = "{{ (isset($vehicle['check']['unknown_definite_distance'])) ? $vehicle['check']['unknown_definite_distance'] : '' }}";
                let outlet = "{{ old('vehicle.sprice.outlet', isset($vehicle['sprice']['outlet']) ? $vehicle['sprice']['outlet'] : '') }}";
                if(outlet == "{{ config('const.outlet_status_code.publish') }}"){
                    $("#header_table td").addClass('br-yellow');
                }
                $(".vehicle_create_submit").click(function(){
                    $(this).prop('disabled', true);
                    $("#vehicle_info_form").submit();
                });
                $("#vehicle_info_form").scroll(function() {
                    var height = $("#vehicle_info_form").scrollTop();
                    if ($(".TAB2").css("display") == "list-item")
                    {
                        let tab_height = "-" + ( $("#vehicle_check_header_table").height()+48) + "px";
                        if(check_meter == ''){
                            tab_height = "-" + ($("#vehicle_check_header_table").height()+48) + "px";
                        }
                        var wid = $(".TAB2").width();
                        if (height >= ($("#vehicle_check_header_table").height()+48)){
                            $(".check_tab_body").width(wid);
                            $(".check_tab_body").css("position", "absolute");
                            $(".check_tab_body").css("margin-top", tab_height);
                            $(".check_tab_body").css("z-index", "9");
                            $(".check_tab_body").removeClass("tabInTab");
                            $(".check_tab_body").addClass("tabInTab2");
                        }
                        else{
                            $(".check_tab_body").css("position", "relative");
                            $(".check_tab_body").css("margin-top", "0px");
                            $(".check_tab_body").css('margin-top', '40px');
                            $(".check_tab_body").addClass("tabInTab");
                            $(".check_tab_body").removeClass("tabInTab2");
                        }
                    }
                    if ($(".TAB1").css("display") == "list-item")
                    {
                        let wid = $(".TAB1").width();
                        let vehicle_info_tab = $("#vehicle_info_tab");
                        if (height >= 120){
                            vehicle_info_tab.width(wid);
                            vehicle_info_tab.css("position", "absolute");
                            vehicle_info_tab.css("margin-top", "-28px");
                            vehicle_info_tab.css("z-index", "9");
                            vehicle_info_tab.removeClass("tabInTab");
                            vehicle_info_tab.addClass("tabInTab2");
                        }
                        else{
                            vehicle_info_tab.css("position", "relative");
                            vehicle_info_tab.css("margin-top", "0px");
                            vehicle_info_tab.css('margin-top', '40px');
                            vehicle_info_tab.addClass("tabInTab");
                            vehicle_info_tab.removeClass("tabInTab2");
                        }
                    }
                    if ($(".TAB5").css("display") == "list-item")
                    {
                        let header_element = $("#enquiry_header");
                        if($("#outlet_enquiry_header").length == 1){
                            header_element = $("#outlet_enquiry_header");
                        }
                        console.log(height);
                        if (height >= 190){
                            header_element.css('position', 'absolute');
                            header_element.css('top', '70px');
                            $(".reception_date_header").css('width', $(".reception_date_column").css('width'));
                            $(".company_header").css('width', $(".company_column").css('width'));
                            $(".questioner_header").css('width', $(".questioner_column").css('width'));
                            $(".tel_header").css('width', $(".tel_column").css('width'));
                            $(".question_price_header").css('width', $(".question_price_column").css('width'));
                            $(".input_by_header").css('width', $(".input_by_column").css('width'));
                            $(".inquiry_content_header").css('width', $(".inquiry_content_column").css('width'));
                            $(".action_header").css('width', $(".action_column").css('width'));
                        }
                        else{
                            header_element.css('position', 'static');
                        }
                    }
                });

                $("#vehicle_info_tab li").click(function () {
                    $("#vehicle_info_tab li").each(function () {
                        $(this).removeClass('select');
                    });
                    $(this).addClass('select');
                });
            });
        });
    </script>
@endsection