@extends('layouts.app')

@section('content')
<main class="container mx-auto mt-10">
    <div class="w-full px-6">
        @if (session('error'))
          <p class="text-danger mt-3">
            {{ session('error') }}
          </p>
        @endif
        <h1 class="text-3xl font-bold border-b mb-10">ご注文内容の確認</h1>
        @include('pays.layouts.flow', ['page_category' => 'confirm'])
        @if ($total_price != 0)
        <form class="flex flex-wrap sm:-mx-4 mb-8" method="POST" action="{{ url('/pay/checkout') }}">
            @csrf
            <div class="w-full sm:w-7/12 sm:px-4">
                <div class="mb-6">
                    @if ($current_user)
                        <div class="mb-8">
                            <h6 class="bg-gray-200 py-2 px-4 mb-4">お届け先住所</h6>
                            @if ($current_user->userAdresss->isEmpty())
                                <label>お届け先氏名</label>
                                <div class="mb-2">
                                    <input class="form-input w-4/12 mr-4" type="text" name="last_name" required placeholder="姓"><input class="form-input w-4/12" type="text" name="first_name" required placeholder="名">
                                </div>
                                <label>郵便番号(3桁と4桁)</label>
                                <div class="mb-2">
                                    <input class="form-input w-20" type="text" name="zip1" size="4" maxlength="3" required> － <input class="form-input w-24" type="text" name="zip2" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','addr','strt');" required>
                                </div>
                                @error('zip1')
                                    <p class="text-red-500 text-xs italic mt-4">
                                        {{ $message }}
                                    </p>
                                @enderror
                                @error('zip2')
                                    <p class="text-red-500 text-xs italic mt-4">
                                        {{ $message }}
                                    </p>
                                @enderror
                                <label>都道府県</label>
                                <div class="mb-2">
                                    <input class="form-input w-full md:w-1/2" type="text" name="pref" required>    
                                </div>
                                @error('pref')
                                    <p class="text-red-500 text-xs italic mt-4">
                                        {{ $message }}
                                    </p>
                                @enderror
                                <label>市区町村</label>
                                <div class="mb-2">
                                    <input class="form-input w-full md:w-1/2" type="text" name="addr" required>
                                </div>
                                @error('addr')
                                    <p class="text-red-500 text-xs italic mt-4">
                                        {{ $message }}
                                    </p>
                                @enderror
                                <label>以降の住所</label>
                                <div class="mb-2">
                                    <input class="form-input w-full md:w-1/2" type="text" name="strt" required>
                                </div>
                                @error('strt')
                                    <p class="text-red-500 text-xs italic mt-4">
                                        {{ $message }}
                                    </p>
                                @enderror
                            @else
                                @foreach ($current_user->userAdresss as $adress)
                                    @livewire('adress', ['adress' => $adress, 'current_user' => $current_user])
                                @endforeach
                            @endif
                        </div>
                        <div class="mb-8">
                            <h6 class="bg-gray-200 py-2 px-4 mb-4">電話番号</h6>
                            @if(optional($current_user->profile)->tel)
                                @livewire('tel', ['current_user' => $current_user])
                            @else
                                <div>
                                    <input type="tel" class="form-input w-full md:w-1/2" name="tel" required placeholder="000-0000-0000">
                                </div>
                                @error('tel')
                                    <p class="text-red-500 text-xs italic mt-4">
                                        {{ $message }}
                                    </p>
                                @enderror
                            @endif
                        </div>
                    @else
                        <div class="mb-8">
                            <h6 class="bg-gray-200 py-2 px-4 mb-4">アカウント情報</h6>
                            <label for="name">
                                {{ __('Name') }}
                            </label>
                            <div class="mb-2">
                                <input id="name" type="text" class="form-input w-full md:w-1/2"
                                name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                            </div>

                            <label for="email">
                                {{ __('E-Mail Address') }}
                            </label>
                            <div class="mb-2">
                                <input id="email" type="email"
                                class="form-input w-full md:w-1/2" name="email"
                                value="{{ old('email') }}" required autocomplete="email">
                            </div>

                            <label for="password">
                                {{ __('Password') }}
                            </label>
                            <div class="mb-2">
                                <input id="password" type="password"
                                class="form-input w-full md:w-1/2" name="password"
                                required>
                            </div>
                            <p class="text-gray-600 text-xs italic mb-2">パスワードは8文字以上でご入力ください</p>

                            <label for="password-confirm">
                                {{ __('Confirm Password') }}
                            </label>
                            <div class="mb-2">
                                <input id="password-confirm" type="password" class="form-input w-full md:w-1/2"
                                name="password_confirmation" required>
                            </div>
                        </div>
                        <div class="mb-8">
                            <h6 class="bg-gray-200 py-2 px-4 mb-4">お届け先住所</h6>
                            <label>お届け先氏名</label>
                            <div class="mb-2">
                                <input class="form-input w-4/12 mr-4" type="text" name="last_name" required placeholder="姓"><input class="form-input w-4/12" type="text" name="first_name" required placeholder="名">
                            </div>
                            <label>郵便番号(3桁と4桁)</label>
                            <div class="mb-2">
                                <input class="form-input w-20" type="text" name="zip1" size="4" maxlength="3" required> － <input class="form-input w-24" type="text" name="zip2" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','addr','strt');" required>
                            </div>
                            @error('zip1')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                            @error('zip2')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                            <label>都道府県</label>
                            <div class="mb-2">
                                <input class="form-input w-full md:w-1/2" type="text" name="pref" required>    
                            </div>
                            @error('pref')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                            <label>市区町村</label>
                            <div class="mb-2">
                                <input class="form-input w-full md:w-1/2" type="text" name="addr" required>
                            </div>
                            @error('addr')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                            <label>以降の住所</label>
                            <div class="mb-2">
                                <input class="form-input w-full md:w-1/2" type="text" name="strt" required>
                            </div>
                            @error('strt')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                        <div class="mb-8">
                            <h6 class="bg-gray-200 py-2 px-4 mb-4">電話番号</h6>

                                <div>
                                    <input type="tel" class="form-input w-full md:w-1/2" name="tel" required placeholder="000-0000-0000">
                                </div>
                                @error('tel')
                                    <p class="text-red-500 text-xs italic mt-4">
                                        {{ $message }}
                                    </p>
                                @enderror
                        </div>
                    @endif
                </div>
            </div>
            <div class="w-full sm:w-5/12 sm:px-4 mb-8">
                <div class="mb-4">
                    <div class="mb-4">
                        <label>カード番号</label>
                        <input name="card_number" class="form-input w-full md:w-1/2" minlength="16" maxlength="16" placeholder="1234123412341234" required>
                        @error('card_number')
                            <p class="text-red-500 text-xs italic mt-4">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    
                    <div class="mb-4">
                        <label>有効期限</label>
                        <input name="card_month" class="form-input w-20" maxlength="2" placeholder="MM" required> / 
                        <input name="card_year" class="form-input w-20" maxlength="2" placeholder="YY" required>
                        @error('card_month')
                            <p class="text-red-500 text-xs italic mt-4">
                                {{ $message }}
                            </p>
                        @enderror
                        @error('card_year')
                            <p class="text-red-500 text-xs italic mt-4">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    
                    <div class="mb-4">
                        <label>CVC番号</label>
                        <input name="card_cvc" class="form-input w-16" placeholder="セキュリティコード" required minlength="3">
                        @error('card_cvc')
                            <p class="text-red-500 text-xs italic mt-4">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    
                </div>
                <button id="checkout" class="bg-red-500 hover:bg-red-600 block text-center py-3 rounded-full w-full text-white mb-6">購入する</button>
                @include('pays.layouts.total_price')
            </div>
            <div class="w-full sm:w-7/12 sm:px-4">
                <div class="mb-8 border-b">
                    <h6 class="bg-gray-200 py-2 px-4 mb-4">購入商品</h6>
                    @if (Session::has('session_data'))
                        @foreach (Session::get('session_data') as $key => $session_data)
                            @if ($session_data['SessionProductId'])
                            <div class="flex flex-wrap items-start -mx-4">
                                @if ($session_data['SessionProductDetailId'] == 0)
                                    <img class="w-4/12 px-4" src="{{ App\Models\Product::find($session_data['SessionProductId'])->img1 }}">
                                @else
                                    <img class="w-4/12 px-4" src="{{ App\Models\ProductDetail::find($session_data['SessionProductDetailId'])->img1 }}">
                                @endif
                                <div class="w-8/12 px-4">
                                    <div class="flex flex-wrap mb-4">
                                        @if ($session_data['SessionProductDetailId'] == 0)
                                            <div class="mr-4 font-bold">
                                                {{ App\Models\Product::find($session_data['SessionProductId'])->name }} 
                                            </div>
                                            <div>
                                                {{ App\Models\Product::find($session_data['SessionProductId'])->color }} ({{ App\Models\Product::find($session_data['SessionProductId'])->size }})
                                            </div>
                                        @else
                                            <div class="mr-4 font-bold">
                                                {{ App\Models\ProductDetail::find($session_data['SessionProductDetailId'])->name }}
                                            </div>
                                            <div>
                                                {{ App\Models\ProductDetail::find($session_data['SessionProductDetailId'])->color }} 
                                                ({{ App\Models\ProductDetail::find($session_data['SessionProductDetailId'])->size }})
                                            </div>
                                        @endif
                                    </div>
                                    <div>
                                        個数：{{ $session_data['SessionProductQuantity'] }} 個
                                    </div>
                                    <div>
                                        料金：
                                        @if ($session_data['SessionProductDetailId'] == 0)
                                            ¥{{ number_format(App\Models\Product::find($session_data['SessionProductId'])->price * $session_data['SessionProductQuantity'] * config('price.tax')) }}
                                        @else
                                            ¥{{ number_format(App\Models\ProductDetail::find($session_data['SessionProductDetailId'])->price * $session_data['SessionProductQuantity'] * config('price.tax')) }}
                                        @endif
                                    </div>
                                </div>
                                
                            </div>
                                <input type="hidden" name="product_id[]" value="{{ $session_data['SessionProductId'] }}">
                                <input type="hidden" name="product_detail_id[]" value="{{ $session_data['SessionProductDetailId'] }}">
                                <input type="hidden" name="product_quantity[]" value="{{ $session_data['SessionProductQuantity'] }}">
                                <input type="hidden" name="post_id[]" value="{{ $session_data['SessionPostId'] }}">
                            @endif
                        @endforeach
                    @endif
                    <div class="my-4">
                        <a class="flex items-center justify-center w-60 border border-black hover:bg-black hover:text-white py-2 rounded-full" href="{{ url('/cart') }}">
                            <span class="material-icons">chevron_left</span>ショッピングカートへ戻る
                        </a>
                    </div>
                </div>
            </div>
        </form>
        @else
            <div class="w-full">
                ショッピングカートは空っぽです。
            </div>
        @endif
    </div>
</main>
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
<script type="text/javascript" src="{{ asset('js/libs/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript">
//送信ボタンを押した際に送信ボタンを無効化する（連打による多数送信回避）
$(function(){
    $('#checkout').click(function(){
        $(this).prop('disabled',true);//ボタンを無効化する
        $(this).closest('form').submit();//フォームを送信する
    });
});
</script>
@endsection