@extends('layouts.frontend')
@section('content')
    {{-- Loader Call--}}
        <div class="overlay d-none" id="loader">
            <div class="overlay__inner">
                <div class='pac-man'></div>
                <div class="overlay__content d-none"><span class="spinner"></span></div>
            </div>
        </div>
    {{--Loader End--}}
<div class="wrapper order-page">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="order-page-left">
                    <div class="opl-inner">
                    <div class="order-steps-section">
                        <div class="stepper-wrapper">
                            <div class="stepper-item active" id="stepper-item-1">
                                <div class="step-counter">1</div>
                                <div class="step-name">Step 1</div>
                            </div>
                            <div class="stepper-item" id="stepper-item-2">
                                <div class="step-counter">2</div>
                                <div class="step-name">Step 2</div>
                            </div>
                            <div class="stepper-item" id="stepper-item-3">
                                <div class="step-counter">3</div>
                                <div class="step-name">Step 3</div>
                            </div>
                            <div class="stepper-item" id="stepper-item-4">
                                <div class="step-counter">4</div>
                                <div class="step-name">Step 4</div>
                            </div>
                        </div>
                        <div class="steps-box-outer">
                            <div class="steps-box active" id="step-1">
                                <div class="steps-box-inner">
                                    <div class="section-title">
                                        <h2>Place a New Order</h2>
                                    </div>
                                    <div class="steps-box-label">
                                        <p><span>1</span> Assignment Type </p>
                                        <div class="button-container">
                                            <button class="button" onclick="nextbutton(1, 2)">
                                                <i class="fa fa-arrow-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="steps-box-form-inner">
                                        <div class="custom-made-form">
                                            <div class="">
                                                @foreach($assignmentTypes as $index => $type)
                                                    @if(isset($orderData['assignment_type_id']) && $type->id == $orderData['assignment_type_id'])
                                                        <label class="radio-inline active">
                                                            <input type="radio" name="assignmentID" id="assignmentID" value="{{ $type->id }}" checked>
                                                            <span>
                                                                <strong>{{ $type->title }}</strong>
                                                                <div class="rb-spacer"></div>
                                                                {{ $type->description }}
                                                            </span>
                                                        </label>
                                                    @else
                                                        <label class="radio-inline">
                                                            <input type="radio" name="assignmentID" id="assignmentID" value="{{ $type->id }}">
                                                            <span>
                                                                <strong>{{ $type->title }}</strong>
                                                                <div class="rb-spacer"></div>
                                                                {{ $type->description }}
                                                            </span>
                                                        </label>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="button-container">
                                        <button class="button" onclick="nextbutton(1, 2)" style="padding : 3px;">
                                            <i class="fa fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="steps-box" id="step-2">
                                <div class="steps-box-inner">
                                    <div class="section-title">
                                        <h2>Place a New Order</h2>
                                    </div>
                                    <div class="steps-box-label">
                                        <p><span>2</span> Order Detail</p>
                                        <div class="button-container">
                                            <button class="button" onclick="backbutton(2,1)">
                                                <i class="fa fa-arrow-left"></i>
                                            </button>
                                            <button class="button" onclick="nextbutton(2, 3)">
                                                <i class="fa fa-arrow-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="steps-box-form-inner">
                                        <div class="form-group">
                                            <label for="">Year of Study</label>
                                            <select name="academic_level" id="academic_level" class="form-control select-with-search">
                                                <!-- @foreach($academicLevels as $index => $level)
                                                    @if(isset($orderData['year_of_study']) && $level->id == $orderData['year_of_study'])
                                                        <option value="{{ $level->id }}" selected>{{ $level->title }}</option>
                                                    @else
                                                        <option value="{{ $level->id }}">{{ $level->title }}</option>
                                                    @endif
                                                @endforeach -->
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label id="paperLabel0" for="">Type of Paper</label>
                                            <select name="assignment_category" id="assignment_category" class="form-control select-with-search"></select>
                                        </div>
                                        <div class="form-group">
                                            <label id="paperLabel1" for="">Discipline</label>
                                            <select name="disciplines" id="disciplines" class="form-control select-with-search"></select>
                                        </div>
                                        <div class="row" id="paperLabel2">
                                        <div class="col-lg-3 col-md-3 col-6">
                                            <div class="form-group">
                                                <label for="">Pages</label>
                                                <div class="plus-minus-counter">
                                                    <div class="number form-control p-0">
                                                        <span class="minus"><i class="fa fa-minus"></i></span>
                                                        @if(isset($orderData['page_count']))
                                                           <input type="text" id="pageCount" value="{{ $orderData['page_count'] }}" />
                                                           <input type="text" id="total_page_count" value="{{ $orderData['page_count'] }}" hidden />
                                                        @else
                                                           <input type="text" id="pageCount" value="1" />
                                                           <input type="text" id="total_page_count" value="0" hidden />
                                                        @endif
                                                        <span class="plus"><i class="fa fa-plus"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-1"></div>
                                        <div class="col-lg-2 col-md-2 col-5">
                                            <div class="step-box-words">
                                                <div class="form-group">
                                                    <label for="">&nbsp;</label>
                                                    <div class="sbw-color">
                                                        <label for="wordCount" id="wordCount">275 Words</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                            <div class="col-md-1"></div>
                                            <div class="col-lg-3 col-md-4">
                                                <div class="form-group">
                                                    <label for="" class="d-md-block d-none">&nbsp;</label>
                                                    <div class="sbw-color">
                                                        <div class="form-check">
                                                            <input class="form-check-input single_spacing" type="checkbox"
                                                                id="flexCheckDefault single_spacing" name="single_spacing">
                                                            <label class="form-check-label" for="flexCheckDefault">
                                                                Single Spacing
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="button-container">
                                        <button class="button" onclick="backbutton(2,1)" style="padding : 3px;">
                                            <i class="fa fa-arrow-left"></i> 
                                        </button>
                                        <button class="button" onclick="nextbutton(2, 3)" style="padding : 3px;">
                                             <i class="fa fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="steps-box" id="step-3">
                                <div class="steps-box-inner">
                                    <div class="section-title">
                                        <h2>Place a New Order</h2>
                                    </div>
                                    <div class="steps-box-label">
                                        <p><span>3</span> Order Customization</p>
                                        <div class="button-container">
                                            <button class="button" onclick="backbutton(3,2)">
                                                <i class="fa fa-arrow-left"></i>
                                            </button>
                                            <button class="button" onclick="nextbutton(3,4)">
                                                <i class="fa fa-arrow-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="steps-box-form-inner">
                                        <div class="form-group">
                                            <label for="">Deadline</label>
                                            <!-- <input type="text" id="custom-value" name="selected_due_date" value="12 Hours Delivery" class="form-control form-control-date form-control-date-readonly" data-bs-toggle="modal" data-bs-target="#exampleModal" readonly=""> -->
                                            <select name="deadline" id="deadline" class="form-control select-with-search"></select>
                                            <div class="modal fade calendar-modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-body">
                                                            <div id="calendar"></div>
                                                            <input hidden id="selected_due_date" name="selected_due_date">
                                                            <div class="mt-3 mb-3">
                                                                <label for="">Delivery Deadline</label>
                                                                <!-- <select name="deadline" id="deadline" class="form-control select-with-search"></select> -->
                                                            </div>
                                                            <div class="modal-form-btn-outer">
                                                                <button id="confirmButton" class="btn btn-main w-100">Confirm</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="">Instructions <img src="{{asset('assets/frontend/images/icon-info.svg')}}"
                                                    class="img-fluid" alt="" style="width: 13px;margin-left: 2px;"></label>
                                            <div class="instructions-main-box">
                                                <div class="instructions-title-box">
                                                    <input type="text" class="form-control" id="instructions" name="instructions"
                                                        placeholder="Enter the title of your paper">
                                                </div>
                                                <div class="mt-3">
                                                     <textarea class="form-control" id="description" name="description" placeholder="Enter Description for your paper"></textarea>
                                                </div>
                                                <form id="yourFormId" enctype="multipart/form-data">
                                                    <!-- <div class="file-upload-box">
                                                        <input type="file" class="file-upload-input" name="uploaded_file" id="file-upload" accept=".pdf, .doc, .docx, .jpg, .jpeg, .png" onchange="previewFile('file-upload', 'file-upload-img')">
                                                        <img src="{{asset('assets/frontend/images/icon-upload.svg')}}"
                                                            class="img-fluid file-upload-img" alt="" id="file-upload-img">
                                                        <label for="">Drag and drop files to upload</label>
                                                        <button class="btn btn-main" onclick="$('#file-upload').click()">Choose a File</button>
                                                        <p style="color:red;">Note : Type of file & Maximum size: (doc, xls, jpg.png, pdf, docx) & 2MB</p>
                                                    </div> -->
                                                    <div class="file-upload-box">
                                                        <p style="color:red;">Note: Allowed file types: .doc, .xls, .jpg, .png, .pdf, .docx. Maximum size: 2MB per file.</p>
                                                        <input type="file" name="uploaded_file[]" class="form-control-file">
                                                        <button type="button" class="btn btn-success add-file-btn">+</button>
                                                    </div>
                                                    <div id="file-list"></div>
                                                </form>
                                            </div>
                                        </div>
                                        <format-sources id="format_sources">
                                            <div class="form-group">
                                                <label for="">Paper Format</label>
                                                    <select name="paper_format" id="paper_format" class="form-control select-with-search">
                                                        @foreach($paperFormats as $index => $format)
                                                            <option value="{{$format->id}}">{{$format->name}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="form-group">
                                                 <input type="text" id="other_textbox" name="other_paper_format" style="display: none;" placeholder="Enter Paper Format" class="form-control">
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-6">
                                                <div class="form-group">
                                                    <label for="">Number of sources</label>
                                                    <div class="plus-minus-counter">
                                                        <div class="number form-control p-0">
                                                            <span class="minus-s"><i class="fa fa-minus"></i></span>
                                                            <input type="text" id="sourceCount" name="sourceCount" value="0" />
                                                            <span class="plus-s"><i class="fa fa-plus"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </format-sources>
                                        <div class="form-title-center">
                                            <label for=""><strong>Advanced Customisation</strong></label>
                                        </div>

                                        <div class="form-group" id="paperLabel3">
                                            <label for="">Paper Level</label>
                                            <div class="custom-made-form">
                                                <div class="row">
                                                    @foreach($paperLevels as $index => $level)
                                                    <div class="col-lg-4 pe-lg-2 text-center radio-inline">
                                                        <div>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="optradio31" id="paperdalevel" value="{{ $level->id }}" data-value="{{ $level->type }}">
                                                                <span>
                                                                    <strong>{{ $level->type }}</strong>
                                                                    <div class="rb-spacer"></div>
                                                                    {{ $level->slug }}
                                                                </span></label>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        <checkbox-section id="first_options">
                                            <div class="form-group" id="paperLabel8">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" name="first_sub1" id="flexCheckDefault1">
                                                    <label class="form-check-label" for="flexCheckDefault1">
                                                        <strong id="paperLabel4">Printable Sources</strong>
                                                        <br>
                                                        <span id="paperLabel5">PDF copies of the articles, extracts from books, and other cited
                                                        materials</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group" id="paperLabel9">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" name="first_sub2" id="flexCheckDefault2">
                                                    <label class="form-check-label" for="flexCheckDefault2">
                                                        <strong id="paperLabel6" >Progressive Delivery</strong>
                                                        <br>
                                                        <span id="paperLabel7"> Part-by-part delivery of largeorders with a deadline of 5 days or
                                                            longer, and with a value of $200 or more </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </checkbox-section>
                                        <checkbox-section id="second_options">
                                            <div class="form-group" id="paperLabel8">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" name="first_sub3" id="flexCheckDefault1">
                                                    <label class="form-check-label" for="flexCheckDefault1">
                                                        <strong id="paperLabel4">Top programming levels</strong>
                                                        <br>
                                                        <span id="paperLabel5">We assign top expert for your task</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group" id="paperLabel9">
                                                <div class="form-check" style="display:none;">
                                                    <input class="form-check-input" type="checkbox" value="" name="first_sub4" id="flexCheckDefault2">
                                                    <label class="form-check-label" for="flexCheckDefault2">
                                                        <strong id="paperLabel6" >Well commented code</strong>
                                                        <br>
                                                        <span id="paperLabel7"> You get all methods and functions in your code commented </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </checkbox-section>
                                    </div>
                                    <div class="button-container">
                                        <button class="button" onclick="backbutton(3,2)" style="padding : 3px;">
                                            <i class="fa fa-arrow-left"></i> 
                                        </button>
                                        <button class="button" onclick="nextbutton(3,4)" style="padding : 3px;">
                                             <i class="fa fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="steps-box" id="step-4">
                                <div class="steps-box-inner">
                                    <div class="section-title">
                                        <h2>Place a New Order</h2>
                                    </div>
                                    <div class="steps-box-label">
                                        <p><img src="{{asset('assets/frontend/images/flag-summary.svg')}}" class="img-fluid me-lg-2"
                                                alt=""> Summary</p>
                                        <div class="button-container">
                                            <button class="button" onclick="backbutton(4,3)">
                                                <i class="fa fa-arrow-left"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="steps-box-label">
                                        <select name="selected_currency" id="currency" class="form-control select-with-search" onclick="showAlert()"></select>
                                    </div>
                                    <div class="steps-box-form-inner">
                                        <div class="summary-table">
                                            <div class="table-responsive">
                                                <table class="table table-borderless" id="load_table_data">
                                                    <tbody>
                                                        <tr>
                                                            <td colspan="2">&nbsp;</td>
                                                        </tr>
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <th>Total Price</th>
                                                            <th class="text-end">$38.00</th>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="container payment-choice-box" style="display: none;">
                                            <h3>* For Stripe Payment Add Credit Card</h3>
                                                <div class="row align-items-center">
                                                    <div class="col-md-5 col-lg-5 mb-3">
                                                        <label for="cardHolderName">Card Holder Name</label>
                                                        <input class="form-control" type="text" id="cardHolderName" name="cardHolderName" required>
                                                    </div>
                                                    <div class="col-md-1">
                                                        <input type="hidden" name="stripe_token" id="stripe_token">
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Card Number</label>
                                                            <div id="card-number-element"></div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Expiry Date</label>
                                                            <div id="card-expiry-element"></div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>CVV Number</label>
                                                            <div id="card-cvv-element"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                    <div class="steps-box-bottom-btn-outer">
                                        <!-- <button type="button" class="btn btn-main w-100 mt-4" style="background-color: #9965FF !important;" id="payForOrderBtn"> <img
                                                src="{{asset('assets/frontend/images/icon-payment-card.svg')}}" class="img-fluid"
                                                alt="" style="width: 22px;"> Stripe Checkout</button> -->
{{--                                        <form action="{{route('paypal.payment')}}" method="post">--}}
{{--                                            @csrf--}}
                                            <input type="hidden" name="price" value="5">
                                            <input type="hidden" name="collective_data" value="">
                                            <input type="hidden" name="file_information[]" value="">
                                        @if(auth()->check())
                                            <button type="submit" class="btn btn-main w-100 mt-4" style="background-color: #FFBD5D !important;" id="payForPaypalBtn{{auth()->user()->id}}"> <img
                                                    src="{{asset('assets/frontend/images/icon-payment-card.svg')}}" class="img-fluid"
                                                    alt="" style="width: 22px;"> PayPal Checkout</button>
                                        @else
                                            <a href="{{route('frontend.customer.authorise.modal')}}" id="authorise" class="btn btn-main w-100 edit-button">
                                                <img src="{{asset('assets/frontend/images/icon-user-white.svg')}}" class="img-fluid" alt=""> Authorise
                                            </a>
                                            <button type="submit" class="btn btn-main w-100 mt-4" style="background-color: #FFBD5D !important;" disabled> <img
                                                    src="{{asset('assets/frontend/images/icon-payment-card.svg')}}" class="img-fluid"
                                                    alt="" style="width: 22px;"> PayPal Checkout</button>
                                        @endif
{{--                                        </form>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4" >
                <div class="order-page-right">
                    <div class="opr-inner order-info" style="display: none;">
                        <div class="accordion" id="accordionExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    Order Detail
                                </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <div class="or-default-text text-center">
                                            <p>As you fill out the form, your order details will appear here.</p>
                                        </div>
                                        <div class="oibox-outer order-info-append"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="opr-inner order-customization" style="display: none;">
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                            Order Customization
                                        </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="or-default-text text-center">
                                                <p>As you fill out the form, your order details will appear here.</p>
                                            </div>
                                            <div class="oibox-outer order-customization-append"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div id="editModal" class="modal" role="dialog" aria-labelledby="myModalLabel" aria-modal="true"></div>
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"  data-backdrop="static" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <img src="{{getLogo()}}" class="logo-img" alt="Logo">
                    <button type="button" class="btn-close btn-close-gk-ss" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4 text-center">
                    <h5>Check Your Inbox</h5>
                    <p>Verification Link has been sent to your email address. <br> Click the link to activate your account.</p>
                </div>
                <div class="text-center">
                    <p>Want to register with another account? <br><a href="{{route('register')}}">Go back to registration</a></p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>
.select2-container {
    width: 100% !important;
}
</style>

@endpush
@push('scripts')
    <script>
        var filled_data = @json($orderData);
    </script>
    <script src="http://127.0.0.1:8000/assets/frontend/js/jquery-ui.min.js"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{{asset('assets/frontend/js/place-order.js')}}"></script>
    <script>
        $(document).ready(function() {
            // $('#payForPaypalBtn').click(function() {
            //     toggleLoader();
            //     finalcallforstoredata_new();
            // });
            $(document).on('click', '#confirmButton', function() {
                var selectedDeadline = $("#deadline option:selected").text();
                $("#custom-value").val(selectedDeadline+' Delivery');
                $('#exampleModal').modal('hide');
            });

            $(document).on('click', '#payForPaypalBtn', function() {
                toggleLoader();
                finalcallforstoredata_new();
            });
            @if(auth()->check())
                var qid = "{{auth()->user()->id}}";
                $(document).on('click', '#payForPaypalBtn' + qid, function() {
                    toggleLoader();
                    finalcallforstoredata_new();
                });
            @endif
            loadAjaxSelect2();
            function getStripeKey() {
                return "{{ getSetting("stripe_key") }}";
            }
            /* var stripe = Stripe(getStripeKey());
            var elements = stripe.elements();
            var elementStyles = {
                base: {
                    fontFamily: 'sans-serif',
                    fontSize: '14px',
                    '::placeholder': {
                        color: '#aaa',
                    },
                    ':-webkit-autofill': {
                        color: '#e39f48',
                    },
                },
                invalid: {
                    color: 'red'
                },
            };
            var cardNumberElement = elements.create('cardNumber', {
                showIcon: true,
                style: elementStyles
            });
            var cardExpiryElement = elements.create('cardExpiry', {
                style: elementStyles
            });
            var cardCvcElement = elements.create('cardCvc', {
                style: elementStyles
            });

            cardNumberElement.mount('#card-number-element');
            cardExpiryElement.mount('#card-expiry-element');
            cardCvcElement.mount('#card-cvv-element'); */
            $('#payForOrderBtn').click(function() {
                toggleLoader();
                stripe.createToken(cardNumberElement).then(function(result) {
                    if (result.error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: result.error.message,
                        });
                        toggleLoader();
                    } else {
                        $('#stripe_token').val(result.token.id);
                        finalcallforstoredata();
                    }
                });
            });
        });
        function previewFile(inputId, imgId) {
            var baseUrl = window.location.protocol + "//" + window.location.host;
            var input = document.getElementById(inputId);
            var img = document.getElementById(imgId);

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    if (input.files[0].type.startsWith('image')) {
                        img.src = e.target.result;
                    } else {
                        img.src = "{{asset('assets/frontend/images/default-file.svg')}}";
                    }
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
    <script>
        $(document).ready(function () {
            var maxFiles = 5;
            var fileSection = $('.file-upload-box');

            $('.add-file-btn').on('click', function () {
                if (fileSection.find('input').length < maxFiles) {
                    var newFileInput = $('<div class="file-input-wrapper mt-2"><input type="file" name="uploaded_file[]" class="form-control-file"><button type="button" class="btn btn-danger delete-file-btn">X</button></div>');
                    fileSection.append(newFileInput);
                } else {
                    alert('Maximum file uploads reached');
                }
            });

            // Handle delete file button click
            fileSection.on('click', '.delete-file-btn', function () {
                $(this).parent().remove();
            });
        });

    </script>
    <script>
        document.getElementById('paper_format').addEventListener('change', function() {
        var otherTextbox = document.getElementById('other_textbox');
        if (this.value == 5) {
            otherTextbox.style.display = 'block';
        } else {
            otherTextbox.style.display = 'none';
        }
    });
    </script>
@endpush