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

@section('content')
<!-- Page Start -->
<div class="page_right">

    <!-- Beardcrumbs -->
    <div class="breadcrumbs">
        <a href="{{ route('management.index') }}">Dashboard</a><span>/{{ ucfirst(Route::current()->getName()) }}</span>
    </div>
    <section class="users mt-2">
        <div class="row w-100 position-relative">
            <div class="row mb-4 w-100 mx-0 user_top_section">
                <div class="col-sm-auto col-12 ps-0 pe-2">
                    <span>Users</span>
                </div>
                <div class="col-sm-auto col-12 mt-sm-0 mt-4">
                    <select class="form-select" name="type" id="users_user_type" aria-label="type">
                        <option selected disabled>User Type</option>
                        <option value="all">All</option>
                        <option value="producer">Producer</option>
                        <option value="screenwriter">Screenwriter</option>
                    </select>
                </div>
                <div class="col-lg-auto col-md-2 col-sm-6 col-12 mt-md-0 mt-2">
                    <select class="form-select" name="" id="admin_users_producer_subscription_type" aria-label="Type">
                        <option selected disabled>Type</option>
                        <option value="all">All</option>
                        <option value="basic">Basic</option>
                        <option value="premium">Premium</option>
                    </select>
                </div>

                <!-- Dynamical Build -->
                <div class="col-lg-auto col-md-2 col-sm-6 col-12 mt-md-0 mt-2 admin_users_script_purchased d-none">
                    <select class="form-select" id="admin_users_script_purchased_min_max" aria-label="Producer Script Purchased">
                        <option selected disabled>Script purchased</option>
                        <option value="all">All</option>
                        <option value="most">Most Purchased</option>
                        <option value="least">Least Purchased</option>
                    </select>
                </div>
                <div class="col-lg-auto col-md-2 col-sm-6 col-12 mt-md-0 mt-2 admin_users_treatment_purchased d-none">
                    <select class="form-select" id="admin_users_treatement_purchased_min_max" aria-label="Producer Treaatment Purchased">
                        <option selected disabled>Treatment purchased</option>
                        <option value="all">All</option>
                        <option value="most">Most Purchased</option>
                        <option value="least">Least Purchased</option>
                    </select>
                </div>

                <div class="col-sm-auto col-12 mt-sm-0 mt-2">
                    <div>
                        <input type="text" id="users_user_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="#adduser"><i class="fa-solid fa-plus text-light me-2 p-2"></i>Add User</a>
                    </span>
                </div>
            </div>
            <div class="row w-100 mx-0">
                <div class="col-md-7 col-12 users_left_side">
                    <div class="row w-100 mx-0 user_table_section">
                        <table class="table table-light">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>User Type</th>
                                    <th>Type</th>
                                    <th class="purchased_head d-none">Script Purchased</th>
                                    <th class="purchased_head d-none">Treatment Purchased</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $index => $user)
                                <tr class="{{$user->role}} {{$user->account_type}}">
                                    <th>{{ $index+1 }}</th>
                                    <td><a href="{{ route('management.user') }}?id={{$user->id}}">{{ $user->fullname }}</a></td>
                                    <td>{{ ucfirst($user->role) }}</td>
                                    <td><button class="{{$user->account_type}}" disabled>{{$user->account_type}}</button></td>
                                    <td class="purchased_head d-none">0</td>
                                    <td class="purchased_head d-none">1</td>
                                    <td>
                                        <span><a href="{{ route('management.user.script') }}?id={{ $user->id }}">Show more</a></span>
                                    </td>
                                    <td>
                                        <form class="admin_users_delele" action="{{ route('management.users.destroy', $user->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-5 col-12 user_right_side">

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

    <!-- Modal 1 -->
    <div class="modal fade" id="adduser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="adduserLabel" 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">Add User</h4>
                    <form action="{{ route('management.users.add') }}" method="POST" id="admin_users_add">
                        @csrf
                        <div class="bg-danger p-4 rounded-lg mb-5 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_user" class="form-label">Choose User</label>
                                <i class="fa-solid fa-user"></i>
                                <select class="form-select" name="choose_user" id="choose_user">
                                    <option selected disabled>Select User</option>
                                    <option value="producer">Producer</option>
                                    <option value="screenwriter">Screenwriter</option>
                                </select>
                                <div class="text-danger mt-2 fs-6 choose_user_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="user_created" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="user_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">User Created Successfully</h4>
                    <p class="text-center mb-1">A Verfication Email has been send to User 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>
</div>
@endsection