{{--
    アップロード画像選択を生成する
    ｜ファイル選択 ＋ ドロップ選択 でファイル選択する
    @props name file項目のname属性
    @props value デフォルト値（ファイル名）
    @props url リンクURL
    @see Action Component.inputFileDropImage
--}}
@props(['name'=>'file', 'value', 'url'])

@php
    // 表示内容を編集する
    $dragCss = "flex flex-wrap gap-1.5 py-2.5 px-2 sm:px-3 items-center justify-center sm:justify-start
        bg-primary-50 border border-primary-200 max-w-fit rounded 
        group-[.active]/file:border group-[.active]/file:border-primary-700 group-[.active]/file:bg-primary-200";
    $buttonCss = "btn-sub bg-primary-400 text-white border-transparent hover:bg-primary-300";
    $delCss = "w-5 h-5 mr-1 text-primary-700 bg-secondary-100 rounded border-secondary-300 
        focus:ring-primary-300 focus:ring-offset-0 focus:ring-4 outline-none";
@endphp
<div x-data="Component.inputFileDropImage">
    <div x-ref="base_area" class="flex flex-wrap gap-2 group/file">
        {{-- ｜左 --}}
        {{-- サムネイル --}}
        <div x-ref="thumb_area" 
            class="border rounded-md w-20 h-20 bg-secondary-50
                [&_img]:w-20 [&_img]:h-20 [&_img]:object-cover [&_img]:rounded-md">
            @isset($value)
            <a href="{{$url}}?p={{date('Ymdhis')}}" target="_blank"><img src="{{$url}}?p={{date('Ymdhis')}}" /></a>
            @else
            <img src="{{asset('assets/img')}}/no-file.png" />
            @endif
        </div>
        {{-- ｜右 --}}
        <div class="flex-1 flex flex-col gap-2">
            {{-- ｜右上 --}}
            {{-- ドラッグ＆ドロップ領域 --}}
            <div class="{{$dragCss}}" x-ref="drop_area" 
                @dragover.prevent="dragover()" @dragleave.prevent="dragleave()" @drop.prevent="drop()" >
                <div class="flex flex-wrap gap-1 items-center justify-center sm:justify-start">
                    <span><i class="fa-solid fa-cloud-arrow-up fa-lg text-primary-300 mr-1.5"></i></span>
                    <p class="text-xs text-primary-700/90 w-[11.6rem] h-8">ここにドラッグ＆ドロップするか<br>ファイルを選択してください。</p>	
                </div>
                <x-button shape="{{$buttonCss}}" text="ファイル選択" @click="click()" />
                <input x-ref="input" type="file" name="{{$name}}" class="hidden" @change="change()" >
            </div>
            {{-- ｜右下 --}}
            <div class="flex flex-wrap items-center text-xs text-secondary-700">
                {{-- 対象ファイル条件 --}}
                &nbsp;対応ファイル：<span class="font-sansf font-bold">image</span>
                {{-- 削除チェック --}}
                @isset($value)
                <div class="flex items-center tracking-wider">
                    <span class="mx-2">｜</span>
                    <input id="{{$name}}_del" name="{{$name}}_del" type="checkbox" @change="del()" class="{{$delCss}}">
                    <label for="{{$name}}_del">DEL</label>
                </div>
                @endisset
            </div>
            {{-- メッセージ領域 --}}
            <div x-ref="error" class="hidden bg-danger-50 border-l-4 border-danger-700 text-danger-700 p-4 text-sm"></div>
        </div>
    </div>
</div>