{{-- @extends('staff.layouts.app')
@push('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>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Name</label>
                                <input type="text" class="form-control" aria-label="Disabled input example"
                                    placeholder="Enter Name">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Position</label>
                                <input type="text" class="form-control" aria-describedby="emailHelp"
                                    placeholder="Staff head">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Program / School Type</label>


                                <select class="form-select" aria-label="Disabled select example">
                                    @forelse($schools as $school)
                                        <option value="{{ $school->id }}">{{ $school->school_name }}</option>
                                    @empty
                                        <option value="">No schools available</option>
                                    @endforelse
                                </select>
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label for="exampleInputEmail1" class="form-label mb-3">Email </label>
                                <input type="email" class="form-control" id="exampleInputEmail1"
                                    aria-describedby="emailHelp" placeholder="Enter Email">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Contact Number</label>
                                <input type="text" class="form-control" aria-describedby="emailHelp"
                                    placeholder="Enter Phone No">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Conference Title</label>
                                <input type="text" class="form-control" aria-label="Disabled input example">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Conference URL</label>
                                <input type="text" class="form-control" aria-label="Disabled input example">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Location</label>
                                <input type="text" class="form-control" aria-label="Disabled input example">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Select Date</label>
                                <input type="date" class="form-control custom" aria-label="Disabled input example">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Phone Number</label>
                                <input type="text" class="form-control" aria-label="Disabled input example">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Account Number</label>
                                <input type="text" class="form-control" aria-label="Disabled input example">
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">PO#</label>
                                <input type="text" class="form-control" aria-label="Disabled input example">
                            </div>

                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Is a substitute necessary?</label>
                                <div class="custom-check">
                                    <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="form-label mb-3">Why should they attend?</label>
                                <input type="text" class="form-control" aria-label="Disabled input example">
                            </div>

                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <label class="form-label mb-3">Upload Brochure</label>
                                <div class="custom-file">
                                    <input type="file" class="form-control">
                                    <div class="position-file">
                                        <p class="first-class">Choose file</p>
                                        <p class="second-class">Upload</p>
                                    </div>
                                </div>
                            </div>

                            <div class="estimated-expenditure">
                                <h5>Estimated Expenditures</h5>
                                <div class="col-lg-8 col-md-8 col-12 mb-5 ">
                                    <label class="form-label mb-3">Registration</label>
                                    <input type="text" class="form-control">
                                </div>

                                <div class="colored-estimation mb-5">
                                    <div class="row" id="lodging">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">Lodging</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">From Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">To Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </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="form-label mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control">
                                                        <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">
                                            <label class="form-label mb-3">Meals</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class="form-label mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </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="form-label mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control">
                                                        <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">
                                            <label class="form-label mb-3">Parking</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class="form-label mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </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="form-label mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control">
                                                        <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">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">Tolls</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class="form-label mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </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="form-label mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control">
                                                        <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>+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="colored-estimation mb-5">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">Milleage</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class="form-label mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </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="form-label mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control">
                                                        <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>+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="colored-estimation ">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">Miscellaneous</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-12 mb-4">
                                            <label class="form-label mb-3">Select Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </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="form-label mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control">
                                                        <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>+</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>
        $(document).on('click', '#lodgingAddBtn', function() {
            console.log("asdfghjkl");
            var container = document.getElementById('lodging');
            var inputGroup = document.createElement('div');
            inputGroup.classList.add('input-group');
            inputGroup.innerHTML = `  <div class="row" id="lodging" >
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">Lodging</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">From Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                            <label class="form-label mb-3">To Date</label>
                                            <input type="date" class="form-control custom"
                                                aria-label="Disabled input example">
                                        </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="form-label mb-3">Upload Document</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="form-control">
                                                        <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="lodgingRemoveBtn">-</button>
                                                </div>

                                                <div class="custom-file-button">
                                                    <button type="button" id="lodgingAddBtn">+</button>
                                                </div>

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

             `;
            container.appendChild(inputGroup);
        });

        $(document).on('click', '#lodgingRemoveBtn', function() {
            var container = document.getElementById('lodging');
            var children = container.children;
            if (children.length > 0) {
                container.removeChild(children[children.length - 1]);
            }
        })
    </script>


    <script>
        $(document).on('click', '#mealAddBtn2', function() {
            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);
        });
        $(document).on('click', '#mealRemoveBtn', function() {
            $(this).closest('.row').remove();
        });
        // $(document).on('click', '#lodgingRemoveBtn', function() {
        //     var container = document.getElementById('lodging');
        //     var children = container.children;
        //     if (children.length > 0) {
        //         container.removeChild(children[children.length - 1]);
        //     }
        // })


        $(document).on('click', '#parkingAddBtn', function() {
            console.log("sadfghjk");
            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="mealRemoveBtn" type="button">-</button> </div>'
            );
            $('#parking').after(clone);
        });

    </script>

    <script>

        $(document).on('click', '#mealRemoveBtn', function() {
            $(this).closest('.row').remove();
        });
    </scripts>



    {{-- <script>
        var meta_keyword_values = "";
        $('#meta_keyword').tagsinput({
            confirmKeys: [13, 32, 44]
        });
        $('#meta_keyword').tagsinput('add', meta_keyword_values);
    </script> --}}
@endpush --}}