@extends('admin.layouts.app')

@section('content')
    <section class="section dashboard spr-pnl">
        <div class="row ">
            <div class="line-hdr prsnl-spcfn">
                <!-- <h4>Master Panel</h4> -->
                <nav aria-label="breadcrumb ">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item active" aria-current="page">School</li>
                        <li class="breadcrumb-item active" aria-current="page">Conference List</li>

                    </ol>
                </nav>
            </div>
            <div class="col-lg-12 mt-3">
                <div class="pagetitle-row">
                    <div class="row">
                        <div class="col-lg-10 ">
                            {{-- <form form action="" method="GET"> --}}
                            <form form action="" method="GET">
                                <div class="row">
                                    <div class="col-lg-2 col-sm-2 col-12">
                                        <input type="text" name="employee_name" id="employee_name" class="form-control"
                                            placeholder="First Name"
                                            value="{{ !empty($_REQUEST['employee_name']) ? $_REQUEST['employee_name'] : '' }}">
                                    </div>

                                    <div class="col-lg-2 col-sm-2 col-12">
                                        <input type="text" name="employee_last_name" id="employee_last_name" class="form-control"
                                            placeholder="Last Name"
                                            value="{{ !empty($_REQUEST['employee_last_name']) ? $_REQUEST['employee_last_name'] : '' }}">
                                    </div>

                                    <div class="col-lg-2 col-sm-2 col-12">
                                        <input type="text" name="contact_phone_number" id="contact_phone_number"
                                            class="form-control" placeholder="Phone No"
                                            value="{{ !empty($_REQUEST['contact_phone_number']) ? $_REQUEST['contact_phone_number'] : '' }}">
                                    </div>

                                    <div class="col-lg-2 col-sm-2 col-12">
                                        <input type="text" name="school_email" id="school_email" class="form-control"
                                            placeholder="Email Id"
                                            value="{{ !empty($_REQUEST['school_email']) ? $_REQUEST['school_email'] : '' }}">
                                    </div>

                                    <div class="col-lg-2 col-sm-4 col-12">
                                        <button type="submit"><svg class="svg-inline--fa fa-magnifying-glass"
                                                aria-hidden="true" focusable="false" data-prefix="fas"
                                                data-icon="magnifying-glass" role="img"
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                                <path fill="currentColor"
                                                    d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z">
                                                </path>
                                            </svg><!-- <i class="fa-solid fa-magnifying-glass"></i> Font Awesome fontawesome.com -->
                                            Search</button>


                                    </div>
                                    <div class="col-lg-2 col-sm-4 col-12">
                                        <a class="btn btn-warning btn-lg" href="{{ route('admin.school.list') }}">Reset</a>


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

                        <div class="col-lg-2"></div>

                    </div>
                </div>

                <div class="performance-statistics row district">
                    <div class="table-responsive">
                        <table class="table table-borderless custom-data-table" id="conferenceDatatable">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Phone No.</th>
                                    <th scope="col">Email Id.</th>
                                    <th scope="col">Conference Title</th>
                                    <th scope="col">Conference Date</th>
                                    <th scope="col">Transaction Cost</th>
                                    <th scope="col">Created At</th>
                                    <th scope="col">Action</th>
                                    {{-- <th scope="col">Status</th>
                                    <th scope="col">Action</th> --}}

                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($schools as $school)
                                    <tr>
                                        <td>{{ $school->first_name . ' ' . $school->last_name }}</td>
                                        <td>{{ $school->mobile_number ?? '' }}</td>
                                        <td>{{ $school->email ?? '' }}</td>
                                        <td>{{ $school->conferenceDetail?->conference_title ?? '' }}</td>
                                        <td>{{ date('d-m-Y', strtotime($school->conferenceDetail?->conference_date)) }}</td>

                                        <td><i class="fa-solid fa-dollar-sign"></i>&nbsp; {{number_format( $school->conferenceLodging?->lodging + $school->conferenceMeal?->meal + $school->conferenceMilage?->milage + $school->conferenceMiscellaneous?->miscellaneous + $school->conferenceParking?->parking + $school->conferenceToll?->tolls, 2) }}
                                        </td>
                                        <td>{{ date('d-m-Y', strtotime($school->conferenceDetail?->created_at)) }}</td>
                                        {{-- <td>
                                            @switch($school->status)
                                                @case(1)
                                                    <a href="javascript:void(0)" data-value="0" data-table="schools"
                                                        data-message="inactive" data-uuid="{{ $school->uuid }}"
                                                        class="badge bg-success changeStatus">Active</a>
                                                @break

                                                @case(0)
                                                    <a href="javascript:void(0)" data-value="1" data-uuid="{{ $school->uuid }}"
                                                        data-table="schools" data-message="active"
                                                        class="badge bg-danger changeStatus">Inactive</a>
                                                @break

                                                @default
                                                    <a href="javascript:void(0)" class="badge badge-danger text-dark">Deleted</a>
                                            @endswitch
                                        </td> --}}
                                        <td>
                                            <a class="icon show viewConference" href="#" data-bs-toggle="modal"
                                                data-bs-target="#myModal2" title="View Conference Details"
                                                aria-expanded="true" data-id="{{$school->conferenceDetail->user_id  }}" data-value=''><i
                                                    class="fa-solid fa-eye view-details"></i></a>

                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No Data Yet</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- @include('admin.layouts.paginate', ['paginatedCollection' => $listBlogs]) --}}

    <div class="modal modalright right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel2">Conference Details</h4>
                    <button type="button" class="modalClose close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body pl-4 pr-4">
                    {{-- <form id="userSave" action="{{ route('admin.user.dashboardmenu.save') }}" --}}
                    {{-- class="formsubmit fileupload" method="post" enctype="multipart/form-data">
                            @csrf --}}
                    <div class="frm-reload">
                        <input type="hidden" class="form-control" name="id" id="id">

                        <div class="form-group">
                            <label for="first_name">Lodging</label>
                            <input type="text" class="form-control" name="lodging_Amount" placeholder="lodging Amount"
                                id="lodging_Amount" readonly>
                        </div>

                        <div class="form-group">
                            <label for="first_name">Meal </label>
                            <input type="text" class="form-control" name="mealsAmount" placeholder="Meal"
                                id="mealsAmount" readonly>
                        </div>

                        <div class="form-group">
                            <label for="first_name">Milage </label>
                            <input type="text" class="form-control" name="milagesAmount" placeholder="Milage"
                                id="milagesAmount" readonly>
                        </div>

                        <div class="form-group">
                            <label for="first_name">Miscellaneouses</label>
                            <input type="text" class="form-control" name="miscellaneousesAmount" placeholder="Miscellaneouses"
                                id="miscellaneousesAmount" readonly>
                        </div>

                        <div class="form-group">
                            <label for="first_name">Parking </label>
                            <input type="text" class="form-control" name="parkingsAmount" placeholder="Parking"
                                id="parkingsAmount" readonly>
                        </div>


                        <div class="form-group">
                            <label for="first_name">Tolls</label>
                            <input type="text" class="form-control" name="tollsAmount" placeholder="Tolls"
                                id="tollsAmount" readonly>
                        </div>

                    </div>
                    {{-- </form> --}}
                </div>
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div>
@endsection
@push('scripts')
    <script>
        // A basic demo function to handle "select all" functionality
        document.addEventListener('alpine:init', () => {
            Alpine.data('handleSelect', () => ({
                selectall: false,
                selectAction() {
                    countEl = document.querySelector('.table-items-action');
                    if (!countEl) return;
                    checkboxes = document.querySelectorAll('input.table-item:checked');
                    document.querySelector('.table-items-count').innerHTML = checkboxes.length;
                    if (checkboxes.length > 0) {
                        countEl.classList.remove('hidden');
                    } else {
                        countEl.classList.add('hidden');
                    }
                },
                toggleAll() {
                    this.selectall = !this.selectall;
                    checkboxes = document.querySelectorAll('input.table-item');
                    [...checkboxes].map((el) => {
                        el.checked = this.selectall;
                    });
                    this.selectAction();
                },
                uncheckParent() {
                    this.selectall = false;
                    document.getElementById('parent-checkbox').checked = false;
                    this.selectAction();
                }
            }))
        })
    </script>

    <script>
        $(document).ready(function() {
            loadData();
        })
        const loadData = () => {
            //   $('#bannerTable').DataTable().destroy();
            var dataTable = $('#conferenceDatatable').DataTable({
                dom: 'Bfrtip',
                processing: true,
                serverSide: false,
                autoWidth: false,
                responsive: true,
                searching: true,
                buttons: [
                    'csv', 'excel', 'pdf'
                ]

            });
        }

        $(document).on("click", ".viewConference", function() {
            const userId = $(this).data('id');

            $.ajax({
                url: "{{ route('admin.school.conference.detail') }}",
                type: 'POST',
                data: {
                    userId: userId
                },
                success: function(response) {
                    $('#lodging_Amount').val(response.lodgingsAmount);
                    $('#mealsAmount').val(response.mealsAmount);
                    $('#milagesAmount').val(response.milagesAmount);
                    $('#miscellaneousesAmount').val(response.miscellaneousesAmount);
                    $('#parkingsAmount').val(response.parkingsAmount);
                    $('#tollsAmount').val(response.tollsAmount);
                }
            });

        });


        $(document).on("click", ".modalClose", function() {
            $('#myModal2').modal('hide');
        });
    </script>
@endpush