@extends('layouts.app')
@section('title', $model->name)
@section('content')
    <style>
        p {
            font-size: 1.3em;
        }

        p span {
            font-weight: bold;
        }

        .contract {
            padding: 30px;
        }


        @media print {
    body * {
        visibility: hidden;
    }

    .contract,
    .contract * {
        visibility: visible;
    }

    .contract {
        position: absolute;
        left: 0;
        top: 0;
    }

    /* Set margin to 1cm */
    @page {
        margin: 1cm;
    }

    /* Hide headers and footers */
    header,
    footer {
        display: none;
    }
}

    </style>
    <div class="d-flex justify-content-end">
        <a class="btn btn-info align-self-start" onclick="print()">
            تحميل
        </a>
    </div>
    <br>

    <div class="bg-white contract ">
        <div class="row">
            <div class="col col-3">
                <img class="w-100"
                    src="data:image/jpeg;base64,{{ base64_encode(file_get_contents(public_path('images/logo-en-new-11.png'))) }}"
                    alt="">
            </div>
            <div class="col col-6"></div>
            <div class="col col-3">
                <img class="w-100"
                    src="data:image/jpeg;base64,{{ base64_encode(file_get_contents(public_path('images/logo-ar-new-11.png'))) }}"
                    alt="">
            </div>

        </div>

        <br>
        <br>

        <h1 class="text-center title my-5 fw-bold">{{ $model->contract_title }}</h1>

        <div class="into">
            <p><span>رقم العقد : </span>{{ $model->id }}</p>
            <p><span>تاريخ بداية العقد: : </span>{{ $model->start_date }}</p>
            <p><span>تاريخ نهاية العقد : </span>{{ $model->end_date }}</p>
            <p><span>المدة  : </span>{{ $model->duration }}</p>
            <p><span>فئة مدة العقد: </span>{{ $model->duration_category }}</p>
            <p><span>عدد الساعات : </span>{{ $model->hours }}</p>

            <p><span>نظام التعاقد: </span>{{ $model->contracting_system }}</p>
            <p><span>قيمة العقد: </span> {{ $model->amount }}  {{ $model->currency }} </p>
        </div>
        <br>
        <br>
        <p class="my-4"><span>{{ $model->contract_title_into }}</span></p>
        <p>{{ $model->contract_content_intro }}</p>

        <h1 class="text-center title my-5 fw-bold">بيانات الطرف الأول</h1>
        <div class="into">
            <p><span> اسم العميل : </span>{{ $model->contract_name }}</p>
            <p><span> العنوان : </span>{{ $model->contract_address }}</p>
            <p><span> رقم السجل : </span>{{ $model->contract_license_number }}</p>
            <p><span> هاتف العميل : </span>{{ $model->contract_phone }}</p>
            <p><span> البريد الإلكتروني : </span>{{ $model->contract_email }}</p>
            <p><span> ممثل العميل : </span>{{ $model->contract_agent_name }}</p>
            <p><span> الوظيفة : </span>{{ $model->contract_function }}</p>
        </div>
        <br>
        <br>
        <h1 class="text-center title my-5 fw-bold">بيانات الطرف الثاني</h1>
        <div class="into">
            <p><span>الاسم : </span>{{ $model->name }}</p>
            <p><span> العنوان : </span>{{ $model->address }}</p>
            <p><span> الجنسية : </span>{{ $model->nationality }}</p>
            <p><span> رقم الهوية : </span>{{ $model->id_number }}</p>
            <p><span> رقم الجوال : </span>{{ $model->phone }}</p>
            <p><span> البريد الإلكتروني : </span>{{ $model->email }}</p>
            <p><span> الوظيفة : </span>{{ $model->function }}</p>
        </div>
        <br>
        <br>
        <p class="my-4"><span>{{ $model->contract_title_terms }}</span></p>
        <p>{{ $model->contract_intro_terms }}</p>

        <br>
        <br>

        @foreach ($model->contract_subject as $key => $subject)
            <h3 class="mb-2"><span>{{ $subject }}</span></h3>
            @if (is_array($model->contract_subitems) && isset($model->contract_subitems[$key]))
                <ol>
                @foreach ($model->contract_subitems[$key] as $subitems)
                    <li>{{ $subitems }}</li>
                @endforeach
                </ol>
            @endif
        @endforeach

        <br>
        <br>
        <p class="my-4"><span>{{ $model->contract_title_conclusion }}</span></p>
        <p>{{ $model->contract_content_conclusion }}</p>
        <br>
        <br>

        {{-- @dump($model); --}}
        <div class="row my-4">
            <div class="col col-sm-3">
                <p>الطرف الأول:</p>
                <p><span>{{ $model->contract_name }}</span></p>

                {{-- @if($model->signature_type=='upload') --}}
                <img class="w-50" src="{{ asset($model->contract_electronic_signature) }}" alt="">
                {{-- @else
                <img class="w-75" src="{{ $model->contract_electronic_signature }}" alt="" />
                @endif --}}

            </div>


            <div class="col col-sm-3">
                {{ $qrCode }}
            </div>

            <div class="col col-sm-3">
                <p>ختم العميل : </p>
                <img class="w-50" src="{{ asset($model->contract_logo) }}" alt="">
            </div>
            <div class="col col-sm-3">
                <p>الطرف الثاني : </p>
                <p><span>{{ $model->name }}</span></p>
                @if($model->signature_type=='upload')
                <img class="w-50" src="{{ asset($model->coordinator_signature) }}" alt="">
                @else
                <img class="w-75" src="{{ $model->coordinator_signature }}" alt="" />
                @endif
            </div>
        </div>

    </div>
    </div>

    {{-- form signature --}}
    <style>
        .signature {
            max-width: 400px;
            margin: 0 auto;
            font-family:sans-serif;
            text-align: center;
        }
        .wrapper {
            position: relative;
            width: 400px;
            height: 200px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: solid 1px #ddd;
            margin: 10px 0px;
        }
        .signature-pad {
            position: absolute;
            left: 0;
            top: 0;
            width:400px;
            height:200px;
        }
        textarea {
            width: 100%;
            min-height: 100px;
        }
    </style>


<div class="signature card my-4">
    <div id="drawContainer">
        <form id="form-submit" action="" method="POST">
            <div class="wrapper">
                <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
            </div>
            <button id="clear" class="btn btn-sm btn-secondary">حذف</button>
        </form>
    </div>

    <form action="{{ route('employees.contracts.signature.store',$model->id) }}" method="POST" enctype="multipart/form-data" id="final-form">
        @csrf
        <label>
            <input type="radio" name="signature_type" value="draw" id="drawRadio" checked>
            التوقيع المباشر
        </label>
        <label>
            <input type="radio" name="signature_type" value="upload" id="uploadRadio">
            رفع التوقيع
        </label>

        <input type="hidden" id='signature-result' name="draw">
        <input type="file" id='uploadContainer' class="" name="upload">

        <div class="col-12">
            <div class="row">
                <button type="submit" class="btn btn-dark me-2"><i class="far fa-check-circle"></i></button>
            </div>
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
    <script>
        $(function() {
            $('#uploadContainer').hide();

            $('input[name="signature_type"]').change(function() {
                if ($('#uploadRadio').is(':checked')) {
                    $('#uploadContainer').show();
                    $('#drawContainer').hide();
                } else if ($('#drawRadio').is(':checked')) {
                    $('#uploadContainer').hide();
                    $('#drawContainer').show();
                }
            });

            var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(0, 0, 0)'
            });

            function getSignaturePad() {
                var imageData = signaturePad.toDataURL('image/png');
                $('#signature-result').val(imageData);
            }

            $('#final-form').submit(function(e) {
                if ($('#drawRadio').is(':checked')) {
                    getSignaturePad();
                }
            });

            $('#clear').click(function(e) {
                e.preventDefault();
                signaturePad.clear();
            });
        });
    </script>
</div>

@endsection