@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 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="form-label 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'}}" disabled>
                            </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" 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="form-label 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="form-label 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'}}" disabled>
                            </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" id="conferencecontactno" name="conferencecontactno"   value="{{ $userDetails->mobile_number  ?? 'N/A'}}" disabled >
                            </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"
                                    id="conferencetitle" name="conferencetitle">
                            </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"
                                    id="conferenceurl" name="conferenceurl">
                            </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"
                                    id="conferencelocation" name="conferencelocation">
                            </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"
                                    name="conferencedate" id="conferencedate">
                            </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"
                                    id="conference_phone_no" name="conference_phone_no">
                            </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"
                                    id="acc_no" name="acc_no">
                            </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"
                                    id="po" name="po">
                            </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"
                                    id="attend_reason" name="attend_reason">
                            </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" 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="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" id="registratiion_no"
                                        name="registratiion_no">

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

                                <div class="colored-estimation mb-5">
                                    <div class="row" id="lodging" name="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" id="lodgingsName[]"
                                                name="lodgingsName[]">
                                        </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" id="lodgingsStartDate[]"
                                                name="lodgingsStartDate[]">
                                        </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" 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="form-label 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">
                                            <label class="form-label mb-3">Meals</label>
                                            <input type="text" class="form-control" name="mealNames[]">
                                        </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" 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="form-label 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">
                                            <label class="form-label mb-3">Parking</label>
                                            <input type="text" class="form-control" name="parkingNames[]">
                                        </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" 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="form-label 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">
                                            <label class="form-label mb-3">Tolls</label>
                                            <input type="text" class="form-control" name="tollNames[]">
                                        </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" 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="form-label 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">
                                            <label class="form-label mb-3">Milleage</label>
                                            <input type="text" class="form-control" name="milleageNames[]">
                                        </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" 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="form-label 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">
                                            <label class="form-label mb-3">Miscellaneous</label>
                                            <input type="text" class="form-control" name="miscellaneousName[]">
                                        </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" 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="form-label 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