@extends('layouts.adminlayout')

@section('content')
	<style>
		.profile{
			width: 100%;
			display: inline-block;
		}
		.button2{
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		.inContainer{
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		.button{
		    color: #fff;
		    background-color: #007bff;
		    border-color: #007bff;
		    font-size: 12px;
		    text-decoration: none;
		    display: inline-block;
		    text-align: center;
		    justify-content: center;
		    padding: 8px;
		    margin: 16px;
		    margin-left: 0px;
		    border-radius: 6px;			
		}
		.card
		{	
			display: block;
			background-color: white;
			margin: 10px;
			border-radius: .25rem;
		}
		.card-header{
			color: black;
			background-color: rgba(0, 0, 0, 0.08);
			border-bottom: 1px solid rgba(0,0,0,.125);
			border-top-left-radius: 8px;
    		border-top-right-radius: 8px;
			padding: .75rem 1.25rem;
		}
		.card-body{
			padding: 5px;
		}
		.input{
			display: block;
		    width: 90%;
		    border: 1px solid #ced4da;
		    border-radius: 5px;
		    padding: 10px;
		    margin-top: 5px;
		    margin-bottom: 10px;
		}
		.alert {
		    padding: 20px;
		    background-color: #4CAF50;
		    color: white;
		}
		.alert1 {
		    padding: 20px;
		    background-color: red;
		    color: white;
		}
		.closebtn {
		    margin-left: 15px;
		    color: white;
		    font-weight: bold;
		    float: right;
		    font-size: 22px;
		    line-height: 20px;
		    cursor: pointer;
		    transition: 0.3s;
		}

		.closebtn:hover {
		    color: black;
		}


/* Add Bootstrap 4 classes to style the form */

.card {
    margin-top: 20px;
}

.card-header {
    background-color: #007bff;
    color: #fff;
}

.card-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 10px;
}

.col-md-4 {
    text-align: right;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.invalid-feedback {
    display: block;
    color: #dc3545;
    margin-top: 5px;
}

/* Specific styling for form and form controls */
form {
    margin-bottom: 0; /* Remove default form margin */
}

.form-control {
    width: 100%;
}

/* Optional: Add additional styling for specific form controls */
#name,
#email,
#username,
#mobile,
#territorySelect,
#plantSelect,
#areaSelect,
#deptSelect,
#userRole,
#designation,
#password,
#password-confirm {
    margin-bottom: 10px;
    padding:8px;
}
	</style>
	<div class="inContainer">

		<div class="profile">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('User Edit') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ url('updateuserprofile') }}/{{ $user->id }}">
                        @csrf
                        <input type="hidden" name="id" value="{{$user->id }}">
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ $user->name }}" required autofocus>

                                @if ($errors->has('name'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"  name="email" value="{{ $user->email }}" required>
                                

                                @if ($errors->has('email'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        
                        
                        
                        <div class="form-group row">
                            <label for="deptSelect" class="col-md-4 col-form-label text-md-right">{{ __('Department') }}- {{ $user->deptdetails->deptName }}</label>

                            <div class="col-md-6">
                                <select class="form-control" id="deptSelect" name="dept" placeholder="Department" required>
                					<option value="" disabled="" selected="">Choose a Department</option>
                					
                					@foreach(App\Models\dept::orderBy('deptName', 'asc')->get() as $depts)
                					<option value="{{ $depts->id }}" {{ $user->dept == $depts->id ? 'selected' : ''  }}>{{ $depts->deptName }}</option>
                					@endforeach
                					
                					
                					
                                </select>

                                @if ($errors->has('dept'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('dept') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="userRole" class="col-md-4 col-form-label text-md-right">{{ __('Role') }}</label>

                            <div class="col-md-6">
                                <select class="form-control" id="userRole" name="role" placeholder="Role" required>
                					<option value="" disabled="" selected="">Choose a Role</option>
                					
                					<option value="0" {{ $user->role == 0 ? 'selected' : ''  }}>Admin</option>
                					<!--<option value="5" {{ $user->role == 5 ? 'selected' : ''  }}>Territory Admin</option>-->
                    			    <option value="4" {{ $user->role == 4 ? 'selected' : ''  }}>Safety Officer</option>
                    			    <option value="1" {{ $user->role == 1 ? 'selected' : ''  }}>Dept Manager</option>
                    			    <option value="3" {{ $user->role == 3 ? 'selected' : ''  }}>Executor</option>
                    			    <option value="2" {{ $user->role == 2 ? 'selected' : ''  }}>Reporter</option>
                    			    <option value="-1" {{ $user->role == -1 ? 'selected' : ''  }}>Unapprove</option>
                					
                					
                					
                                </select>

                                @if ($errors->has('dept'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('dept') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                       

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary" style="padding:8px;color:white;padding-left:20px; padding-right:20px;border-radius:5px;" >
                                    {{ __('Edit') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


@if($user->role != -1)
<div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Add Areas For User') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ url('useraddarea') }}/{{ $user->id }}">
                        @csrf
                        <input type="hidden" name="user_id" value="{{$user->id }}">
                        
                        
                         
                        
                        <div class="form-group row">
                            <label for="mobile" class="col-md-4 col-form-label text-md-right">{{ __('Territory') }}</label>

                            <div class="col-md-6">
                                <select class="form-control" id="territorySelect" name="territory" placeholder="Department" required>
                					<option selected disabled> Select Territory</option>
                                      @foreach(App\Models\Territory::all() as $territory)
                                      <option value="{{ $territory->id }}">{{ $territory->name }}</option>
                                      @endforeach
                					
                                </select>

                                @if ($errors->has('unit_no'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('unit_no') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        
                        <div class="form-group row">
                            <label for="plantSelect" class="col-md-4 col-form-label text-md-right">{{ __('Plants') }}</label>

                            <div class="col-md-6">
                                <select class="select form-control" id="plantSelect" placeholder="Plants" name="areas[]"  required>
                					<option selected disabled> Select Plants</option>
                					
                					
                                </select>

                                @if ($errors->has('plant_id'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('plant_id') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        
                       
                        

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary" style="padding:8px;color:white;padding-left:20px; padding-right:20px;border-radius:5px;">
                                    {{ __('Add') }}
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <h4>Area List</h4>
                    
                    <table style="width:100%;">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Plant</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        
                        <tbody>
                            @if(!empty($user->area_id))
                            @foreach(json_decode($user->area_id) as $index => $area)
                            <tr>
                                @php
                                    $a = App\Models\Plant::find($area);
                                @endphp
                                <td>{{ $index + 1
                                }}</td>
                                <td>{{ $a->name }}</td>
                                <td>
                                    <center><a style="padding:8px;color:white;padding-left:20px; padding-right:20px;border-radius:5px; background:red;display:inline-block;" href="{{ url('/deleteuserarea')}}/{{ $user->id}}/{{ $a->id }}">Delete</a></td></center>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>



			</div>
	</div>



      <script type="text/javascript">
    
  document.addEventListener('DOMContentLoaded', function () {

    document.getElementById('territorySelect').addEventListener('change', function () {
        let territoryId = this.value;
        fetch(`/get-plants/${territoryId}`)
            .then(response => response.json())
            .then(plants => {
                let plantSelect = document.getElementById('plantSelect');
                plantSelect.innerHTML = '<option value="">Select Plant</option>';
                plants.forEach(plant => {
                    let option = document.createElement('option');
                    option.value = plant.id;
                    option.text = plant.name;
                    plantSelect.appendChild(option);
                });
            });
    });

    document.getElementById('plantSelect').addEventListener('change', function () {
        let plantId = this.value;
        fetch(`/get-areas/${plantId}`)
            .then(response => response.json())
            .then(areas => {
                let areaSelect = document.getElementById('areaSelect');
                areaSelect.innerHTML = '<option value="">Select Area</option>';
                areas.forEach(area => {
                    let option = document.createElement('option');
                    option.value = area.id;
                    option.text = area.name;
                    areaSelect.appendChild(option);
                });
            });
    });
    
    
 

  });
</script>
@endsection