@extends('layout.app')
@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18"></h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">User Management</a></li>
                                    <li class="breadcrumb-item active">User</li>
                                </ol>
                            </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Add User</h4>
                                <form action="{{ route('supervisiorheadstore') }}" method="post">
                                @csrf

                                <div class="row mb-4">
                                    <label for="horizontal-firstname-input" class="col-sm-3 col-form-label">Role </label>
                                        <div class="col-sm-9">
                                            <select id="formrow-inputState" name="role" class="form-select" required>
                                                <option value="">Choose Role</option>
                                                @foreach($userrole as $state)
                                                <option value="{{ $state->id }}">{{ $state->user_role }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                </div>
                                    <div class="row mb-4">
                                        <label for="horizontal-firstname-input" class="col-sm-3 col-form-label">Name</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" name="name" placeholder="Enter Name" onkeyup="Filterspace(this)" required>
                                                @error('name')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            </div>
                                    </div>

                                    <div class="row mb-4">
                                    <label for="horizontal-firstname-input" class="col-sm-3 col-form-label">Select Gender </label>
                                        <div class="col-sm-9">
                                            <select id="formrow-inputState" name="gender" class="form-select" required>
                                                <option value="">Choose Gender</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                </div>
<!-- 
                                    <div class="row mb-4" hidden>
                                        <label for="horizontal-firstname-input" class="col-sm-3 col-form-label">Email</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control" name="email" value="asdf@gmail.com" value= placeholder="Enter Email" readonly>
                                                @error('supervisiorhead')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            </div>
                                    </div> -->

             

                                    <div class="row mb-4">
                                        <label for="horizontal-firstname-input" class="col-sm-3 col-form-label">Mobile Number</label>
                                            <div class="col-sm-9">
                                                <input type="tel" maxlength="10" class="form-control" name="mobile" onkeyup="Filter(this)" placeholder="Enter Mobile Number">
                                                @error('mobile')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            </div>
                                    </div>
                                      
                                    <div class="row justify-content-end">
                                            <div class="col-sm-9">
                                                @if(session('success'))
                                                    <div class="alert alert-success" >
                                                {{ session('success') }}
                                                    </div>
                                                @endif
                                                    <div>
                                                        <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title">User Lists</h4>
                                        <p class="card-title-desc"></p>
        
                                        <div class="table-responsive">
                                            <table id="datatable" class="table table-editable table-nowrap align-middle table-edits">
                                            <thead>
    <tr>
        <th>ID</th>
        <th>Role</th>
        <th>Name</th>
        <th>Gender</th>
        <th>Email</th>
        <th>Mobile Number</th>
        <th>Status</th> <!-- New column for status -->
        <th>Action</th>
    </tr>
</thead>
<tbody>
    @foreach($supervisiorhead as $states)
    <tr>
        <td>{{$states->id}}</td>
        <td>{{$states->roles->user_role ?? null}}</td>
        <td>{{$states->name}}</td>
        <td>{{$states->gender}}</td>
        <td>{{$states->email}}</td>
        <td>{{$states->mobile}}</td>
        <td>
            @if($states->active=='0')
                <span class="badge bg-success">Active</span>
            @else
                <span class="badge bg-danger">Inactive</span>
            @endif
        </td>
        <td>
            <a href="edit050/{{$states->id}}"><button class="btn btn-soft-info waves-effect waves-light">Edit</button></a>
            <form action="{{ route('toggleStatus', $states->id) }}" method="POST" style="display: inline;">
                @csrf
                <button type="submit" class="btn btn-soft-warning waves-effect waves-light">
                    @if($states->active=='0')
                        Activate
                    @else
                    Deactivate
                    @endif
                </button>
            </form>
        </td>
    </tr>
    @endforeach
</tbody>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div> 
                </div>
@endsection