@extends('frontend.layouts.app')

@section('title')
@endsection

@section('seo')
    <title>@extends('frontend.layouts.app')

@section('title')
@endsection

@section('seo')
    <title>Banquet Form | Anisabel Suites</title>
    <meta property="og:locale" content="en_US" />
    <meta property="og:url" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Banquet Form | Anisabel Suites" />
    <meta property="og:description" content="" />
    <meta property="og:site_name" content="Banquet Form | Anisabel Suites" />
    <meta property="og:image" content="{{ asset('images/thumbnail.png') }}" />
    <meta property="og:thumbnail" content="{{ asset('images/thumbnail.png') }}" />
@endsection

@section('content')
    <!--<div>-->
    <!--    <img src="{{ asset('images/banner-venues.jpg') }}" class="d-block align-middle img-fluid" alt="...">-->
    <!--</div>-->
    <div class="bg-other" style="background-image: url('{{ asset('images/Forms.jpg') }}')">
    </div>

    <div class="container my-5" id="event-inquiry-section">
        @if (session('success'))
            <div class="container alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="row justify-content-center">
            <div class="col-12 col-md-6 px-3">
                <img src="{{ asset('images/logo-dining.png') }}" class="img-fluid mb-2" alt="Menu" width="550"
                    data-aos="zoom-in-down">
                <div data-aos="zoom-in-right">
                    <h1 class="fw-bold color-mid mb-lg-5 lh-base text-center">
                        A central spot, <br>
                        just steps away from <br>
                        all your city destinations. <br>
                        Tucked at the heart of Davao City <br>
                        <b>ANISABEL SUITES </b> <br>
                        is a destination worth finding. <br>
                        Just 15 minutes from the Davao International Airport, <br>
                        nestled in a quiet residential area <br>
                        24-hour public transportation, <br>
                        conveniently close to most <br>
                        to business and commercial establishments, <br>
                        shopping malls, dining, <br>
                        entertainment areas, and adventure parks.
                    </h1>
                </div>
            </div>

            <div class="col-12 col-md-6" data-aos="zoom-in-left">
                <h1 class="fw-bold color-mid">Banquet Inquiry Form </h1>

                <form action="{{ url('banquet-form') }}" method="POST">@csrf
                    <input type="hidden" name="type" value="event">
                    <input type="hidden" name="package_name" value="{{ $events->name }}">
                    <div class="row gy-4 mb-4">
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="fname" class="form-label fw-bold color-mid">First Name*</label>
                                <input type="text" class="form-control rounded" name="first_name" id="fullname"
                                    placeholder="" style="border:1px solid #895c00;">
                                @error('first_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="lname" class="form-label fw-bold color-mid">Last Name*</label>
                                <input type="text" class="form-control rounded" name="last_name" id="fullname"
                                    placeholder="" style="border:1px solid #895c00;">
                                @error('last_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="email" class="form-label fw-bold color-mid">Email Address*</label>
                                <input type="email" class="form-control rounded" name="email" id="email"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="contact" class="form-label fw-bold color-mid">Contact No*</label>
                                <input type="number" class="form-control rounded" name="contact" id="contact"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('contact')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="contact" class="form-label fw-bold color-mid">Address*</label>
                                <input type="text" class="form-control rounded" name="address" id="address"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('address')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="company" class="form-label fw-bold color-mid">Name of Company*</label>
                                <input type="text" class="form-control rounded" name="company" id="company"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('company')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="contact" class="form-label fw-bold color-mid">Industry*</label>
                                <input type="text" class="form-control rounded" name="industry" id="industry"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('industry')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <h1 class="fw-bold color-mid">Banquet Details</h1>

                    <div class="row gy-4 mb-4">
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="number" class="form-label fw-bold color-mid">Number of guests*</label>
                                <input type="number" class="form-control rounded" value="{{ $events->pax }}"
                                    name="attendees" id="number" placeholder=""
                                    {{ $events->pax != null ? 'disabled' : '' }} style="border:1px solid #b19357;">
                                <input type="hidden" name="attendees" value="{{ $events->pax }}"
                                    {{ $events->pax != null ? '' : 'disabled' }}>
                                @error('attendees')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="venue" class="form-label  fw-bold color-mid">Preferred event venue*</label>
                                <select type="text" class="form-control rounded" name="venue" id="venue"
                                    placeholder="" style="border:1px solid #b19357;">
                                    @foreach (json_decode($events->venue) as $items)
                                        <option>{{ $items }}</option>
                                    @endforeach
                                </select>
                                @error('venue')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="date" class="form-label fw-bold color-mid">Preferred Date*</label>
                                <input type="date" class="form-control rounded" name="preferred_date" id="date"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('preferred_date')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="time" class="form-label fw-bold color-mid">Preferred Time*</label>
                                <select type="text" class="form-control rounded" name="preferred_time" id="time"
                                    placeholder="" style="border:1px solid #b19357;">
                                    @foreach (json_decode($events->time) as $items)
                                        <option>{{ $items }}</option>
                                    @endforeach
                                </select>
                                @error('preferred_time')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="type" class="form-label fw-bold color-mid">What Type of Event*</label>
                                <select type="text" class="form-control rounded" name="event" id="type"
                                    placeholder="" style="border:1px solid #b19357;">
                                    @if ($events->type != null)
                                        <option selected>{{ $events->type }}</option>
                                    @else
                                        <option>Corporate</option>
                                        <option>Celebratory</option>
                                    @endif
                                </select>
                                @error('event')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        @if($events->type === "Banquets Package")
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="food" class="form-label fw-bold color-mid">Preferred Set of Food*</label>
                                <select type="text" class="form-control rounded" name="food" id="food"
                                    placeholder="" style="border:1px solid #b19357;">
                                    <option value="Set A">Set A</option>
                                    <option value="Set B">Set B</option>
                                    <option value="Set C">Set C</option>
                                </select>
                                @error('menu')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <div class="mt-2">
                                    <a data-bs-toggle="modal" class="fw-bold text-primary text-decoration-underline" role="button" data-bs-target="#modal3{{ $events->id }}">
                                        See Menu?
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endif

                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="food" class="form-label fw-bold color-mid">Type of Order*</label>
                                <select type="text" class="form-control rounded" name="food_type" id="food_type"
                                    placeholder="" style="border:1px solid #b19357;">
                                    <option value="Delivery">Delivery</option>
                                    <option value="Dine in">Dine in</option>
                                    <option value="Pick up">Pick up</option>
                                </select>
                                @error('menu')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="">
                            <label for="request" class="form-label fw-bold color-mid">Special Request *</label>
                            <textarea type="text" class="form-control rounded" name="request" id="request" rows="6"
                                style="border:1px solid #b19357;"></textarea>
                        </div>

                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <input type="hidden" class="form-control rounded" name="tracking" id="track"
                                    placeholder="" style="border:1px solid #895c00;" readonly>
                            </div>
                        </div>

                        <p class="color-mid">We will be contacting you to schedule an ocular visit.</p>

                        <div class="mb-4">
                            <button type="submit" class="btn bg-color-light px-4 rounded-3 fw-bold">
                                Submit
                            </button>
                        </div>

                    </div>
                </form>

            </div>
        </div>

    </div>

    {{-- MODAL --}}
    <div class="modal fade" id="modal3{{ $events->id }}" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="{{ asset('banquet/' . $events->image) }}" class="img-fluid" alt="">
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            $('.form-dining').submit(function(e) {
                e.preventDefault();

                $.ajax({
                    method: "POST",
                    url: "{{ url('dining-inquiry') }}",
                    data: $(this).serialize(),
                    success: function(response) {
                        showSuccessAlert();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                            showFieldErrors(jqXHR.responseJSON.errors);
                        } else {
                            showErrorAlert('Failed to submit.');
                        }
                    }
                });

                function showSuccessAlert() {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        text: 'Message sent successfully!',
                        showConfirmButton: false,
                        timer: 1500,
                        timerProgressBar: true,
                    }).then(function() {
                        location.reload();
                    });
                }

                function showErrorAlert(message) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'error',
                        text: message,
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                    });
                }

                function showFieldErrors(errors) {
                    for (var key in errors) {
                        if (errors.hasOwnProperty(key)) {
                            showErrorAlert(errors[key][0]);
                        }
                    }
                }
            });
        });
    </script>

    <script>
        let x = Math.floor(Math.random() * 100000); // Generate a random number between 0 and 99999
        let paddedNumber = x.toString().padStart(5, '0'); // Pad with leading zeros to ensure 5 digits
        document.getElementById("track").value = paddedNumber;
    </script>
@endsection
 Form | Anisabel Suites</title>
    <meta property="og:locale" content="en_US" />
    <meta property="og:url" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Events Form | Anisabel Suites" />
    <meta property="og:description" content="" />
    <meta property="og:site_name" content="Events Form | Anisabel Suites" />
    <meta property="og:image" content="{{ asset('images/thumbnail.png') }}" />
    <meta property="og:thumbnail" content="{{ asset('images/thumbnail.png') }}" />
@endsection

@section('content')
    <!--<div>-->
    <!--    <img src="{{ asset('images/banner-venues.jpg') }}" class="d-block align-middle img-fluid" alt="...">-->
    <!--</div>-->
    <div class="bg-other" style="background-image: url('{{ asset('images/Forms.jpg') }}')">
    </div>

    <div class="container my-5" id="event-inquiry-section">
        @if (session('success'))
            <div class="container alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="row justify-content-center">
            <div class="col-12 col-md-6 px-3">
                <img src="{{ asset('images/logo-dining.png') }}" class="img-fluid mb-2" alt="Menu" width="550"
                    data-aos="zoom-in-down">
                <div data-aos="zoom-in-right">
                    <h1 class="fw-bold color-mid mb-lg-5 lh-base text-center">
                        A central spot, <br>
                        just steps away from <br>
                        all your city destinations. <br>
                        Tucked at the heart of Davao City <br>
                        <b>ANISABEL SUITES </b> <br>
                        is a destination worth finding. <br>
                        Just 15 minutes from the Davao International Airport, <br>
                        nestled in a quiet residential area <br>
                        24-hour public transportation, <br>
                        conveniently close to most <br>
                        to business and commercial establishments, <br>
                        shopping malls, dining, <br>
                        entertainment areas, and adventure parks.
                    </h1>
                </div>
            </div>

            <div class="col-12 col-md-6" data-aos="zoom-in-left">
                <h1 class="fw-bold color-mid">Event Inquiry Form</h1>

                <form action="{{ url('banquet-form') }}" method="POST">@csrf
                    <input type="hidden" name="type" value="event">
                    <input type="hidden" name="package_name" value="{{ $events->name }}">
                    <div class="row gy-4 mb-4">
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="fname" class="form-label fw-bold color-mid">First Name*</label>
                                <input type="text" class="form-control rounded" name="first_name" id="fullname"
                                    placeholder="" style="border:1px solid #895c00;">
                                @error('first_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="lname" class="form-label fw-bold color-mid">Last Name*</label>
                                <input type="text" class="form-control rounded" name="last_name" id="fullname"
                                    placeholder="" style="border:1px solid #895c00;">
                                @error('last_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="email" class="form-label fw-bold color-mid">Email Address*</label>
                                <input type="email" class="form-control rounded" name="email" id="email"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="contact" class="form-label fw-bold color-mid">Contact No*</label>
                                <input type="number" class="form-control rounded" name="contact" id="contact"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('contact')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="company" class="form-label fw-bold color-mid">Name of Company*</label>
                                <input type="text" class="form-control rounded" name="company" id="company"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('company')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="contact" class="form-label fw-bold color-mid">Industry*</label>
                                <input type="text" class="form-control rounded" name="industry" id="industry"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('industry')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <h1 class="fw-bold color-mid">Event Details</h1>

                    <div class="row gy-4 mb-4">
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="number" class="form-label fw-bold color-mid">Number of guests*</label>
                                <input type="number" class="form-control rounded" value="{{ $events->pax }}"
                                    name="attendees" id="number" placeholder=""
                                    {{ $events->pax != null ? 'disabled' : '' }} style="border:1px solid #b19357;">
                                <input type="hidden" name="attendees" value="{{ $events->pax }}"
                                    {{ $events->pax != null ? '' : 'disabled' }}>
                                @error('attendees')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="venue" class="form-label  fw-bold color-mid">Preferred event venue*</label>
                                <select type="text" class="form-control rounded" name="venue" id="venue"
                                    placeholder="" style="border:1px solid #b19357;">
                                    @foreach (json_decode($events->venue) as $items)
                                        <option>{{ $items }}</option>
                                    @endforeach
                                </select>
                                @error('venue')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="date" class="form-label fw-bold color-mid">Preferred Date*</label>
                                <input type="date" class="form-control rounded" name="preferred_date" id="date"
                                    placeholder="" style="border:1px solid #b19357;">
                                @error('preferred_date')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="time" class="form-label fw-bold color-mid">Preferred Time*</label>
                                <select type="text" class="form-control rounded" name="preferred_time" id="time"
                                    placeholder="" style="border:1px solid #b19357;">
                                    @foreach (json_decode($events->time) as $items)
                                        <option>{{ $items }}</option>
                                    @endforeach
                                </select>
                                @error('preferred_time')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="type" class="form-label fw-bold color-mid">What Type of Event*</label>
                                <select type="text" class="form-control rounded" name="event" id="type"
                                    placeholder="" style="border:1px solid #b19357;">
                                    @if ($events->type != null)
                                        <option selected>{{ $events->type }}</option>
                                    @else
                                        <option>Corporate</option>
                                        <option>Celebratory</option>
                                    @endif
                                </select>
                                @error('event')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="food" class="form-label fw-bold color-mid">Preferred Set of Food*</label>
                                <select type="text" class="form-control rounded" name="food" id="food"
                                    placeholder="" style="border:1px solid #b19357;">
                                    <option value="Set A">Set A</option>
                                    <option value="Set B">Set B</option>
                                    <option value="Set C">Set C</option>
                                </select>
                                @error('menu')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <div class="mt-2">
                                    <a data-bs-toggle="modal" class="fw-bold text-primary text-decoration-underline" role="button" data-bs-target="#modal3{{ $events->id }}">
                                        See Menu?
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <label for="food" class="form-label fw-bold color-mid">Type of Order*</label>
                                <select type="text" class="form-control rounded" name="food_type" id="food"
                                    placeholder="" style="border:1px solid #b19357;">
                                    <option value="Delivery">Delivery</option>
                                    <option value="Dine in">Dine in</option>
                                    <option value="Pick up">Pick up</option>
                                </select>
                                @error('menu')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="">
                            <label for="request" class="form-label fw-bold color-mid">Special Request *</label>
                            <textarea type="text" class="form-control rounded" name="request" id="request" rows="6"
                                style="border:1px solid #b19357;"></textarea>
                        </div>

                        <div class="col-12 col-md-6 col-xl-6">
                            <div>
                                <input type="hidden" class="form-control rounded" name="tracking" id="track"
                                    placeholder="" style="border:1px solid #895c00;" readonly>
                            </div>
                        </div>

                        <p class="color-mid">We will be contacting you to schedule an ocular visit.</p>

                        <div class="mb-4">
                            <button type="submit" class="btn bg-color-light px-4 rounded-3 fw-bold">
                                Submit
                            </button>
                        </div>

                    </div>
                </form>

            </div>
        </div>

    </div>

    {{-- MODAL --}}
    <div class="modal fade" id="modal3{{ $events->id }}" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="{{ asset('event-packages/' . $events->image) }}" class="img-fluid" alt="">
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            $('.form-dining').submit(function(e) {
                e.preventDefault();

                $.ajax({
                    method: "POST",
                    url: "{{ url('dining-inquiry') }}",
                    data: $(this).serialize(),
                    success: function(response) {
                        showSuccessAlert();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                            showFieldErrors(jqXHR.responseJSON.errors);
                        } else {
                            showErrorAlert('Failed to submit.');
                        }
                    }
                });

                function showSuccessAlert() {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        text: 'Message sent successfully!',
                        showConfirmButton: false,
                        timer: 1500,
                        timerProgressBar: true,
                    }).then(function() {
                        location.reload();
                    });
                }

                function showErrorAlert(message) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'error',
                        text: message,
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                    });
                }

                function showFieldErrors(errors) {
                    for (var key in errors) {
                        if (errors.hasOwnProperty(key)) {
                            showErrorAlert(errors[key][0]);
                        }
                    }
                }
            });
        });
    </script>

    <script>
        let x = Math.floor(Math.random() * 100000); // Generate a random number between 0 and 99999
        let paddedNumber = x.toString().padStart(5, '0'); // Pad with leading zeros to ensure 5 digits
        document.getElementById("track").value = paddedNumber;
    </script>
@endsection