{{-- @php
    $truck_array = [
        'truck_front' => [
        'left' => 6,
        'top' => 6,
        'base_img' => 'assets/backend/img/truck_img/other_front.png',
        ],
        'truck_back' => [
        'left' => 6,
        'top' => 5,
        'base_img' => 'assets/backend/img/truck_img/other_back.png',
        ],
        'truck_side_left' => [
        'left' => 12,
        'top' => 5,
        'base_img' => 'assets/backend/img/truck_img/other_left.png',
        ],
        'truck_side_right' => [
        'left' => 12,
        'top' => 5,
        'base_img' => 'assets/backend/img/truck_img/other_right.png',
        ],
    ];
@endphp --}}
<div>
	<div class="vehicle_check_img">
		<div class="img_wrapper" id="img_wrapper">
			<img class="front_img" height="240px" width="240px" src="{{ asset('assets/backend/img/truck_img/other_front.png') }}" alt="">
			@for ($left = 0; $left < 6; $left++)
				@for ($top = 0; $top < 6; $top++)
					@php
					$input_name = 'truck_front_'.$left.'_'.$top;
					@endphp
					<div class='img_front square modal_btn' style="left:{{ $left*40 }}px; top:{{ $top*40 }}px;" data-class="{{ $input_name }}" data-target="kizu-list"></div>
					<input type="hidden" name="vehicle[kizu][{{ $input_name }}]" class="img_input {{ $input_name }}" value="{{ isset($kizu_params[$input_name]) ? $kizu_params[$input_name] : '' }}">
				@endfor
			@endfor
		</div>
		<div class="img_wrapper">
			<img class="left_img" height="200px" width="480px" src="{{ asset('assets/backend/img/truck_img/other_left.png') }}" alt="">
			@for ($left = 0; $left < 12; $left++)
				@for ($top = 0; $top < 5; $top++)
					@php
					$input_name ='truck_side_left_'.$left.'_'.$top;
					@endphp
					<div class='img_front square modal_btn' style="left:{{ $left*40 }}px; top:{{ $top*40 }}px;" data-class="{{ $input_name }}" data-target="kizu-list"></div>
					<input type="hidden" name="vehicle[kizu][{{ $input_name }}]" class="img_input {{ $input_name }}" value="{{ isset($kizu_params[$input_name]) ? $kizu_params[$input_name] : '' }}">
				@endfor
			@endfor
		</div>
	</div>
	<div class="vehicle_check_img">
		<div class="img_wrapper">
			<img class="back_img" height="200px" width="240px" src="{{ asset('assets/backend/img/truck_img/other_back.png') }}" alt="">
			@for ($left = 0; $left < 6; $left++)
				@for ($top = 0; $top < 5; $top++)
					@php
					$input_name ='truck_back_'.$left.'_'.$top;
					@endphp
					<div class='img_front square modal_btn' style="left:{{ $left*40 }}px; top:{{ $top*40 }}px;" data-class="{{ $input_name }}" data-target="kizu-list"></div>
					<input type="hidden" name="vehicle[kizu][{{ $input_name }}]" class="img_input {{ $input_name }}" value="{{ isset($kizu_params[$input_name]) ? $kizu_params[$input_name] : '' }}">
				@endfor
			@endfor
		</div>
		<div class="img_wrapper">
			<img class="right_img" height="200px" width="480px" src="{{ asset('assets/backend/img/truck_img/other_right.png') }}" alt="">
			@for ($left = 0; $left < 12; $left++)
				@for ($top = 0; $top < 5; $top++)
					@php
					$input_name ='truck_side_right_'.$left.'_'.$top;
					@endphp
					<div class='img_front square modal_btn' style="left:{{ $left*40 }}px; top:{{ $top*40 }}px;" data-class="{{ $input_name }}" data-target="kizu-list"></div>
					<input type="hidden" name="vehicle[kizu][{{ $input_name }}]" class="img_input {{ $input_name }}" value="{{ isset($kizu_params[$input_name]) ? $kizu_params[$input_name] : '' }}">
				@endfor
			@endfor
		</div>
	</div>
</div>

@if(isset($kizu_params['id']))
<input type="hidden" name="vehicle[kizu][id]" value="{{ $kizu_params['id'] }}">
@endif
<script>
	$(function(){

        // #kizu-listがない（編集できない）時モーダルを表示しない
        if(!$('#kizu-list')[0]){
            $('.modal_btn').each(function(){
                $(this).removeClass('modal_btn');
            });
        }

		$(".img_input").each(function(index, object){
			const absolute_path = $(object).val();

			if(absolute_path){
				$(this).prev().css({
					'background-image': 'url("' + absolute_path+'")',
					'opacity' : 1
				});
			}else{
				$(this).prev().css({
					'background-image': 'none',
					'opacity' : 0
				});
			}
        });


		$('.img_front').click(function(){
			const data_class = $(this).data('class');

			$('#selected_img').val(data_class);
		});

		$('#kizu-list table.vehicle_check td img').click(function(){
			const data_class = $('#selected_img').val();
			const absolute_path = $(this).attr('src');
			const display_list_class = $('li.select').attr('id');

			$('.' + display_list_class + ' .' + data_class).val(absolute_path);
            CollectionChangeName($('.' + display_list_class + ' .' + data_class).attr('name'));
			$('.' + display_list_class + ' .img_front[data-class="'+data_class+'"]').css({
				'background-image': 'url("' + absolute_path+'")',
				'opacity' : 1
			});
			closeModal();
		});

		$('#kizu-list #delete_btn').click(function(){
			const data_class = $('#selected_img').val();
			const display_list_class = $('li.select').attr('id');
			$('.' + display_list_class + ' .' + data_class).val('');
            CollectionChangeName($('.' + display_list_class + ' .' + data_class).attr('name'));
			$('.' + display_list_class + ' .img_front[data-class="'+data_class+'"]').css({
				'background-image': '',
				'opacity' : 0
			});
			closeModal();
		});

		function closeModal(){
			$("body, html").css("overflow", "hidden");
			// モーダルコンテンツとオーバーレイをフェードアウト
			$('#kizu-list').fadeOut('slow');
			$('.modal-overlay').fadeOut('slow', function() {
				// html、bodyの固定解除
				$('html, body').removeClass('lock');
				// オーバーレイを削除
				$('.modal-overlay').remove();
				// モーダルコンテンツを囲む要素を削除
				$('#kizu-list').unwrap("<div class='modal-wrap'></div>");

				//コンテンツを一度すべて非表示にし、
				$('.content-car li:nth-child(2)').css('display', 'none');

				//クリックされたタブと同じ順番のコンテンツを表示します。
				$('.content-car li:nth-child(1)').css('display', 'block');
			});
        }

		getTruckImg();

		$('#TAB3-9').click(function(){
			getTruckImg();
		});

        $('#select_vehicle_size').change(function(){
            getTruckImg();
        });
        $('#body_category').change(function(){
            getTruckImg();
        });
        $('#body_sub_category').change(function(){
            getTruckImg();
        });
		// トラック画像の変更
		function getTruckImg(){
			const size = $('#select_vehicle_size').val();
            const body_category_id = $('#body_category').val();
            const body_sub_category_id = $('#body_sub_category').val();

			$.ajax({
				type: "post",
				url : '{{ route("backend.ajax.get_truck_img") }}',
				data: {
					size: size,
					body_category_id: body_category_id,
					body_sub_category_id: body_sub_category_id,
					_token: '{{ csrf_token() }}',
				},
				dataType: "json",
				success: function(img_array) {

					$('.left_img').attr('src', img_array['left']);
					$('.right_img').attr('src', img_array['right']);
					$('.front_img').attr('src', img_array['front']);
					$('.back_img').attr('src', img_array['back']);
				},
				error: function(){
					alert('エラーが発生しました。');
				},
			});
		}
	});
</script>

<style>
	#kizu-list table.vehicle_check td img{
		cursor: pointer;
	}

	.img_front{
		position:absolute;
		z-index: 1;
		opacity: 0.3;
		background-size: 100%;
	}

	.img_front.square{
		width: 40px;
		height: 40px;
	}

	.modal-wrap{
		overflow: scroll;
	}

    #kizu-list table.vehicle_check {
        z-index: 999999999;
    }

    #kizu-list #delete_btn{
        display: block!important;
    }

    table.vehicle_check {
        border-collapse: collapse;
        margin-bottom: 30px;
    }

    table.vehicle_check th,
    table.vehicle_check td {
        border: 1px solid black;
        width: 200px;
        text-align: center;
    }

    table.vehicle_check td.no_border {
        border: none;
    }

    table.vehicle_check img {
        margin: 5px;
        width: 40px;
        height: 40px;
    }

    .vehicle_check_img {
        display: flex;
    }

    .vehicle_check_img .img_wrapper {
        position: relative;
        margin: 10px;
    }

    .img_wrapper{
        position: relative;
    }
</style>