{{-- @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
				});
			}
        });
        
        getTruckImg();

		// トラック画像の変更
		function getTruckImg(){

			const size = "{{ isset($vehicle['basic']['size']) ? $vehicle['basic']['size'] : '' }}";
      		const body_category_id = "{{ isset($vehicle['basic']['body_category']) ? $vehicle['basic']['body_category'] : '' }}";
      		const body_sub_category_id = "{{ isset($vehicle['basic']['body_category']) ? $vehicle['basic']['body_category'] : '' }}";

			$.ajax({
				type: "post",
				url : '{{ route("backend.ajax.get_truck_img") }}',
				data: {
					size: size,
					body_category_id: body_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>