@extends('principal.layouts.app')
@push('style')
@endpush
@section('content')
    <section class="section dashboard">
        <div class="inner-sec-dashboard">
            <div class="row ">
                <div class="line-hdr">
                    <h4>Request</h4>
                </div>

            </div>
            <div class="pagetitle-row">
                <div class="row">
                    <div class="col-lg-10 ">
                        <form form action="" method="GET">
                            <div class="row">
                                <div class="col-lg-3 col-sm-4 col-12">
                                    <input type="date" class="form-control" id="startDate" name="startDate"
                                        value="{{ !empty($_REQUEST['startDate']) ? $_REQUEST['startDate'] : '' }}">
                                </div>

                                <div class="col-lg-3 col-sm-4 col-12">
                                    <input type="date" class="form-control" id="endDate" name="endDate"
                                        value="{{ !empty($_REQUEST['endDate']) ? $_REQUEST['endDate'] : '' }}">
                                </div>

                                <div class="col-lg-3 col-sm-4 col-12">
                                    <select class="form-select" aria-label="Default select example" id="status"
                                        name="status">
                                        <option selected="">Status</option>
                                        <option value="1">Approved</option>
                                        <option value="2">Rejected</option>
                                        <option value="3">Pending</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 col-sm-4 col-12">
                                    <button type="submit"><i class="fa-solid fa-magnifying-glass"></i> Search</button>
                                </div>
                                
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-2"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-12">
                    <div class="performance-statistics row">

                        <table class="table table-borderless">
                            <thead>
                                <tr>
                                    <th scope="col">Request ID</th>
                                    <th scope="col">Seminer Name</th>
                                    <th scope="col">Start Date</th>
                                    <th scope="col">End Date</th>
                                    <th scope="col">Total Cost</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">View Details</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>

                                @forelse ($conferenceLists as $conferenceList)
                                    <tr>
                                        <td>{{ $conferenceList->id }}</td>
                                        <td>{{ $conferenceList->conference_title }}</td>
                                        <td>{{ $conferenceList->conference_date }}</td>
                                        <td>{{ '2020-09-02' }}</td>
                                        <td>${{ ' 30.00' }}</td>

                                        <td>
                                            @if ($conferenceList->is_approved == 1)
                                                {{ 'Approved' }}
                                            @elseif($conferenceList->is_approved == 2)
                                                {{ 'rejected' }}
                                            @else
                                                {{ 'Pending' }}
                                            @endif
                                        </td>

                                        <td>
                                            {{-- <a class="icon show"
                                                href="{{ route('principal.conference.detail', ['registration_id' => $conferenceList->registratiion_no]) }}"
                                                aria-expanded="true">
                                                <i class="fa-solid fa-eye"></i>
                                            </a> --}}

                                            <input type=text id="registratiion_no" name="registratiion_no"
                                                value={{ $conferenceList->registratiion_no }}>
                                            <a class="icon show"
                                                onclick="fireAjax('{{ $conferenceList->registratiion_no }}')">
                                                <i class="fa-solid fa-eye"></i>
                                            </a>

                                            {{-- <a class="icon show editButton"    aria-expanded="true"  data-uuid="{{ $conferenceList->id }}" data-value='{{ json_encode($conferenceList) }}' data-bs-toggle="modal" data-bs-target="#conferenceDetailModal"  >
                                                <i class="fa-solid fa-eye"></i>
                                                </a> --}}
                                        </td>

                                        {{-- <div class="modal fade " id="conferenceDetailModal" data-bs-backdrop="static"
                                            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                                            aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="staticBackdropLabel">Request Details of
                                                            #5356</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <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" disabled
                                                                                placeholder="Sudeshna Sengupta">
                                                                        </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="position">
                                                                        </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"
                                                                                disabled>
                                                                                <option selected>ABC Seminer</option>
                                                                                <option value="1">One</option>
                                                                                <option value="2">Two</option>
                                                                                <option value="3">Three</option>
                                                                            </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="sudeshna.sengupta@34gmail.com"
                                                                                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="7820236254" 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"
                                                                                placeholder="Conference 1" id="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"
                                                                                Disabled
                                                                                placeholder="http/hdsjhdj/gfgf.com" id="conference_url"  >
                                                                        </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"
                                                                                placeholder="Lorem Ipsum is" Disabled id="location">
                                                                        </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"
                                                                                disabled id="conference_date">
                                                                        </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"
                                                                                disabled placeholder="Lorem Ipsum is" id="conference_phone_number">
                                                                        </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"
                                                                                disabled placeholder="Lorem Ipsum is" id="conference_account_number">
                                                                        </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"
                                                                                disabled placeholder="Lorem Ipsum is">
                                                                        </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" disabled
                                                                                        checked>
                                                                                    <label class="form-check-label"
                                                                                        for="flexCheckDefault">
                                                                                        Yes
                                                                                    </label>
                                                                                </div>
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox" value=""
                                                                                        id="flexCheckDefault" disabled>
                                                                                    <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"
                                                                                disabled placeholder="Lorem Ipsum is" id="attend_reason">
                                                                        </div>

                                                                        <div class="col-lg-4 col-md-4 col-12 mb-4">
                                                                            <label class="form-label mb-3">Uploaded
                                                                                Brochure</label>
                                                                            <div class="custom-upload-file">
                                                                                <input type="file" class="form-control"
                                                                                    disabled>
                                                                                <div class="uploaded-file">
                                                                                    <p class="p-first">file1</p>
                                                                                    <p class="p-second">file1</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="estimated-expenditure request">
                                                                            <h5>Estimated Expenditures</h5>
                                                                            <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">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="col-lg-4 col-md-4 col-12">
                                                                                        <label
                                                                                            class="form-label mb-3">Upload
                                                                                            Document</label>
                                                                                        <div class="custom-upload-file">
                                                                                            <input type="file"
                                                                                                class="form-control"
                                                                                                disabled="">
                                                                                            <div class="uploaded-file">
                                                                                                <p class="p-first">file1
                                                                                                </p>
                                                                                                <p class="p-second">file1
                                                                                                </p>
                                                                                            </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">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-4 col-md-4 col-12">
                                                                                        <label
                                                                                            class="form-label mb-3">Upload
                                                                                            Document</label>
                                                                                        <div class="custom-upload-file">
                                                                                            <input type="file"
                                                                                                class="form-control"
                                                                                                disabled="">
                                                                                            <div class="uploaded-file">
                                                                                                <p class="p-first">file1
                                                                                                </p>
                                                                                                <p class="p-second">file1
                                                                                                </p>
                                                                                            </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">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-4 col-md-4 col-12">
                                                                                        <label
                                                                                            class="form-label mb-3">Upload
                                                                                            Document</label>
                                                                                        <div class="custom-upload-file">
                                                                                            <input type="file"
                                                                                                class="form-control"
                                                                                                disabled="">
                                                                                            <div class="uploaded-file">
                                                                                                <p class="p-first">file1
                                                                                                </p>
                                                                                                <p class="p-second">file1
                                                                                                </p>
                                                                                            </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-4 col-md-4 col-12">
                                                                                        <label
                                                                                            class="form-label mb-3">Upload
                                                                                            Document</label>
                                                                                        <div class="custom-upload-file">
                                                                                            <input type="file"
                                                                                                class="form-control"
                                                                                                disabled="">
                                                                                            <div class="uploaded-file">
                                                                                                <p class="p-first">file1
                                                                                                </p>
                                                                                                <p class="p-second">file1
                                                                                                </p>
                                                                                            </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-4 col-md-4 col-12">
                                                                                        <label
                                                                                            class="form-label mb-3">Upload
                                                                                            Document</label>
                                                                                        <div class="custom-upload-file">
                                                                                            <input type="file"
                                                                                                class="form-control"
                                                                                                disabled="">
                                                                                            <div class="uploaded-file">
                                                                                                <p class="p-first">file1
                                                                                                </p>
                                                                                                <p class="p-second">file1
                                                                                                </p>
                                                                                            </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-4 col-md-4 col-12">
                                                                                        <label
                                                                                            class="form-label mb-3">Upload
                                                                                            Document</label>
                                                                                        <div class="custom-upload-file">
                                                                                            <input type="file"
                                                                                                class="form-control"
                                                                                                disabled="">
                                                                                            <div class="uploaded-file">
                                                                                                <p class="p-first">file1
                                                                                                </p>
                                                                                                <p class="p-second">file1
                                                                                                </p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-12 col-12 mt-5">
                                                                                <div class="request-button">
                                                                                    <button>Approve</button>
                                                                                    <button>Reject</button>

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}
                                    @empty
                                    <tr>
                                        <td colspan="7">No conferences found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-lg-12 ">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&lsaquo;</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&rsaquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </section>
@endsection

<script> function fireAjax(registrationId) {
    console.log(registrationId);
    }

</script>


@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", "#viewDetail", function() {
            const registratiion_no = $("#registratiion_no").val();
            console.log(registratiion_no);
            $.ajax({
                url: "{{ route('principal.conference.detail', ['registration_id' => '1110']) }}",,
                type: 'POST',
                data: {
                    registration_id: registrationId
                },
                success: function(response) {
                    // Handle the response from the server
                    console.log('AJAX request successful!');
                },
                error: function(xhr, status, error) {

                    console.error('AJAX request failed!');
                }
            });

        });
    </script>
    {{-- <script>
        var registrationId='';
        function fireAjax(registrationId) {
            console.log(registrationId);
            $.ajax({
                url: "{{ route('principal.conference.detail', ['registration_id' => '1110']) }}",,
                type: 'POST',
                data: {
                    registration_id: registrationId
                },
                success: function(response) {
                    // Handle the response from the server
                    console.log('AJAX request successful!');
                },
                error: function(xhr, status, error) {
                    // Handle errors
                    console.error('AJAX request failed!');
                }
            });
        }
    </script> --}}

    <script>
        $(document).on("click", ".editButton", function() {
            console.log("test");
            const allvalue = JSON.parse($(this).attr('data-value'));
            console.log(allvalue);
            const {
                id,
                name,
                position,
                conference_title,
                conference_url,
                location,
                conference_date,
                conference_phone_number,
                conference_account_number,
                conference_po_number,
                attend_reason,
            } = allvalue;
            $('#name').val(name);
            $('#id').val(id);
            $('#position').val(position);
            $('#conferenceTitle').val(conference_title);
            $('#conference_url').val(conference_url);
            $('#location').val(location);

            $('#conference_date').val(conference_date);
            $('#conference_phone_number').val(conference_phone_number);
            $('#conference_account_number').val(conference_account_number);
            $('#attend_reason').val(attend_reason);

            $('#conferenceDetailModal').show();
            //console.log(profile_image)
        });
    </script>
@endpush
@section('modal')
@endsection