CREATE.CSHTML
@page
@using SkiaSharp
@model MediaKitManager.Pages_Ticket.CreateModel

@{
    ViewData["Title"] = "Create";
}

<link rel="stylesheet" href="~/css/neuro.css">
<br>

<form method="post">
    <button type="submit" asp-page-handler="TestNotification">Test Notifications</button>
</form>

<br><br>
@section Scripts {
    <script src="~/js/ticket-create.js"></script>
}


@{
    var selectedCourseName = HttpContext.Session.GetString("SelectedCourseName");
    var selectedCourseLevel = HttpContext.Session.GetInt32("SelectedCourseLevel");

    var startDate = HttpContext.Session.GetString("StartDate");
    var endDate = HttpContext.Session.GetString("EndDate");
}


<form id="ticketForm" method="post">
    <div class="card card-neuromorphic">
        <div class="card-body">
            <h2>Loan Request Form</h2>
            <hr />

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <!-- Basket Items -->
            @if (Model.BasketEquipment.Any())
            {
                <div class="mt-4">
                    <h4>You have selected the following equipment:</h4>
                    <table class="table project-list-table table-nowrap align-middle table-borderless table-hover">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Category</th>
                                <th>Serial No</th>
                                <th>Image</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.BasketEquipment)
                            {
                                <tr>
                                    <td>@item.ItemDescription</td>
                                    <td>@item.Category</td>
                                    <td>@item.SerialNo</td>
                               <td>
    @if (item.EquipmentImage != null && item.EquipmentImage.Length > 0)
    {
        var image = SKBitmap.Decode(item.EquipmentImage);
        if (image != null)
        {
            <img src="data:image/jpeg;base64,@Convert.ToBase64String(item.EquipmentImage)"
                alt="Equipment Image" style="max-width: 175px; max-height: 150px;" />
        }
        else
        {
            <p>No image available</p>
        }
    }
    else
    {
        <p>No image available</p>
    }
</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }
            else
            {
                <div class="alert alert-warning" role="alert">
                    <p class="text-danger">No equipment found! Please leave this page and try to complete your basket again.
                    </p>
                </div>
            }
        </div>
    </div>

    <br>

    <!-- Loan Details Section -->
    <div class="card card-neuromorphic">
        <div class="card-body">
            <h3>Loan Details</h3>
            <h5>Please use this section to provide details about your course and the project you are working
                on.</strong></h5>
            <hr />
            <p><strong>Select the course you are borrowing equipment for:</strong></p>
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>



            <div class="form-group">
                <label asp-for="Ticket.CourseId" placeholder="Course">Course</label>
                <input type="text" value="@HttpContext.Session.GetString("SelectedCourseName")" class="form-control"
                    readonly />
            </div><br>

            <div class="form-group">
                <label asp-for="Ticket.Level" placeholder="Level">Level</label>
                <input type="text" value="@selectedCourseLevel" class="form-control"
                    readonly />
                <span asp-validation-for="Ticket.Level" class="text-danger"></span>
            </div><br>

            <div class="form-group">
                <input asp-for="Ticket.Subject" placeholder="Topic" class="form-control" />
                <span asp-validation-for="Ticket.Subject" class="text-danger"></span>
            </div><br>



            <br><br>

            <p><strong>Selected Dates: </strong></p>
            <div class="form-group">
                <input asp-for="Ticket.StartDate" class="form-control" placeholder="Start Date" type="date"
                    value="@startDate" readonly />
                <span asp-validation-for="Ticket.StartDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input asp-for="Ticket.EndDate" class="form-control" placeholder="End Date" type="date"
                    value="@endDate" readonly />
                <span asp-validation-for="Ticket.EndDate" class="text-danger"></span>
            </div><br>

            <br>
            <p><strong>Please give a brief description of your project:</strong></p>
            <div class="form-group">
                <input asp-for="Ticket.ProjectDescription" placeholder="Project Description" class="form-control" />
                <span asp-validation-for="Ticket.ProjectDescription" class="text-danger"></span>
            </div><br>


            <input type="hidden" id="SerializedLocations" name="SerializedLocations" />
            <input type="hidden" id="SerializedHazards" name="SerializedHazards" />
        </div>
    </div>

    <br>

    <!-- Risk Assessment Section -->
    <div class="card card-neuromorphic">
        <div class="card-body">
            <h3>Risk Assessment</h3>
            <h5>Please use this section to complete a risk assessment for your project.
                You must consider the location(s) used for this project and any potential
                hazards you can forsee. Previously used locations can be recalled from the dropdown
                menu.</h5>
            </p>
            <hr>
            <div>
                <h4>Locations</h4>
                <div class="form-group" class="form-control" style="margin-bottom: 0.5rem;">
                    <select asp-for="SelectedLocationId" asp-items="Model.AvailableLocations" class="form-control">
                        <option value="">Select a location</option>
                    </select>
                </div>
                <input id="locationStreet" class="form-control" placeholder="Street" />
                <input id="locationCity" class="form-control" placeholder="City" />
                <input id="locationState" class="form-control" placeholder="State" />
                <input id="locationCountry" class="form-control" placeholder="Country" />
                <input id="locationPostalCode" class="form-control" placeholder="Postal Code" />
                <br>
                <button type="button" onclick="addLocation()" class="btn btn-secondary">Add Location</button>
                <div id="locationsList" class="mt-3"></div>
            </div>

            <br>
            <hr>

            <div class="row">
                <div class="col-6">
                    <h4>Hazards</h4>
                    <p><strong>Describe any hazards you may encounter in your project and how you plan to take action
                            against these risks.</strong></p>
                    <input id="hazardDescription" class="form-control" placeholder="Description" />
                    <input id="hazardMitigationSteps" class="form-control" placeholder="Mitigation Steps" />
                    <br>
                    <p><strong>Assess the level of risk for the hazard:</strong></p>
                    <div class="btn-group" role="group" aria-label="Scale">
                        <button type="button" class="btn btn-secondary btn-hzd" style="background-color:#285F9D"
                            onclick="document.getElementById('hazardHazardLevel').value = 1;">1 Trivial</button>
                        <button type="button" class="btn btn-secondary btn-hzd" style="background-color:#496790"
                            onclick="document.getElementById('hazardHazardLevel').value = 2;">2 Tolerable</button>
                        <button type="button" class="btn btn-secondary btn-hzd" style="background-color:#285F9D"
                            onclick="document.getElementById('hazardHazardLevel').value = 3;">3 Moderate</button>
                        <button type="button" class="btn btn-secondary btn-hzd" style="background-color:#7C7269"
                            onclick="document.getElementById('hazardHazardLevel').value = 4;">4 Substantial</button>
                        <button type="button" class="btn btn-secondary btn-hzd" style="background-color:#E78842"
                            onclick="document.getElementById('hazardHazardLevel').value = 5;">5 Intolerable</button>
                    </div>
                    <br>
                    <input id="hazardHazardLevel" class="form-control" placeholder="Hazard Level" type="number" />
                    <br>
                    <button type="button" onclick="addHazard()" class="btn btn-secondary">Add
                        Hazard</button>
                    <div id="hazardsList" class="mt-3"></div>
                </div>
                <div class="col-6">
                    <table class="table project-list-table align-middle table-borderless">
                        <thead>
                            <tr>
                                <th colspan="4">Hazard Examples</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Access / Doorways</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Flammable Materials</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Noise (Equipment / Music / Headphones)</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">How Else Can People Get Hurt (specify below)</td>
                            </tr>
                            <tr>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Audience Control</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Food Hygiene</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Office Equipment</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Other Hazards -</td>
                            </tr>
                            <tr>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Confined Spaces</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Hazardous Tools</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Slips and Trips</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">(e.g children, animals)</td>
                            </tr>
                            <tr>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Theft</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Fire (building fire safety)</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Storage (racks, shelves etc)</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText"></td>
                            </tr>
                            <tr>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Lighting Equipment</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Working at Height</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Transport (forklift trucks, vehicles, tractors etc)</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Electricity (including portable appliances)</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Lifting Equipment</td>
                                <td class="hazard" onclick="document.getElementById('hazardDescription').value = this.innerText">Weather (hot, cold, lightning etc)</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <hr>


            <!-- Crew Members -->
            <br><br>
            <p><strong>Who else is working on your project? Once you select your course the drop down below will
                    show your classmates.</strong></p>
            <p><strong>Click add crew member to add a classmate to your project crew:</strong></p>

            <div class="form-group">
                <select id="crewMember" asp-items="Model.ClassMates" class="form-control">
                    <option value="">Select a crew member</option>
                </select><br>
            </div>
            <button type="button" class="btn btn-secondary" onclick="addCrewMember()">Add
                Crew Member</button>

            <br>
            <div id="crewList"></div>

            <br><br>
        </div>
    </div>

    <br>

    <!-- Guardian Consent -->
    @if (Model.IsUserUnder18)
    {
        <div class="card card-neuromorphic">
            <div class="card-body">
                <h4>Guardian Consent</h4>
                <h5>Because you are under the age of 18 you need consent from a responsible guardian to complete
                    this request. Your guardian must provide their name, contact number and signature below to
                    verify the request.</h5>
                <hr>
                <div class="form-group">
                    <input asp-for="GuardianName" placeholder="Name" class="form-control" id="guardianName" />
                    <span asp-validation-for="GuardianName" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input asp-for="GuardianContactNumber" placeholder="Contact Number" class="form-control"
                        id="guardianContactNumber" />
                    <span asp-validation-for="GuardianContactNumber" class="text-danger"></span>
                </div>
            </div>




            </div>

            }



<canvas id="signature-pad" width="auto" height="auto"></canvas>
<button id="clear">Clear</button>
<button id="save">Save</button>

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
    var canvas = document.getElementById("signature-pad");
    var signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgb(250,250,250)' });
    document.getElementById("clear").addEventListener('click', function () {
        signaturePad.clear();
    });
    document.getElementById("save").addEventListener('click', function () {
        var dataURL = signaturePad.toDataURL();
        var link = document.createElement('a');
        link.download = 'signature.png';
        link.href = dataURL;
        link.click();
    });
</script>




    <br>




    <div class="card card-neuromorphic">
        <div class="card-body">
            <p><strong>Check all the information you have entered is correct before you submit your
                    request.</strong></p>
            <p><strong>You must await confirmation before you are able to collect your equipment.</strong></p><br>

            <div class="form-group">
                <input type="submit" value="Submit Request" class="btn btn-primary" />
            </div>
            <br><br><a asp-page="Index">Cancel Request / Back to List</a>
        </div>
    </div>

</form>


CREATE.CSHTML.CS
    public async Task<IActionResult> OnPostUploadSignatureAsync()
        {
            var uploadedSignature = Request.Form.Files["UploadedSignature"];
            if (uploadedSignature == null || uploadedSignature.Length == 0)
            {
                return BadRequest("No file uploaded or file is empty.");
            }

            try
            {
                using (var memoryStream = new MemoryStream())
                {
                    await uploadedSignature.CopyToAsync(memoryStream);
                    // Assuming Ticket is a property that has been set up previously
                    Ticket.GuardianSignature = memoryStream.ToArray();
                }
                await _context.SaveChangesAsync();
                return new JsonResult(new { success = true });
            }
            catch (Exception ex)
            {
                // Log exception here
                return StatusCode(500, "Internal Server Error: " + ex.Message);
            }
        }




ticket-create.js
document.getElementById('ticketForm').addEventListener('submit', function (event) {
    event.preventDefault(); // Prevent the form from submitting the traditional way initially

    console.log("Test");
    var signaturePadDataUrl = signaturePad.toDataURL("image/png");

    // Convert Data URL to Blob
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    var blob = dataURLtoBlob(signaturePadDataUrl);
    var formData = new FormData();
    formData.append('UploadedSignature', blob, 'signature.png');

    // Verify FormData contents
    for (var pair of formData.entries()) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    // Send FormData to the server
    fetch('?handler=UploadSignature', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`Server responded with: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('Server Response:', data);
        // Additional actions based on response, like redirecting
        if (data.success) {
            window.location.href = '/Index'; // Redirect on successful upload
        } else {
            alert('Upload failed: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Failed to upload signature:', error);
    });
});