@extends('staff.layouts.app')
@push('style')
    <style>
        .input-icon {
            position: relative;
        }

        .input-icon>i {
            position: absolute;
            display: block;
            transform: translate(0, -50%);
            top: 50%;
            pointer-events: none;
            width: 25px;
            text-align: center;
            font-style: normal;
        }

        .input-icon>input {
            padding-left: 25px;
            padding-right: 0;
        }

        .input-icon-right>i {
            right: 0;
        }

        .input-icon-right>input {
            padding-left: 0;
            padding-right: 25px;
            text-align: right;
        }
    </style>
@endpush
@section('content')
    <section class="section dashboard">
        <div class="row ">
            <div class="line-hdr">
                <h4 class="prsnl-prfl-heading">Conference Submision</h4>
                <h5>Conference Details</h5>
            </div>
            <div class="prsnl-prfl-updt">
                <div class="log-in-right ">
                    <form method="post" action="{{ route('staff.conference.save') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            {{-- <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class=" mb-3">Name</label>
                                <input type="text" class="form-control" aria-describedby="emailHelp"
                                    placeholder="Staff head" id="ename" name="ename" value="{{ $userDetails->first_name ?? 'N/A'}}">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class=" mb-3">Position</label>
                                <input type="text" class="form-control" aria-describedby="emailHelp"
                                    placeholder="Staff head" id="conferenceposition" name="conferenceposition">
                                    @error('conferenceposition')
                                        <span class="text-sm mt-1 text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class=" mb-3">Program / School Type</label>


                                <select class="form-select" aria-label="Disabled select example" id="school_id"
                                    name="school_id" @if ($schoolId) disabled @endif >
                                    @foreach ($schools as $school)
                                        <option value="{{ $school->id }}" @if ($schoolId == $school->id) selected @endif >{{ $school->school_name }}</option>
                                    @endforeach
                                    <input type="hidden" value={{ $schoolId }} id="schoolId" name="schoolId">
                                </select>
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label for="exampleInputEmail1" class=" mb-3">Email </label>
                                <input type="email" class="form-control" id="exampleInputEmail1"
                                    aria-describedby="emailHelp" placeholder="Enter Email" name="conferenceemail"
                                    id="conferenceemail"    value="{{ $userDetails->email  ?? 'N/A'}}" >
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class=" mb-3">Contact Number</label>
                                <input type="text" class="form-control" aria-describedby="emailHelp"
                                    placeholder="Enter Phone No" id="conferencecontactno" name="conferencecontactno"   value="{{ $userDetails->mobile_number  ?? 'N/A'}}"  >
                            </div> --}}
                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-3">Conference Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="conferencetitle" name="conferencetitle">

                                @error('conferencetitle')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-3">Conference URL <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="conferenceurl" name="conferenceurl">

                                @error('conferenceurl')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-2">Upload Brochure</label>
                                <div class="custom-file">
                                    <input type="file" class="form-control" id="brocure" name="brocure">
                                    <div class="position-file">
                                        <p class="first-class">Choose file</p>
                                        <p class="second-class">Upload</p>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class=" mb-3">Location</label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="conferencelocation" name="conferencelocation">
                            </div> --}}
                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-3">Phone Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="conference_phone_no" name="conference_phone_no">

                                @error('conference_phone_no')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-3">Account Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="acc_no" name="acc_no">

                                @error('acc_no')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-3">PO# <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="po" name="po">

                                @error('po')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-3">Conference Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control custom" aria-label="Disabled input example"
                                    name="conferencedate" id="conferencedate">

                                @error('conferencedate')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div class="col-lg-3 col-md-3 col-12 mb-4">
                                <label class=" mb-3">Is a substitute necessary?</label>


                                <div class="custom-check">
                                    <div class="form-check">

                                        {{-- <input class="form-input" type="radio" value="0"
                                        id="substitute" name="substitute"  >No
                                        <input class="form-input" type="radio" value="1"
                                        id="substitute" name="substitute">Yes --}}
                                        <input class="form-input" type="radio" value="0" id="flexCheckDefault"
                                            name="flexCheckDefault" checked>No
                                        <input class="form-input" type="radio" value="1" id="flexCheckDefault"
                                            name="flexCheckDefault">Yes
                                    </div>
                                    {{-- <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            Yes
                                        </label>
                                    </div> --}}


                                    {{-- <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value=""
                                            id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            No
                                        </label>
                                    </div> --}}
                                </div>
                            </div>
                            {{-- <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class=" mb-3">Why should they attend?</label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="attend_reason" name="attend_reason">
                            </div> --}}

                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <label class=" mb-3">Conference Location / Remote <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control address" aria-label="Disabled input example"
                                    id="conferencelocation" name="conferencelocation">

                                @error('conferencelocation')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <label class=" mb-3">Zip Code <span class="text-danger">*</span></label>
                                <input type="text" class="form-control zip_code" aria-label="Disabled input example"
                                    id="zip_code" name="zip_code">

                                @error('zip_code')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <label class=" mb-3">City <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    id="city_name" name="city_name">

                                @error('city_name')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>

                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <label class=" mb-3">State <span class="text-danger">*</span></label>
                                <select id="state_name" class="form-control" name="state_name">
                                    <option value="">
                                        Select State
                                    </option>
                                    @forelse ($states as $state)
                                        <option value="{{ $state->name }}" data-id="{{ $state->id }}">
                                            {{ $state->name }}
                                        </option>
                                    @empty
                                    @endforelse
                                </select>
                                @error('state_name')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>




                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class=" mb-3">Why should they attend?</label>
                                <textarea id="attend_reason" name="attend_reason" rows="10" cols="100"></textarea>
                                {{-- @error('attend_reason')
                                    <span class="text-sm mt-1 text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror --}}
                            </div>

                            <div class="estimated-expenditure">
                                <h5>Estimated Expenditures</h5>
                                <div class="col-lg-8 col-md-8 col-12 mb-5 ">

                                    <div class="form-group">

                                        <label class=" mb-3">Registration Cost</label>
                                        <div class="input-icon">
                                            <input type="number" class="form-control" id="registratiion_cost"
                                                name="registratiion_cost" placeholder="0.00"
                                                style="
                                                padding-left: 20px;">
                                            <i>$</i>
                                        </div>
                                        @error('registratiion_cost')
                                            <span class="text-sm mt-1 text-danger">
                                                {{ $message }}
                                            </span>
                                        @enderror

                                    </div>

                                </div>

                                <div class="colored-estimation mb-5">
                                    <div class="row" id="lodging" name="lodging"
                                        style="margin-top: 30px!important;">

                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <div class="form-group">
                                                <label class=" mb-3">Lodging Cost </label>
                                                <div class="input-icon">

                                                    <input type="number" class="form-control" id="lodgingsName[]"
                                                        name="lodgingsName[]"style="
                                                                                                    padding-left: 20px;"
                                                        placeholder="0.00">
                                                    <i>$</i>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class=" mb-3">From Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example" id="lodgingsStartDate[]"
                                                name="lodgingsStartDate[]">
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class=" mb-3">To Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example" id="lodgingEndDate[]"
                                                name="lodgingEndDate[]">
                                        </div>
                                        <div class="row align-items-center">
                                            <div class="col-lg-4 col-md-4 col-12">
                                                <div class="col-lg-12 col-md-4 col-12">
                                                    <label class=" mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control" id="document"
                                                            name="documents[]">
                                                        <div class="position-file">
                                                            <p class="first-class">Choose file</p>
                                                            <p class="second-class">Upload</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-lg-8 col-md-8 col-12 mt-4 ">
                                                <div class="custom-file-button">
                                                    <button type="button" id="lodgingAddBtn">+</button>
                                                </div>
                                            </div>

                                        </div>


                                    </div>
                                </div>
                                {{-- <button type="button" onclick="alert('Hello world!')">Click Me!</button> --}}
                                <div class="colored-estimation mb-5">
                                    <div class="row" id="meal">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <div class="form-group">
                                                <label class=" mb-3">Meals Cost </label>
                                                <div class="input-icon">
                                                    <input type="number" class="form-control" name="mealNames[]"
                                                        placeholder="0.00"
                                                        style="
                                                    padding-left: 20px;">
                                                    <i>$</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class=" mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example" name="mealStartDates[]">
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-12">
                                            <div class="row align-items-center">
                                                <div class="col-lg-10 col-md-8 col-12">
                                                    <label class=" mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control"
                                                            name="mealDocuments[]">
                                                        <div class="position-file">
                                                            <p class="first-class">Choose file</p>
                                                            <p class="second-class">Upload</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-4 col-12 mt-4 ">
                                                    <div class="custom-file-button">
                                                        <button type="button" id="mealAddBtn2">+</button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="colored-estimation mb-5">
                                    <div class="row" id="parking">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <div class="form-group">
                                                <label class=" mb-3">Parking Cost</label>
                                                <div class="input-icon">
                                                    <input type="number" class="form-control" name="parkingNames[]"
                                                        placeholder="0.00"
                                                        style="
                                                    padding-left: 20px;">
                                                     <i>$</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class=" mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example" name="parkingStartDates[]">
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-12">
                                            <div class="row align-items-center">
                                                <div class="col-lg-10 col-md-8 col-12">
                                                    <label class=" mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control"
                                                            name="parkingDocuments[]">
                                                        <div class="position-file">
                                                            <p class="first-class">Choose file</p>
                                                            <p class="second-class">Upload</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-4 col-12 mt-4 ">
                                                    <div class="custom-file-button">
                                                        <button type="button" id="parkingAddBtn">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="colored-estimation mb-5">
                                    <div class="row" id="toll">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <div class="form-group">
                                                <label class=" mb-3">Tolls Cost</label>
                                                <div class="input-icon">
                                                    <input type="text" class="form-control" name="tollNames[]"
                                                        placeholder="0.00"
                                                        style="
                                                    padding-left: 20px;">
                                                     <i>$</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class=" mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example" name="tollStartDates[]">
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-12">
                                            <div class="row align-items-center">
                                                <div class="col-lg-10 col-md-8 col-12">
                                                    <label class=" mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control"
                                                            name="tollDocuments[]">
                                                        <div class="position-file">
                                                            <p class="first-class">Choose file</p>
                                                            <p class="second-class">Upload</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-4 col-12 mt-4 ">
                                                    <div class="custom-file-button">
                                                        <button type="button" id="tollAddBtn">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="colored-estimation mb-5">
                                    <div class="row" id="milleage">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <div class="form-group">
                                                <label class=" mb-3">Milleage Cost</label>
                                                <div class="input-icon">
                                                    <input type="number" class="form-control" name="milleageNames[]"
                                                        placeholder="0.00"
                                                        style="
                                                    padding-left: 20px;">
                                                     <i>$</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class=" mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example" name="milleageStartDates[]">
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-12">
                                            <div class="row align-items-center">
                                                <div class="col-lg-10 col-md-8 col-12">
                                                    <label class=" mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control"
                                                            name="milleageUploads[]">
                                                        <div class="position-file">
                                                            <p class="first-class">Choose file</p>
                                                            <p class="second-class">Upload</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-4 col-12 mt-4 ">
                                                    <div class="custom-file-button">
                                                        <button type="button" id="milleageAddBtn">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="colored-estimation ">
                                    <div class="row" id="miscellaneous">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <div class="form-group">
                                                <label class=" mb-3">Miscellaneous Cost</label>
                                                <div class="input-icon">
                                                    <input type="number" class="form-control"
                                                        name="miscellaneousName[]" placeholder="0.00"
                                                        style="
                                                        padding-left: 20px;">
                                                         <i>$</i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class=" mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example" name="miscellaneousStartDates[]">
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-12">
                                            <div class="row align-items-center">
                                                <div class="col-lg-10 col-md-8 col-12">
                                                    <label class=" mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control"
                                                            name="miscellaneousDocuments[]">
                                                        <div class="position-file">
                                                            <p class="first-class">Choose file</p>
                                                            <p class="second-class">Upload</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-4 col-12 mt-4 ">
                                                    <div class="custom-file-button">
                                                        <button type="button" id="miscellaneousAddBtn">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-12 mt-5">
                                    <button type="submit" class="btn btn-primary ">SUBMIT</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script src="{{ asset('assets/admin/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-tagsinput.js') }}"></script>
    <script></script>
    <script>
        let lodgingCloneCounter = 0;
        $(document).on('click', '#lodgingAddBtn', function() {
            console.log("lodgingCloneCounter");
            if (lodgingCloneCounter < 2) {
                var clone = $('#lodging').clone();
                clone.find('.lodgingAddBtn').remove();
                clone.find('input[type="text"], input[type="date"], input[type="file"]').val('');
                clone.append(
                    '<div class="custom-file-button"><button class="remove-btn" id="lodgingRemoveBtn" type="button">-</button></div>'
                );
                $('#lodging').after(clone);
                lodgingCloneCounter++;
            }
        });
        $(document).on('click', '#lodgingRemoveBtn', function() {
            $(this).closest('.row').remove();
            lodgingCloneCounter--;
        });

        let mealCloneCounter = 0;
        $(document).on('click', '#mealAddBtn2', function() {
            if (mealCloneCounter < 2) {
                var clone = $('#meal').clone();
                clone.find('.mealAddBtn').remove();
                clone.find('input[type="text"], input[type="date"], input[type="file"]').val('');
                clone.append(
                    ' <div class="custom-file-button"><button class="remove-btn" id="mealRemoveBtn" type="button">-</button> </div>'
                );
                $('#meal').after(clone);
                mealCloneCounter++;
            }
        });
        $(document).on('click', '#mealRemoveBtn', function() {
            $(this).closest('.row').remove();
            mealCloneCounter--;
        });

        let parkingCloneCounter = 0;
        $(document).on('click', '#parkingAddBtn', function() {
            console.log(parkingCloneCounter);
            if (parkingCloneCounter < 2) {
                var clone = $('#parking').clone();
                clone.find('.parkingAddBtn').remove();
                clone.find('input[type="text"], input[type="date"], input[type="file"]').val('');
                clone.append(
                    '<div class="custom-file-button"><button class="remove-btn" id="parkingRemoveBtn" type="button">-</button></div>'
                );
                $('#parking').after(clone);
                parkingCloneCounter++;
            }
            // else {
            //     alert('Maximum 5 elements allowed.');
            // }
        });
        $(document).on('click', '#parkingRemoveBtn', function() {
            $(this).closest('.row').remove();
            parkingCloneCounter--;
        });

        let tollCloneCounter = 0;
        $(document).on('click', '#tollAddBtn', function() {
            console.log("tollCloneCounter");
            if (tollCloneCounter < 2) {
                var clone = $('#toll').clone();
                clone.find('.tollAddBtn').remove();
                clone.find('input[type="text"], input[type="date"], input[type="file"]').val('');
                clone.append(
                    '<div class="custom-file-button"><button class="remove-btn" id="tollRemoveBtn" type="button">-</button></div>'
                );
                $('#toll').after(clone);
                tollCloneCounter++;
            }
        });
        $(document).on('click', '#tollRemoveBtn', function() {
            $(this).closest('.row').remove();
            tollCloneCounter--;
        });
        let milleageCloneCounter = 0;
        $(document).on('click', '#milleageAddBtn', function() {
            console.log("milleageCloneCounter");
            if (milleageCloneCounter < 2) {
                var clone = $('#milleage').clone();
                clone.find('.milleageAddBtn').remove();
                clone.find('input[type="text"], input[type="date"], input[type="file"]').val('');
                clone.append(
                    '<div class="custom-file-button"><button class="remove-btn" id="milleageRemoveBtn" type="button">-</button></div>'
                );
                $('#milleage').after(clone);
                milleageCloneCounter++;
            }
        });
        $(document).on('click', '#milleageRemoveBtn', function() {
            $(this).closest('.row').remove();
            milleageCloneCounter--;
        });


        let miscellaneousCloneCounter = 0;
        $(document).on('click', '#miscellaneousAddBtn', function() {
            console.log("miscellaneousCloneCounter");
            if (miscellaneousCloneCounter < 2) {
                var clone = $('#miscellaneous').clone();
                clone.find('.tollAddBtn').remove();
                clone.find('input[type="text"], input[type="date"], input[type="file"]').val('');
                clone.append(
                    '<div class="custom-file-button"><button class="remove-btn" id="miscellaneousRemoveBtn" type="button">-</button></div>'
                );
                $('#miscellaneous').after(clone);
                miscellaneousCloneCounter++;
            }
        });
        $(document).on('click', '#miscellaneousRemoveBtn', function() {
            $(this).closest('.row').remove();
            miscellaneousCloneCounter--;
        });
    </script>
    <script></script>
    {{-- <script>
        var meta_keyword_values = "";
        $('#meta_keyword').tagsinput({
            confirmKeys: [13, 32, 44]
        });
        $('#meta_keyword').tagsinput('add', meta_keyword_values);
    </script> --}}
@endpush