@extends('user.layouts.app')

@section('title', '売買契約書')

@section('header')
    <p><a href="javascript:history.back()">＜</a></p>
    <h1 id="title">売買契約書<a class="question-mark modal-open" data-target="use_flow"><img src="{{ asset('assets/user/img/question_mark.png') }}"></a></h1>
@endsection

@section('content')
    <main>
        @include('user.layouts.flash-message')
        <div id="wrapper-gray" class="contents">
            @if(Storage::disk('vehicles')->has($contract->vehicle->id.'/contract/'.$contract->vehicle->manage_no.'_売買契約書.pdf'))
                <p class="estimate-paper">
                    <embed src="https://docs.google.com/viewer?url={{ asset("storage/vehicles/{$contract->vehicle->id}/contract/{$contract->vehicle->manage_no}_売買契約書.pdf") }}&embedded=true">
                </p>
                @if(Browser::isAndroid() || Browser::isMac())
                    <p class="pdf-btn send-doc-btn" data-doc_title="売買契約書"><a href="#"><span>売買契約書送信</span></a></p>
                @else
                    <p class="pdf-btn sp-download-btn"><a href="{{ asset("storage/vehicles/{$contract->vehicle->id}/contract/{$contract->vehicle->manage_no}_売買契約書.pdf") }}" target="_blank"><span>売買契約書PDFダウンロード</span></a></p>
                @endif
            @endif
        </div>

    </main>
@endsection

@section('page_css')
   <style>
       .estimate-paper embed {
           width: 100%;
       }
       #wrapper-gray {
           position: relative;
       }
       .pdf-btn {
           position: absolute;
           top: 50%;
           width: calc(100% - 30px);
       }
       @media only screen and (max-width: 736px) {
           .modal-wrap {
               padding: 20px;
           }
           .modal-wrap .cancel-send-btn {
               width: 70%;
               margin: 0 auto;
           }
       }

   </style>
@endsection

@section('page_js')
    <script>
        $(function () {
            $(document).ready(function () {
                $(".estimate-paper embed").css('height', $(window).height() * 0.9+'px');
                $( window ).resize(function() {
                    $(".estimate-paper embed").css('height', $(window).height() * 0.9+'px');
                });
                $('input[name="cancel_reason"]').click(function () {
                    if($('input[name="cancel_reason"]:checked').val() == "{{ config('const.contract_cancel_reason_code.other') }}") {
                        $('textarea[name="cancel_reason_etc"]').prop('disabled', false);
                    } else {
                        $('textarea[name="cancel_reason_etc"]').prop('disabled', true);
                    }
                });
                if($('input[name="cancel_reason"]:checked').val() == "{{ config('const.contract_cancel_reason_code.other') }}") {
                    $('textarea[name="cancel_reason_etc"]').prop('disabled', false);
                } else {
                    $('textarea[name="cancel_reason_etc"]').prop('disabled', true);
                }

                $('p.send-doc-btn').click(function (e) {
                    e.preventDefault();
                    var doc_title = $(this).data('doc_title');
                    var cfm = confirm("【" + doc_title + "】ファイルをメールで送信します。");
                    if (cfm == true) {
                        $.ajax({
                            type: "post",
                            url : "{{ route("user.vehicles.send_contract_doc") }}",
                            data: {
                                'contract': {{ $contract->id }},
                                _token: "{{ csrf_token() }}",
                            },
                            success: function(response) {
                                console.log(response.result);
                                return false;
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection