@extends('layouts.app')
@section('title')
    {{ 'Invitation Dashboard' }}
@endsection

@section('content')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <h4 class="page-title">Invite Business</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    @if (Auth::user()->role_id == 1)
                        <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
                    @else
                        <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
                    @endif
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    <a href="javascript:void(0);">Invite Business</a>
                </li>
            </ol>
        </div>
    </div>
    <!-- breadcrumb -->

    <!-- Row -->
    <div class="row">
        <div class="col-lg-12">
            @if(auth()->user()->hasPermissionTo('can_manage_member'))
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Invite New Member</h5>
                        <div class="row">
                            <form class="form-row custom-invite-form-wrap" id="customInviteFormWrap">
                                <input type="hidden" name="currentInvitee" id="currentInvitee" value="1">
                                <input type="hidden" name="planSeat" id="planSeat" value="{{ $planSeat->free_user_seat }}">
                                <input type="hidden" name="occupiedSeat" id="occupiedSeat" value="{{ $occupiedSeat }}">
                                <div class="col-md-12 custom-inner-form-wrap">
                                    <div class="form-row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Invitee Email</label>
                                                <input type="text" class="form-control invitee-email" id=""
                                                    name="invitee_email[]" placeholder="Please enter email id"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group custom-single-select2">
                                                <label for="selectInput">Invitee Role</label>
                                                <select class="form-select form-control invitee-role" name="invitee_role[]"
                                                    id="">
                                                    <option></option>
                                                    <option value="5">Viewer</option>
                                                    <option value="4">Editor</option>
                                                    <option value="3">Admin</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label>&nbsp;</label>
                                            <button type="button" class="btn btn-success btn-icon"
                                                id="btnAddInvitee">+</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 submit-wrap">
                                    <button type="button" class="btn btn-main-primary pd-x-30" id="btnSubmit">Submit
                                        Invitation</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endif
            <div class="card border">
                <div class="card-body max-height-300 overflow-auto custom-invited-group">
                    <h5 class="card-title">Team Management</h5>
                    @if ($memberList->isNotEmpty())
                        <ul class="list-group">
                            @foreach ($memberList as $memberListSingle)
                                <li class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-center w-75">
                                        <span class="text-lowercase"
                                            data-member-id="{{ $memberListSingle->id }}">{{ $memberListSingle->invitee_email }}</span>
                                        <div class="d-flex align-items-center w-50">
                                            <div class="custom-single-select2">
                                                <select class="form-select form-control changed-role me-2 w-50"
                                                    name="changed_role[]" id="" @if(!auth()->user()->hasPermissionTo('can_manage_member')) disabled @endif>
                                                    <option></option>
                                                    <option value="5"
                                                        @if ($memberListSingle->invitee_role_id == 5) selected @endif>Viewer</option>
                                                    <option value="4"
                                                        @if ($memberListSingle->invitee_role_id == 4) selected @endif>Editor</option>
                                                    <option value="3"
                                                        @if ($memberListSingle->invitee_role_id == 3) selected @endif>Admin</option>
                                                </select>
                                            </div>
                                            @if ($memberListSingle->invitation_status == 1)
                                                <button class="btn btn-primary me-2 ms-2 @if(!auth()->user()->hasPermissionTo('can_manage_member')) disabled @endif">
                                                    <i class="fa fa-paper-plane" aria-hidden="true"
                                                        title="Invitation Sent"></i>
                                                </button>
                                            @elseif($memberListSingle->invitation_status == 2)
                                                <button class="btn btn-success me-2 ms-2 @if(!auth()->user()->hasPermissionTo('can_manage_member')) disabled @endif">
                                                    <i class="fa fa-check-circle" aria-hidden="true"
                                                        title="Invitation accepted"></i>
                                                </button>
                                            @else
                                                <button class="btn btn-danger me-2 ms-2 @if(!auth()->user()->hasPermissionTo('can_manage_member')) disabled @endif">
                                                    <i class="fa fa-times-circle" aria-hidden="true"
                                                        title="Invitation rejected"></i>
                                                </button>
                                            @endif
                                            <button class="btn btn-danger remove-member @if(!auth()->user()->hasPermissionTo('can_manage_member')) disabled @endif">
                                                <i class="fa fa-times" aria-hidden="true" title="Remove member"></i>
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p>No team member available</p>
                    @endif
                </div>
            </div>
            @if(!empty($pendingMemberList))
            <div class="card border">
                <div class="card-body max-height-300 overflow-auto custom-invited-group">
                    <h5 class="card-title">Pending Employees Request</h5>
                    @if ($pendingMemberList->isNotEmpty())
                        <ul class="list-group">
                            @foreach ($pendingMemberList as $member)
                                <li class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-center w-75">
                                        <span class="text-lowercase"
                                            data-member-id="{{ $member->id }}">{{ $member->invitee_email }}</span>
                                        <div class="d-flex align-items-center w-50">
                                            <div class="custom-single-select2">
                                                <select class="form-select form-control changed-role me-2 w-50"
                                                    name="changed_role[]" id="" @if(!auth()->user()->hasPermissionTo('can_accept_reject_employee')) disabled @endif>
                                                    <option></option>
                                                    <option value="5"
                                                        @if ($member->invitee_role_id == 5) selected @endif>Viewer</option>
                                                    <option value="4"
                                                        @if ($member->invitee_role_id == 4) selected @endif>Editor</option>
                                                    <option value="3"
                                                        @if ($member->invitee_role_id == 3) selected @endif>Admin</option>
                                                </select>
                                            </div>
                                            <button class="accept_employee btn btn-success me-2 ms-2 @if(!auth()->user()->hasPermissionTo('can_accept_reject_employee')) disabled @endif">
                                                <i class="fa fa-check" aria-hidden="true"
                                                    title="Accept Invitation"></i>
                                            </button>
                                            <button class="reject_employee btn btn-danger me-2 ms-2 @if(!auth()->user()->hasPermissionTo('can_accept_reject_employee')) disabled @endif">
                                                <i class="fa fa-times" aria-hidden="true"
                                                    title="Reject Invitation"></i>
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p>No Pending Employees</p>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
    <!-- End Row -->

    <div id="sendInvitation" data-route="{{ route('invite-business.send-invitation') }}"></div>
    <div id="changeMemberRole" data-route="{{ route('invite-business.change-member-role') }}"></div>
    <div id="removeMember" data-route="{{ route('invite-business.remove-member') }}"></div>
    <div id="employeeInvitation" data-route="{{ route('invite-business.employee-action') }}"></div>
   
    @push('scripts')
    <script>
        const SITE_URL = "