@extends('app')
@section('content')
@include('layout.admin_sidebar')

<div class="">
    <div class="d-flex">
        <div class="organization-content d-flex flex-column flex-grow-1  px-3 pt-4 pb-2 pb-xl-0">

            <div class="organization-heading pb-2">
                Organizations List
            </div>

            <div class="organization-searchContainer d-flex  justify-content-between  flex-column flex-md-row ">
                <div class="d-flex flex-wrap align-items-center gap-3 gap-md-0">
                    <label for="">Search by Organization Name or Email: &nbsp;</label>
                    <div class="organization-search position-relative">
                        <input type="text" placeholder=" Enter Organization Name or Email" class="organization-input rounded-1 ps-2" id="organization-search">
                        <button class="position-absolute top-0 end-0 px-3 border-0 bg-blue text-light h-100 rounded-1"
                            id="org-search-bar-btn"><i class="fa-solid fa-magnifying-glass fa-lg"></i></button>
                    </div>
                    <div class=" py-md-0 pt-3 text-md-end organizationcreate ps-md-2">
                        <button class="btn-organizationcreate border-0 text-light py-1 px-2 rounded-1" id="actorg-reset-btn"> Reset</button>
                    </div>
                </div>
                <div class=" py-md-0 pt-3 text-md-end organizationcreate d-none">

                    <button class="edit btn-organizationcreate border-0 text-light py-1 px-2 rounded-1"> Add Organization</button>
                </div>
            </div>


            <!-- Table for larger screens -->
            <div class="table-responsive organization-overall d-none d-xl-block ">
                <table class="table organization_table" id="organization_table">
                    <thead class="organization_table_head text-center ">
                        <tr>
                            <!-- <th class="border-end first"><input type="checkbox" id="checkAll"></th> -->
                            <th class="border-end first">#</th>
                            <th class="border-end second">Organization Name</th>
                            <th class="border-end second">Name</th>
                            <th class="border-end">Email</th>
                            <th class="border-end">Phone Number</th>
                            {{-- <th class="border-end second">Activity/Cause</th> --}}
                            <!-- <th class="border-end">Status</th> -->
                            <!-- <th class="border-end org-head-right">Edit</th> -->
                        </tr>
                    </thead>
                    <tbody class="bg-white text-center organization_table_body">
                        <!-- Sample data row -->
                        @if($users && $users->count() > 0)
                        @foreach($users as $index => $user)
                        <tr class="org-tr">
                            <!-- <td class="border-end"><input type="checkbox" class="check"></td> -->
                            <td width="5%" class="border-end">{{$index + 1}}</td>
                            <td width="15%" class="border-end  text-wrap">{{$user -> name ?? '-' }}</td>
                            <td width="15%" class="border-end  text-wrap">{{ $user->first_name . " " . $user->last_name }}</td>
                            <td width="15%" class="border-end  text-wrap">{{$user -> email }}</td>
                            <td width="10%" class="border-end">{{$user -> phone_number }}</td>
                            {{-- <td width="10%" class="border-end  text-wrap">{{$user -> cause }}</td> --}}
                            <!-- <td class="border-end"><button class="btn btn-sm btn-success active active-button py-0 px-2 rounded">Active</button></td> -->
                            <!-- <td>
                                <i class=" fa-regular fa-pen-to-square edit-delete-icon"></i>
                                <i class="fa-solid fa-trash-can edit-delete-icon"></i>
                            </td> -->
                        </tr>
                        @endforeach

                        @else

                        <tr class="empty-table">
                            <td colspan="9" class="text-center">No Organization Are Available
                        </tr>
                        @endif

                    </tbody>
                </table>

            </div>

            <!-- Stacked view for mobile and tablet -->

            <div class="user-mobile-view-container d-flex flex-column d-xl-none pb-4 " id="organization_mobile">
                @if($users && $users->count() > 0)
                @foreach($users as $index => $user)
                <div class="user-mobile-item mb-3">
                    <div class="user-mobile-header d-flex justify-content-between align-items-center ">
                        <div class="user-label gap-3 d-flex align-items-center ">
                            <!-- <input type="checkbox" class=""> -->
                            <span>{{ $index + 1 }}</span>
                            <span class="org-name  text-break d-inline-block  text-wrap">{{$user -> name }} </span>
                        </div>
                        <div class="d-flex align-items-center">
                            <!-- <button class="btn btn-success btn-sm participant-active-btn me-3 ms-2 py-1 px-2 rounded">Active</button> -->
                            <i class="fa-solid fa-angle-down"></i>
                        </div>
                    </div>
                    <div class="user-mobile-body bg-light  pb-3">

                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Name:</span>
                            <span class="value status text-break d-inline-block ps-2  text-wrap">{{ $user->first_name . " " . $user->last_name }}</span>
                        </div>
                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="org-email user-label">Email:</span>
                            <span class="value email  text-break d-inline-block ps-2  text-wrap">{{$user -> email }}</span>
                        </div>
                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Phone Number:</span>
                            <span class="value status text-break d-inline-block ps-2">{{$user -> phone_number }}</span>
                        </div>
                        {{-- <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Activity/Cause:</span>
                            <span class="text-end text-break d-inline-block ps-2  text-wrap"> {{$user -> cause }}
                            </span>
                        </div> --}}
                        <!-- <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">

                                <span class="user-label">Action:</span>
                                <span>
                                    <i class="fa-regular fa-pen-to-square edit-delete-icon"></i>
                                    <i class="fa-solid fa-trash-can edit-delete-icon"></i>
                                </span>


                            </div> -->
                    </div>
                </div>
                @endforeach
                @else
                <span class="text-center">No Organizations Are Available.</span>
                @endif
            </div>
            <div class="mobile-pagination-container bg-white align-items-center d-flex flex-column justify-content-between d-xl-none py-3 px-3"
                style="box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px -2px, rgba(0, 0, 0, 0.1) 4px 0px 4px -2px, rgba(0, 0, 0, 0.1) -4px 0px 4px -2px"
                id="user-pagination">
                @if($users && $users->count() > 0)
               <div class="items-per-page-mobile text-center d-flex justify-content-center">
            <div>
                 <label for="items-per-page-dropdown" class="me-1 pt-1">Show</label>
            </div>

            <div>
                 <select id="items-per-page-dropdown" class="items-per-page-dropdown">
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="-1">All</option>
            </select>
            </div>
            <div>
                 <label for="items-per-page-dropdown" class="entries-label ms-1 pt-1">entries</label>
            </div>

        </div>

                <div id="pagination" class="text-center d-flex mt-3">
                    <!-- Previous Button -->
                    <a
                        id="prev-button"
                        class="p-1 me-2 rounded pre border-0"
                        style="cursor: pointer; user-select: none; color: #333; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; text-decoration: none"
                        onmouseover="this.style.backgroundColor='#881e25'; this.style.color='white';"
                        onmouseout="this.style.backgroundColor='white'; this.style.color='#333';">
                        Previous
                    </a>

                    <!-- Pagination Numbers will be dynamically added here -->
                    <div id="pagination-numbers" class="d-flex"></div>

                    <!-- Next Button -->
                    <a
                        id="next-button"
                        class="p-1 ms-2 rounded next border-0"
                        style="cursor: pointer; user-select: none; color: #333; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; text-decoration: none;"
                        onmouseover="this.style.backgroundColor='#881e25'; this.style.color='white';"
                        onmouseout="this.style.backgroundColor='white'; this.style.color='#333';">
                        Next
                    </a>
                </div>
                @endif
            </div>


        </div>
        <!--add form-side panel -->
        <div class="admin-sidebar-add position-absolute end-0 bg-light   ">
            <div class=" edit-title  bg-brown text-light p-3 d-flex justify-content-between align-items-center">
                <div>Add Organization</div>
                <i class="fa-solid fa-xmark " id="edit-cancel"></i>
            </div>

            <div class="text-sm-end edit-container pb-3 d-flex flex-column justify-content-between">
                <div class="px-4 mb-3 panel-size-sm">
                    <!-- <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                            <label class="edit-label mb-2 mb-sm-0" for="">Name<span class="text-danger">*</span>:</label>
                            <input type="text" class="edit-input py-1 ">
                        </div> -->
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Organization Name<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1 ">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Username<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1 ">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Organization Email<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1 ">
                    </div>
                    <!-- <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                            <label class="edit-label mb-2 mb-sm-0" for="">Contact Name<span class="text-danger">*</span>:</label>
                            <input type="text" class="edit-input py-1 ">
                        </div> -->
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Phone Number<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1 ">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Title<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1 ">
                    </div>


                    <div class="edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Activities<span class="text-danger">*</span>:</label>
                        <select id=" organization" name="organization" class="edit-input edit-dropdown py-1">
                            <option value="">-Select Activity-</option>
                            <option value="organization1">Activity 1</option>
                            <option value="organization2">Activity 2</option>
                            <option value="organization3">Activity 3</option>
                            <!-- Add more city options as needed -->
                        </select>
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">How many Participants<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1" placeholder=" Number of students">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Apps per Participant<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1" placeholder=" Number of Participants">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">App Sales Goal<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">App Price<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1" placeholder="  39.99">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">Share<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1">
                    </div>
                    <div class="edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for=" state">State<span class="text-danger">*</span>:</label>
                        <select id="state" name="state" class="edit-input edit-dropdown py-1">
                            <option value="">-Select a state-</option>
                            <option value="state1">state 1</option>
                            <option value="state2">state 2</option>
                            <option value="state3">state 3</option>
                            <!-- Add more city options as needed -->
                        </select>
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                        <label class="edit-label mb-2 mb-sm-0" for="">City<span class="text-danger">*</span>:</label>
                        <input type="text" class="edit-input py-1">
                    </div>
                    <div class="edit-context  d-flex flex-column flex-sm-row justify-content-end flex-wrap">
                        <label class="edit-label mb-2 mb-sm-0" for="">Address<span class="text-danger">*</span>:</label>
                        <textarea name="" id="" class=" edit-input edit-textarea "></textarea>
                    </div>
                    <div class="edit-context  d-flex flex-column flex-sm-row justify-content-end flex-wrap">
                        <label class="edit-label mb-2 mb-sm-0" for="">Mission<span class="text-danger">*</span>:</label>
                        <textarea name="" id="" class=" edit-input mission-textarea "></textarea>
                    </div>
                </div>
                <div class="text-end py-3 pe-4 edit-action-btn  bg-light">
                    <input class="btn-transparent-blue btn-edit-cancle  px-2 py-1 rounded me-1" type="button" value="cancel">
                    <input class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" value="save">
                </div>
            </div>

        </div>

    </div>


    @vite(['resources/js/pages/admin_dashboard.js'])
    @vite(['resources/js/admin_panel/organizations.js'])

    @vite(['resources/js/admin_panel/addform_sidepanel.js'])
    <!--search functionality for table-->
    @vite(['resources/js/admin_panel/search.js'])

    <!--search functionality for mobile-->
    @vite(['resources/js/admin_panel/mobile_search.js'])

    <!--pagination for table-->
    @vite(['resources/js/admin_panel/pagination.js'])

    <!--pagination for mobile-->
    @vite(['resources/js/admin_panel/paginationmobile.js'])

    @endsection