@extends('layouts.app')

@section('title', 'buyer | '.config('app.name'))
@section('style')
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ url('plugins/fontawesome-free/css/all.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ url('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ url('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ url('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ url('dist/css/adminlte.css') }}">
    <style>
        .form-group > .select2-container {
            width: 100% !important;
        }
    </style>
@endsection
@section('content')
    <style>
        .signature-pad {
            position: relative;
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }
        .signature-pad canvas {
            position: absolute;
            left: 0;
            top: 0;
        }
        .heading {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .sub-heading {
            text-align: center;
            font-size: 18px;
            margin-bottom: 20px;
        }
        .buyer-name {
            text-align: center;
            font-size: 16px;
            margin-bottom: 10px;
        }

        .signature-pad {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 400px;
            margin-bottom: 20px;
        }

        #signatureContainer {
            position: relative;
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;
        }

        #signatureCanvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        #saveButton {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #saveButton:hover {
            background-color: #45a049;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>


<div class="container">
    <div class="heading">Offer Loop</div>
    <div class="sub-heading">Sign Agreement</div>
    <div class="buyer-name">Buyer Name: {{ $buyer->name }}</div>

    <div class="signature-pad">
        <div id="signatureContainer">
            <canvas id="signatureCanvas" width="400" height="200"></canvas>
        </div>
    </div>
    <div class="button-container">
        <button id="saveButton">Save Signature</button>
    </div>


    <form id="signatureForm" action="{{ route('buyer_signature_post') }}" method="POST" style="display: none;">
        @csrf
        <input type="hidden" name="signature_pad" id="signatureInput">
        <input type="hidden" name="offer_id" value="{{ $offer->id }}">
        <input type="hidden" name="buyer_id" value="{{ $buyer->id }}">

        <div class="button-container">
            <button type="submit">Generate PDF</button>
        </div>

    </form>
</div>

@endsection

@section('script')
<script src="https://unpkg.com/signature_pad"></script>

<script>
    var canvas = document.getElementById('signatureCanvas');
    var signaturePad = new SignaturePad(canvas);

    var saveButton = document.getElementById('saveButton');
    var form = document.getElementById('signatureForm');
    var signatureInput = document.getElementById('signatureInput');

    saveButton.addEventListener('click', function() {
        var dataURL = signaturePad.toDataURL();
        signatureInput.value = dataURL;
        form.submit();
    });
</script>
@endsection