@section('title', 'Members')

@section('top-menu-items')
<x-partials.top-menu-item name="Organization" route="settings" />
<x-partials.top-menu-item name="Tour Vessels" route="vessels" />
<x-partials.top-menu-item name="Team Members" route="users" />
@endsection

@section('sub-menu-items')
<x-partials.sub-menu-item name="Users" route="users" />
<x-partials.sub-menu-item name="Roles" route="users.roles" />
@endsection

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            User Management
        </h2>
    </x-slot>

    <div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">

        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="d-none app-container  container-xxl d-flex flex-stack ">

            <!--begin::Page title-->
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">

                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        <a href="/metronic8/demo1/index.html" class="text-muted text-hover-primary">
                            Home </a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-500 w-5px h-2px"></span>
                    </li>
                    <!--end::Item-->

                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        User Management </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-500 w-5px h-2px"></span>
                    </li>
                    <!--end::Item-->

                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        Users </li>
                    <!--end::Item-->

                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page title-->
            <!--begin::Actions-->
            <div class="d-flex align-items-center gap-2 gap-lg-3">

                <!--begin::Primary button-->
                <a href="/users/roles" class="btn btn-sm fw-bold btn-secondary">
                    View Roles </a>
                <!--end::Primary button-->

                <!--begin::Primary button-->
                <a href="#" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                    Add User </a>
                <!--end::Primary button-->
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Toolbar container-->
    </div>

    <div id="kt_app_content" class="app-content  flex-column-fluid ">


        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container  container-xxl ">
            <!--begin::Card-->
            <div class="card" style="background-color: #F3F3F3;">
                <!--begin::Card header-->
                <div class="card-header border-0 pt-6">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                            <!-- <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                        rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                    <path
                                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                        fill="black" />
                                </svg>
                            </span> -->
                            <!--end::Svg Icon-->
                            <!-- <input type="text" data-kt-customer-table-filter="search"
                                class="form-control form-control-solid w-250px ps-15" placeholder="Search Users" /> -->
                        </div>
                        <!--end::Search-->
                    </div>
                    <!--begin::Card title-->
                    <!--begin::Card toolbar-->
                    <div class="card-toolbar">
                        <!--begin::Toolbar-->
                        <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                            <!--end::Export-->
                            <!--begin::Add customer-->
                            @can('write_users')
                            <a href="#" class="btn add-btn" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">Add User</a>
                            @endcan
                            <!--end::Add customer-->
                        </div>
                        <!--end::Toolbar-->
                        <!--begin::Group actions-->
                        <div class="d-flex justify-content-end align-items-center d-none"
                            data-kt-customer-table-toolbar="selected">
                            <div class="fw-bolder me-5">
                                <span class="me-2" data-kt-customer-table-select="selected_count"></span>Selected
                            </div>
                            <button type="button" class="btn btn-danger"
                                data-kt-customer-table-select="delete_selected">Delete Selected</button>
                        </div>
                        <!--end::Group actions-->
                    </div>
                    <!--end::Card toolbar-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            
                                <th class="min-w-125px">User</th>
                                <th class="min-w-125px">Email</th>
                                <th class="min-w-125px">Role</th>
                                <th class="min-w-125px">Status</th>
                                @can('write_users')
                                <th class="min-w-100px">Actions</th>
                                @endcan
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->

                        <!-- Password Reset Success Modal -->
                        <div wire:ignore class="modal fade" id="passwordResetSuccessModal" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog mt-5">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Password Reset</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        Password reset link sent successfully!
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <tbody class="fw-bold text-gray-600" style="color: #3E3D3D !important;">
                            @foreach ($users as $user)
                            <tr data-id="{{ $user->id }}">
                        
                                <td class="d-flex align-items-center">
                                    <!--begin:: Avatar -->
                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                        <a href="/metronic8/demo1/apps/user-management/users/view.html">
                                            <div class="symbol-label fs-3 bg-light-danger text-danger">
                                                M </div>
                                        </a>
                                    </div>
                                    <!--end::Avatar-->
                                    <!--begin::User details-->
                                    <div class="d-flex flex-column">
                                        <a href="#" class="text-gray-800 text-hover-primary mb-1">{{$user->name}}</a>
                                    </div>
                                    <!--begin::User details-->
                                </td>
                                <td>{{ $user->email }} </td>
                                <td data-order="2024-12-04T02:59:29+05:00">
                                    @foreach($user->getRoleNames() as $role)
                                    <div class="badge badge-light fw-bold">{{ $role }}</div>
                                    @endforeach
                                </td>

                                <td>
                                    {{$user->status}}
                                </td>

                                @can('write_users')
                                <td>
                                    <a href="#" class="btn btn-sm btn-white custom-action"
                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                        <span class="svg-icon svg-icon-5 m-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none">
                                                <path
                                                    d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                    fill="black" />
                                            </svg>
                                        </span>
                                    </a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4" data-kt-menu="true">

                                        @if (!$user->hasRole('Owner'))
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" onclick="openEditModal('')" class="menu-link act-btn px-3">
                                                Edit
                                            </a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        @if($user->status == 'active')
                                        <div class="menu-item px-3">
                                            <a href="#" onclick="changeStatus('', 'inactive')" class="menu-link act-btn  px-3">
                                                Deactivate Access
                                            </a>
                                        </div>
                                        @else
                                        <div class="menu-item px-3">
                                            <a href="#" onclick="changeStatus('', 'active')" class="menu-link act-btn px-3">
                                                Activate User
                                            </a>
                                        </div>
                                        @endif
                                        <!--end::Menu item-->

                                        <!--end::Menu item-->
                                        @endif

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" onclick="sendPasswordReset('')" class="menu-link act-btn px-3">
                                                Send Password Reset
                                            </a>
                                        </div>
                                        <!--end::Menu item-->
                                       @php
                                           $id = auth()->id();   
                                       @endphp
                                        <!--begin::Menu item-->                                         
                                      @if($id != $user->id)
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3 delete"
                                                data-kt-customer-table-filter="delete_row">Delete</a>
                                        </div>
                                        @endif
                                        <!--endP::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                                @endcan
                            </tr>
                            @endforeach
                        </tbody>
                        <!--end::Table body-->
                    </table>
                    <!--end::Table-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Content container-->
    </div>
    <!--begin::Modal - Add task-->
    <div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <!--end::Modal header-->

                <!--begin::Form-->
                @livewire('users.add-edit-user')
                <!--end::Form-->
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Add task-->
    <style>
        table input.form-check-input {
            background-color: white !important;
        }

        .form-check.form-check-solid .form-check-input:checked {
            background-color: #009ef7 !important;
        }
    </style>
    @push('scripts')
    <script src="/assets/js/custom/apps/customers/list/list.js"></script>
    @endpush
    @push('styles')
    <!--begin::Page Vendor Stylesheets(used by this page)-->
    <link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/assets/css/custom/products.css" type="text/css">
    <!--end::Page Vendor Stylesheets-->
    @endpush
</x-app-layout>