@extends('layouts.app')
@section('title', 'Edit Hectare Masters')
@section('content')

<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Edit Hectare Master</h1>
        <a href="{{route('hectareMaster.index')}}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
        <i class="fas fa-arrow-left fa-sm text-white-50"></i> Back</a>
    </div>
    {{-- Alert Messages --}}
    @include('common.alert')
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Edit Hectare Master</h6>
        </div>
        <form method="POST" action="{{route('hectareMaster.update', ['id' => $hectareMaster->id])}}">
            @csrf
            @method('PUT')
            <div class="card-body">
                <div class="form-group row">
                   <div class="col-sm-6 mb-3 mt-3 mb-sm-0"><label>Role</label>
                        <select class="form-control form-control-user @error('role_id') is-invalid @enderror" id="roleSelect" name="role_id">
                            <option selected disabled>Select Role</option>
                            @foreach ($roles as $role)
                                <option value="{{$role->id}}" {{isset($role->id) && $role->id == $hectareMaster->role_id ? 'selected' : ''}}>{{$role->role_name}}</option>
                            @endforeach
                        </select>
                        @error('role_id')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-sm-6 mb-3 mt-3 mb-sm-0">
                        <label>User</label>
                        <select class="form-control form-control-user @error('user_id') is-invalid @enderror" id="userSelect" name="user_id">
                            <option value="" disabled {{ !isset($hectareMaster->user_id) ? 'selected' : '' }}>Select User</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}" {{ $user->id == $hectareMaster['user_id'] ? 'selected' : '' }}>
                                    {{ $user->first_name . ' ' . $user->last_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('user_id')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    {{-- Status --}}
                    <div class="col-sm-6 mb-3 mt-3 mb-sm-0">
                        <span style="color:red;">*</span>Status</label>
                        <select class="form-control form-control-role @error('status') is-invalid @enderror" name="status">
                            <option selected disabled>Select Status</option>
                            <option value="1" {{old('role_id') ? ((old('role_id') == 1) ? 'selected' : '') : (($hectareMaster->status == 1) ? 'selected' : '')}}>Active</option>
                            <option value="0" {{old('role_id') ? ((old('role_id') == 0) ? 'selected' : '') : (($hectareMaster->status == 0) ? 'selected' : '')}}>Inactive</option>
                        </select>
                        @error('status')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if(isset($hectareMeasurement) && $hectareMeasurement && count($hectareMeasurement) > 0 )
                <div class="form-group row">
                    <div class="col-sm-12 mb-6 mt-6 mb-sm-0">
                        <div id="addMoreContainer">
                            @foreach($hectareMeasurement as $k => $hectMea)
                            <div class="added-section" style="margin-bottom: 10px;">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <label>1 Hectare : </label>
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" placeholder="Value" name="hectare[{{$k}}][value]" value="{{$hectMea['value']}}">
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" placeholder="Unit" name="hectare[{{$k}}][unit]" value="{{$hectMea['unit']}}">
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="#" class="btn btn-danger  remove-section" style="margin-right: 10px;">Remove</a>
                                        <a href="#" id="addMoreButton" class="btn btn-primary" style="margin-right: 10px;">Add</a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @else
                <div class="form-group row">
                    <div class="col-sm-12 mb-6 mt-6 mb-sm-0">
                        <div id="addMoreContainer">
                            <!-- Initial section or input fields -->
                            <div class="added-section" style="margin-bottom: 10px;">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <label>1 Hectare : </label>
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" placeholder="Value" name="hectare[0][value]">
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" placeholder="Unit" name="hectare[0][unit]">
                                    </div>
                                    <div class="col-sm-3">
                                        <a href="#" class="btn btn-danger  remove-section" style="margin-right: 10px;">Remove</a>
                                        <a href="#" id="addMoreButton" class="btn btn-primary" style="margin-right: 10px;">Add</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-success btn-role float-right mb-3">Update</button>
                <a class="btn btn-primary float-right mr-3 mb-3" href="{{ route('hectareMaster.index') }}">Cancel</a>
            </div>
        </form>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        var selectedUserId = {{ $selectedUserId ?? 'null' }};
        function fetchUsers(roleId, selectedUserId = null) {
            $.ajax({
                url: '{{ route("hectareMaster.getUsersByRole", ":roleId") }}'.replace(':roleId', roleId),
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    var users = response.users;
                    var userSelect = $('#userSelect');
                    userSelect.find('option').not(':first').remove();
                    
                    $.each(users, function(index, user) {
                        if(user.last_name == null){
                                user.last_name = '';
                        }
                        userSelect.append('<option value="' + user.id + '">' + user.first_name + ' ' + user.last_name + '</option>');
                    });
                    
                    if (selectedUserId) 
                    {
                        userSelect.val(selectedUserId);
                        console.log(userSelect.val(selectedUserId));
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    
        $('body').on('change', '#roleSelect', function() {
            var roleId = $(this).val(); 
            if (roleId) {
                fetchUsers(roleId, selectedUserId); 
            } else {
                $('#userSelect').empty().append('<option selected disabled>Select User</option>'); 
            }
        });
        $('#roleSelect').change();
    });

    $(document).ready(function() {
        var sectionIndex = {{ isset($hectareMeasurement) && $hectareMeasurement->count() ? $hectareMeasurement->count() : 1 }};
        
        $('#addMoreContainer').on('click', '#addMoreButton', function(e) 
        {
            e.preventDefault();
            var clonedSection = $('.added-section:first').clone();
            clonedSection.find('input[type="text"]').val('');
            clonedSection.find('input[type="text"]').each(function() 
            {
                var currentName = $(this).attr('name');
                $(this).attr('name', currentName.replace(/\[\d+\]/, '[' + sectionIndex + ']'));
            });
            
            $('#addMoreContainer').append(clonedSection);
            if ($('#addMoreContainer .added-section').length > 1) 
            {
                clonedSection.find('.remove-section').show();
            } else {
                clonedSection.find('.remove-section').hide();
            }
            sectionIndex++; 
        });
        
        $('#addMoreContainer').on('click', '.remove-section', function(e) 
        {
            e.preventDefault();
            $(this).closest('.added-section').remove();
            $('#addMoreContainer .added-section').each(function(index) 
            {
                $(this).find('input[type="text"]').each(function() {
                    var currentName = $(this).attr('name');
                    $(this).attr('name', currentName.replace(/\[\d+\]/, '[' + index + ']'));
                });
                
                if ($('#addMoreContainer .added-section').length > 1)
                {
                    $(this).find('.remove-section').show();
                } else {
                    $(this).find('.remove-section').hide();
                }
            });
            sectionIndex--; 
        });
    });
</script>


@endsection