@extends('../admin/admin_layout.app')

@section('content')
<div class="page_right">

    <!-- Beardcrumbs -->
    <div class="breadcrumbs">
        <a href="{{ route('management.index') }}">Dashboard</a><span>/{{ ucfirst(Route::current()->getName()) }}</span>
    </div>
    <section class="team mt-2">
        <div class="row w-100 postion-relative">
            <div class="row mb-sm-4 mb-2 w-100 mx-0 team_top_section">
                <div class="col-sm-auto col-12 px-0">
                    <span>Team</span>
                </div>
                <div class="col-sm-auto col-12 mt-sm-0 mt-4">
                    <select class="form-select" name="type" id="team_type" aria-label="type">
                        <option selected disabled>Type</option>
                        <option value="all">All</option>
                        <option value="admin">Admin</option>
                        <option value="analyst">Analyst</option>
                    </select>
                </div>
                <div class="col-sm-auto col-12 mt-sm-0 mt-2">
                    <div>
                        <input type="text" id="admin_team_search" class="form-control" placeholder="Search" aria-describedby="Search">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </div>
                </div>
                <div class="col-auto text-sm-end text-start mt-sm-0 mt-2 px-0 position-absolute">
                    <span>
                        <button type="button" class="border-0 bg-transparent" data-bs-toggle="modal" data-bs-target="#addmember"><i class="fa-solid fa-plus text-light me-2 p-2"></i>Add Member</a>
                    </span>
                </div>
            </div>
            <div class="row w-100 mx-0">
                <div class="col-md-6 col-12 team_left_side">
                    <div class="row w-100 mx-0 team_table_section">
                        <table class="table table-light">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Member Type</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($members as $index => $member)
                                <tr class="{{$member->role}}">
                                    <th>{{ $index+1 }}</th>
                                    <td><a href="{{ route('management.team') }}?id={{$member->id}}">{{ $member->fullname }}</a></td>
                                    <td>{{ ucfirst($member->role) }}</td>
                                    <td>
                                        <span><a href="{{ route('management.team.script') }}?id={{ $member->id }}">Show more</a></span>
                                    </td>
                                    <td>
                                        <form class="admin_team_delele" action="{{ route('management.teams.destroy', $member->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="border-0 bg-transparent">
                                                <span><i class="fa-solid fa-trash"></i></span>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-6 col-12">

                </div>
            </div>
        </div>
    </section>

    <!-- Modal 1 -->
    <div class="modal fade" id="addmember" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="Add Member Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4 class="text-center mb-3">Add Member</h4>
                    <form action="{{ route('management.team.add') }}" method="POST" id="admin_member_add">
                        @csrf
                        <div class="bg-danger p-4 rounded-lg mb-4 text-light text-center d-none auth_failed"></div>
                        <div class="row w-100">
                            <div class="col-12 mb-2">
                                <label for="email" class="form-label">Email address</label>
                                <i class="fa-solid fa-envelope"></i>
                                <input type="email" name="email" class="form-control" id="email" placeholder="Email Address">
                                <div class="text-danger mt-2 fs-6 email_error"></div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <label for="first_name" class="form-label">First Name</label>
                                <i class="fa-solid fa-user"></i>
                                <input type="text" name="first_name" class="form-control" id="first_name" placeholder="First Name">
                                <div class="text-danger mt-2 fs-6 first_name_error"></div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <label for="last_name" class="form-label">Last Name </label>
                                <i class="fa-solid fa-user"></i>
                                <input type="text" name="last_name" class="form-control" id="last_name" placeholder="Last Name">
                                <div class="text-danger mt-2 fs-6 last_name_error"></div>
                            </div>
                            <div class="col-12 mb-2">
                                <label for="phone" class="form-label">Phone Number</label>
                                <i class="fa-solid fa-phone"></i>
                                <input type="tel" name="phone" class="form-control" id="phone" placeholder="Your Phone Number">
                                <div class="text-danger mt-2 fs-6 phone_error"></div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="position-relative">
                                    <label for="password" class="form-label">Password</label>
                                    <i class="fa-solid fa-lock"></i>
                                    <input type="password" name="password" class="form-control" id="password" placeholder="Create Password" autocomplete="on">
                                    <i class="fa-solid fa-eye"></i>
                                    <div class="text-danger mt-2 fs-6 password_error"></div>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="position-relative">
                                    <label for="password_confirmation" class="form-label">Confirm Password</label>
                                    <i class="fa-solid fa-lock"></i>
                                    <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm Password" autocomplete="on">
                                    <div class="text-danger mt-2 fs-6 password_confirmation_error"></div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <label for="choose_member" class="form-label">Choose Member</label>
                                <i class="fa-solid fa-user"></i>
                                <select class="form-select" id="choose_member" name="choose_member">
                                    <option selected disabled>Select Member</option>
                                    <option value="admin">Admin</option>
                                    <option value="analyst">Analyst</option>
                                </select>
                                <div class="text-danger mt-2 fs-6 choose_member_error"></div>
                            </div>
                            <div class="mt-5 mb-3 text-end">
                                <button type="submit" class="border-0">Create</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 2 -->
    <div class="modal fade" id="member_created" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="Member Created Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-body px-sm-5 px-2 mt-3">
                    <div class="d-flex justify-content-center">
                        <div class="rounded-circle text-center">
                            <i class="fa-solid fa-check"></i>
                        </div>
                    </div>
                    <h4 class="mt-3 mb-3 text-center">Member Created Successfully</h4>
                    <p class="text-center mb-1">A Verfication Email has been send to Member Email Address</p>
                    <div class="mb-3 text-center">
                        <button type="button" class="border-0 w-75 change_url" data-bs-dismiss="modal">
                            OK
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection